Difference between revisions of "Team:GZHS-United/CSS/homestyle"
Jin Honglei (Talk | contribs) |
Jin Honglei (Talk | contribs) |
||
| Line 147: | Line 147: | ||
background:#2A579A; | background:#2A579A; | ||
text-align: center; | text-align: center; | ||
| − | padding: | + | padding: 2em 0; |
} | } | ||
.top-menu ul li{ | .top-menu ul li{ | ||
Revision as of 17:18, 24 September 2017
body a{
transition:0.5s all;
-webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } input[type="button"]{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; }
h1,h2,h3,h4,h5,h6{ padding:0 0; margin:0 0; } p{ padding:0 0; margin:0 0; } ul{ padding:0 0; margin:0 0; } body{ padding:0 0; margin:0 0; font-family: 'Open Sans', sans-serif;} .logo a {
font-size: 4em; text-transform: uppercase; color: #2A579A; font-weight: 900; text-decoration: none; font-family: 'Roboto Slab', serif;
} .logo a:hover{
color: #fff;
} /*--- slider-css --*/ .slider { position: relative; } .rslides {
position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }
.rslides li {
-webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }
.rslides li:first-child {
position: relative; display: block; float: left; }
.rslides img {
display: block; height: auto; float: left; width: 100%; border: 0; }
.caption{ position: absolute; text-align:center; border-top: 7px solid #2A579A;
border-bottom: 7px solid #2A579A;
padding-top: 25px;
width: 45%; top: 31%; left: 27.5%; } .caption h3{ color: #2A579A; font-weight: 700; font-size: 2em; text-transform: uppercase; margin-bottom: 0.5em; } a.morebtn{ background:#3D3D3D; padding:0.8em 0; display:block; font-size:0.875em; text-transform:uppercase; color:#FFF; width:20%; margin:0 auto; transition:0.5s all ease; -webkit-transition:0.5s all ease; -moz-transition:0.5s all ease; -o-transition:0.5s all ease; -ms-transition:0.5s all ease; } a.morebtn:hover{ background:#585686; } .callbacks_tabs a:after { content: "\f111"; font-size: 0; font-family: FontAwesome; visibility: visible; display: block; height: 12px; width: 12px; display: inline-block; border: 2px solid #747474; } .callbacks_here a:after{ border: 2px solid #FFF; } .callbacks_tabs a{ visibility:hidden; } .callbacks_tabs li{ display:inline-block; } ul.callbacks_tabs.callbacks1_tabs { position: absolute; bottom: 14px; z-index: 999; left: 13px; } /*-- sticky-nav --*/ .fixed{ position: fixed; top: 0; width: 100%; margin: 0 auto; left:0; z-index: 999; } /*-- sticky-nav --*/ .fixed-header{ background:#2A579A; text-align: center; padding: 2em 0; } .top-menu ul li{ display: inline-block; } .top-menu ul li a{
font-size: 1.5em; text-decoration: none; margin: 0 0.5em; font-family: 'Roboto Slab', serif;
} .top-menu ul li a:hover {
color: #323232;
} .header-bottom {
border-bottom: 2px solid #78b907;
} span.menu {
display: none;
} nav a { position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; }
nav a:hover, nav a:focus { outline: none; } /* Effect 5: same word slide in */ .cl-effect-5 a { overflow: hidden; }
.cl-effect-5 a span { padding:2px; position: relative; display: inline-block;
color: #fff;
-webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
.cl-effect-5 a span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 700; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.cl-effect-5 a:hover span, .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .about-section {
padding: 4em 0; background: #2d4652 repeat; }
.about-section h3 {
font-size: 2.5em; text-transform: uppercase; color: #fff; font-weight: 600; margin: 0 0 1em 0.5em; font-family: 'Roboto Slab', serif;
} .view {
width: 350px;
height:320px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff no-repeat center center;
border-radius: 20px;
} .view .mask,.view .content {
width: 350px;
height: 320px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
border-radius: 20px;
} .view img {
display: block; position: relative;
} .view h2 {
text-transform: uppercase; color: #78b907; text-align: center; position: relative; font-size: 25px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; font-weight: 600;
} .view p {
font-family: Georgia, serif; font-style: italic; font-size: 20px; position: relative; color: #fff; padding: 15px 20px 15px; text-align: center;
} .view a.info {
display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000;
} .view a.info: hover {
-webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000;
} .view img {
width: 100%; height: 300px;
} .menu-section{
padding: 4em 0; background: #ffffff;
} .menu-section h3 {
font-size: 2.5em; text-transform: uppercase; color: #000; font-weight: 600; margin: 0 0 1em 0.5em; font-family: 'Roboto Slab', serif;
} .manu-grid {
position: relative;
} .menu-info { position: absolute; width: 90%; top:76%; left:15px; display: none; background: rgba(0, 0, 0, 0.5); } .menu-grid:hover div.menu-info {
display: block;
} .menu-info h4 {
font-size: 2.5em; text-align: right; color:#78b907; padding: 0.5em 1em 0; font-weight: 600;
} .menu-info h5 {
font-size: 1.5em; color: #fff; padding: 1em 0.3em; text-transform:uppercase;
} .our_work{
padding-bottom: 4em;
} .our_work h3 {
font-size: 2.5em; font-weight: 600; margin: 0 0 1em 0.5em; font-family: 'Roboto Slab', serif;
} .our_work p {
font-size: 1.2em; margin: 0 0 1em 0.5em; font-family: 'Roboto Slab', serif;
} .contact-section {
padding: 4em 0; min-height: 400px; }
.contact-section h3 {
font-size: 2.5em; text-transform: uppercase; color: #fff; font-weight: 600; margin: 0 0 1em 0.5em; font-family: 'Roboto Slab', serif;
} .contactgrid {
padding-bottom: 2em;
} .contactgrid input[type="text"] { width: 100%; background: none; outline: none; border: none; border-bottom: 1.5px solid#05b6ea;
font-size: 1.5em; color: #05b6ea; text-transform: capitalize; padding: 10px 0; text-align: left;
}
.contactgrid1 textarea { width: 100%; background: none; outline: none; border: none; resize: none; border-bottom: 1.5px solid#05b6ea; font-size: 1.5em; color: #05b6ea; text-transform: capitalize; padding: 10px 0; height: 2.8em; } .contactgrid2 {
padding: 1em 0 0 12em;
} .contactgrid2 input[type="button"] {
color: #fb4b4b; background: none; border: none; font-size: 1.5em; outline: none; text-transform: uppercase; padding: 1em 1em; margin: 40px 0 0 40px; border: 1.5px solid;
} .contactgrid2 input[type="button"]:hover { color: #d5d6d7; }
