HTML+CSS页面练习——legend第五部分

第五部分——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;
            width: 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;
        }