css/main.css
/*
Template Author : pixelhint.com
Author Email : contact@pixelhint.com
Template Name : Fertile
*****************************************
- Header
- Billboard
- Call To Action
- Services
- Recent Work
- Testimonials
- Client
- Footer
*/
/* Fonts */
@font-face {
font-family: 'open_regular';
src: url('../fonts/opensans-regular.eot');
src: url('../fonts/opensans-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-regular.woff') format('woff'),
url('../fonts/opensans-regular.ttf') format('truetype'),
url('../fonts/opensans-regular.svg#LatoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'open_bold';
src: url('../fonts/opensans-bold.eot');
src: url('../fonts/opensans-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-bold.woff') format('woff'),
url('../fonts/opensans-bold.ttf') format('truetype'),
url('../fonts/opensans-bold.svg#LatoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'open_semibold';
src: url('../fonts/opensans-semibold.eot');
src: url('../fonts/opensans-semibold.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-semibold.woff') format('woff'),
url('../fonts/opensans-semibold.ttf') format('truetype'),
url('../fonts/opensans-semibold.svg#open_sanssemibold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'satellite';
src: url('../fonts/satellite.eot');
src: url('../fonts/satellite.eot?#iefix') format('embedded-opentype'),
url('../fonts/satellite.woff') format('woff'),
url('../fonts/satellite.ttf') format('truetype'),
url('../fonts/satellite.svg#open_sanssemibold') format('svg');
font-weight: normal;
font-style: normal;
}
/* General CSS*/
.wrapper{
width: 1200px;
height: auto;
margin: 0 auto;
}
footer .f_cols ul.sm li a,
header nav ul li a,
footer a:hover{
transition:all .2s linear;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition:all .2s linear;
}
/* Header */
header.trasparent_nav{
width: 100%;
height: 100px;
background-color: rgba(255, 255, 255, .5);
border-bottom: 1px rgba(255, 255, 255, .3) solid;
top: 0;
left: 0;
position: absolute;
z-index: 9999;
}
header.trasparent_nav .logo,
header.fixed_nav .logo{
float: left;
margin-top: 30px;
}
header.fixed_nav .logo{
margin-top: 27px;
}
header.trasparent_nav nav,
header.fixed_nav nav{
float: right;
margin-top: 40px;
}
header.fixed_nav nav{
margin-top: 32px;
}
header.trasparent_nav nav ul,
header.fixed_nav nav ul{
list-style: none;
}
header.trasparent_nav nav ul li,
header.fixed_nav nav ul li{
float: left;
margin-left: 50px;
}
header.trasparent_nav nav ul li:first-child,
header.fixed_nav nav ul li:first-child{
margin-left: 0;
}
header.trasparent_nav nav ul li a,
header.fixed_nav nav ul li a{
text-decoration: none;
color: #454545;
font-family: 'open_regular', arial;
font-size: 16px;
}
header.trasparent_nav nav ul li a:hover,
header.fixed_nav nav ul li a:hover{
color: #e61c42;
}
header.fixed_nav nav ul li a{
font-size: 14px;
}
header.fixed_nav{
width: 100%;
height: 80px;
background-color: #ffffff;
border-bottom: 1px solid #f1f1f1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
margin-top: -81px;
}
/* Billboard */
.billboard{
width: 100%;
height: 750px;
overflow: hidden;
position: relative;
}
/* Call To Action Section */
.cta{
width: 1200px;
height: 90px;
margin: 0 auto;
position: relative;
}
.cta p{
display: inline-block;
font-family: 'open_regular', arial;
font-size: 20px;
margin: 35px 0 0 40px;
letter-spacing: 1px;
}
.cta a{
float: right;
padding: 17px 60px;
text-decoration: none;
font-family: 'open_regular', arial;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 20px 40px 0 0;
}
.cta_top{
background-color: rgba(255, 255, 255, .8);
margin-top: -90px;
}
.cta_top p{
color: #454545;
}
.cta_top a{
background: #e61c42;
color: #fff;
}
/* Services */
.services,
.testimonials{
padding: 100px 0;
background: #fbfbfb;
}
.services h2{
color: #606060;
font-family: 'open_semibold', arial;
font-size: 30px;
font-weight: bold;
text-align: center;
}
.services .separator{
text-align: center;
margin: 20px 0;
}
.services ul{
list-style: none;
margin-left: 80px;
overflow: hidden;
}
.services ul li{
float: left;
display: block;
width: 293px;
height: auto;
margin-left: 80px;
text-align: center;
}
.services ul li:first-child{
margin-left: 0;
}
.services ul li img.s_icons{
margin-bottom: 40px;
}
.services ul li h3{
color: #746969;
font-family: 'open_bold', arial;
font-size: 22px;
font-weight: bold;
margin-bottom: 20px;
}
.services ul li p{
color: #746969;
font-family: 'open_regular', arial;
font-size: 14px;
line-height: 22px;
}
/* Recent Work */
.recent_work{
width: 100%;
height: 350px;
background: #efeded;
overflow: hidden;
}
.recent_work .work{
display: block;
width: 20%;
height: 100%;
float: left;
}
/* Testimonials */
.testimonials{
height: auto;
padding-bottom: 100px;
}
.testimonials h3{
color: #616161;
font-family: 'open_bold', arial;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.testimonials ul.testi_boxs{
list-style: none;
overflow: hidden;
margin-top: 80px;
}
.testimonials ul.testi_boxs li{
float: left;
display: block;
width: 293px;
height: auto;
margin-left: 80px;
}
.testimonials ul.testi_boxs img.avatar{
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
margin-bottom: 20px;
}
.testimonials ul.testi_boxs h2{
color: #616161;
font-family: 'open_bold', arial;
font-size: 16px;
font-weight: bold;
letter-spacing: .5px;
}
.testimonials ul.testi_boxs h2 span{
color: #756a6a;
font-family: 'open_regular', arial;
font-weight: normal;
font-size: 12px;
}
.testimonials ul.testi_boxs p{
color: #747474;
font-family: 'open_regular', arial;
font-size: 14px;
line-height: 22px;
margin-top: 20px;
}
/* Clients */
.clients{
width: 100%;
height: 120px;
background: #f2f1f1;
}
.clients ul{
list-style: none;
}
.clients ul li{
display: block;
float: left;
margin-left: 120px;
}
.clients ul li a img{
margin-top: 45px;
display: inline-block;
}
.clients ul li:first-child{
margin-left: 42px;
}
/* Footer */
footer{
width: 100%;
height: 500px;
background: #353535;
overflow: hidden;
padding-bottom: 20px;
}
footer .cta_footer{
background-color: #434343;
}
footer .cta_footer p{
color: #ffffff;
}
footer .cta_footer a{
background: #e61c42;
color: #fff;
}
footer .footer_widget{
overflow: hidden;
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px #434343 solid;
}
footer .f_cols{
display: block;
width: 270px;
height: auto;
float: left;
margin:100px 40px 0 0;
}
footer .f_cols:last-child{
margin-right: 0;
}
footer .f_cols h3{
color: #fff;
font-family: 'open_regular', arial;
font-size: 20px;
font-weight: normal;
margin-bottom: 40px;
letter-spacing: 1px;
}
footer .f_cols p{
font-family: 'open_regular', arial;
font-size: 14px;
line-height: 26px;
letter-spacing: 1px;
color: #ffffff;
margin-bottom: 20px;
}
footer .f_cols span.phone{
display: block;
font-family: 'open_bold', arial;
font-weight: bold;
color: #ffffff;
}
footer .f_cols ul.sm{
list-style: none;
overflow: hidden;
}
footer .f_cols ul.sm li{
float: left;
margin-left: 10px;
}
footer .f_cols ul.sm li:first-child{
margin-left: 0;
}
footer .f_cols ul.sm li a{
display: block;
width: 25px;
height: 25px;
background: url('../img/social.png') no-repeat;
}
footer .f_cols ul.sm li a.fb{
background-position: 0 0;
}
footer .f_cols ul.sm li a.twitter{
background-position: -26px 0;
}
footer .f_cols ul.sm li a.dribbble{
background-position: -52px 0;
}
footer .f_cols ul.sm li a:hover{
background: url('../img/social_hover.png') no-repeat;
}
footer .f_cols ul.sm li a.fb:hover{
background-position: 0 0;
}
footer .f_cols ul.sm li a.twitter:hover{
background-position: -26px 0;
}
footer .f_cols ul.sm li a.dribbble:hover{
background-position: -52px 0;
}
footer .f_cols a{
display: inline-block;
font-family: 'open_regular', arial;
color: #ffffff;
}
footer .f_cols a:hover{
color: #ffffff;
}
footer .f_cols ul li{
list-style: none;
margin-bottom: 15px;
}
footer .f_cols ul li a{
text-decoration: none;
color: #ffffff;
font-family: 'open_regular', arial;
font-family: 14px;
}
footer .f_cols ul li a:hover{
color: #e61c42;
}
p.rights{
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #fff;
font-family: 'open_regular', arial;
font-size: 13px;
letter-spacing: 1px;
}
p.rights a{
font-family: 'open_bold', arial;
font-weight: bold;
}
Nhận xét
Đăng nhận xét