样式表css代码
nav{
background:transparent;
height:50px;
}
h1
{
padding:12px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
h2
{
font-size:30px;
}
h3
{
font-size:24px;
}
#banner{
background:transparent;
height:700px;}
header
{
background:rgba(0,0,0,0.4);
}
ul
{
margin:0;
}
nav ul{
list-style:none;
margin:0;
float:right;
}
nav ul li,nav logo{
line-height:50px;
display:inline-block;
margin-right:20px;
}
nav ul li a {
line-height:50px;
text-decoration:none;
display:inline-block;
height:50px;
color:#fff;
}
div.logo{
float:left;
padding:10px;
}
div.logo a{
text-decoration:none;
}
#banner .inner
{
max-width:300px;
text-align:center;
margin:0 auto;
position:relative;
top:160px;
}
#banner .inner h1{
margin:0;
}
button{
border:none;
background:#333;
color:#eee;
padding:10px;
}
#banner button{padding:14px 60px;}
.sub-heading{
line-height:30px;
margin:30px;}
#banner .inner .more{
margin-top:220px;}
.logo{
font-size:20px;
font-weight:700;
letter-spacing:1px;
}
.logo a{
color:#fff;
}
.green-section{
text-align:center;
background:#089db0;
color:#fff;
padding:100px 0;
}
.wrapper{
width:680px;
margin:0 auto;
}
.hr{
height:2px;
width:100%;
/* background:#; */
margin:20px auto;
}
.green-section .hr{
background:#078494;
width:60%;
}
p.sub-heading{
font-size:18px;}
.green-section .icon-group .icon
{display:inline-block;
width:80px;
height:80px;
background:#086D79;
transform:rotate(45deg);
border:1px solid #000;
margin:20px;
}
.green-section .icon-group
{
margin-top:60px;
}
.gray-section
{
background:#181C1D;
color:#747777;
}
.gray-section .img-section
{
width: 45%;
}
.img-section img
{
width: 100%;
}
.gray-section .text-section
{
width: 55%;
}
.article-preview > div
{
float: left;
font-size: 0;
}
.article-preview:nth-child(odd)
{
background-color:rgba(255,255,255,0.05);
}
.article-preview:after
{
content: '';
display: block;
clear: both;
}
.text-section h2
{
margin-bottom:20px;
font-size:30px;
}
.text-section p
{
font-size:18px;
letter-spacing:1px;
}
.text-section .sub-heading
{
font-size:22px;
margin-top:0;
}
.text-section
{
position:relative;
top:68px;
left:50px;
}
.text-section > *
{
max-width:90%;
}
.purple-section
{
padding:80px;
background:#3f3965;
color:#fff;
}
.purple-section .heading-wrapper
{
text-align:center;
}
.purple-section .hr
{
background:#373259;
width:60%;
}
.card
{
float:left;
width:50%;
min-height:300px;
padding:50px;
box-sizing:border-box;
/* border:1px solid white; */
}
.card:first-child
{
background:rgba(0,0,0,0.05);
}
.card:nth-child(2)
{
background:rgba(0,0,0,0.09);
}
.card:nth-child(3)
{
background:rgba(0,0,0,0.13);
}
.card:nth-child(4)
{
background:rgba(0,0,0,0.17);
}
.card:nth-child(5)
{
background:rgba(0,0,0,0.23);
}
.card:nth-child(6)
{
background:rgba(0,0,0,0.27);
}
.card padding
{
font-size:18px;
letter-spacing:1px;
}
.clearfix:after
{
content: '';
display: block;
clear: both;
}
footer
{
background:#333;
color:#fff;
min-height:200px;
text-align:center;
padding-top:80px;
}
ul .share-group
{
display:block;
width:1080px;
margin:0 auto;
/* padding-top:80px; */
}
.share-group li
{
display:inline-block;
padding:10px;
}
.copy
{
padding:60px;
}
.main-wrapper
{
background: url(../img/banner.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
}
