第五部分——Service
简要介绍:
页面效果:
HTML代码:
<section id="services">
<div class="container">
<div class="align"><i class="icon-cog-circled"></i></div>
<h1>Services</h1>
<div class="row">
<div class="span3">
<div class="align"><i class="icon-desktop sev_icon"></i></div>
<h2>Web design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="span3">
<div class="align"><i class="icon-vector sev_icon"></i></div>
<h2>Print Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="span3">
<div class="align"><i class="icon-basket sev_icon"></i></div>
<h2>Ecommerce</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="span3">
<div class="align"><i class="icon-mobile-1 sev_icon"></i></div>
<h2>Marketing</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</section>
CSS代码:
#services{
padding: 50px 70px;
margin-top:0px;
margin-bottom: 50px;
}
#services .span3{
background:#e9e9e9;
padding: 3px 0 15px 10px;
transition: all 0.3s ease-in-out;
22%;
display: inline-block;
margin: 9px;
}
#services .span3:hover{
background: #e3e3e3;
box-shadow: 1px 1px 6px #c1bac1;
}
#services h1{
font-size: 3em;
margin:0em 0 0.7em 0;
font-family: 'Patua One',cursive;
text-align: center;
}
#services h2{
font-size: 22px;
font-family: 'Patua One',cursive;
font-weight: lighter;
margin: 0;
padding: 0;
text-align: center;
}
#services p{
margin: 10px;
float: left;
line-height: 25px;
}
#services .align{
font-size: 6em;
text-align: center;
padding: 0;
}
#services .align .sev_icon{
text-align: center;
margin: 10px 0 20px 0;
font-size: 0.6em;
color: #F0BF00;
}