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

第八部分——Team

简要介绍：

本部分有一个不一样的地方：图片是圆形的。通过设置<img>的border-radius属性为50%，来达到此效果。

页面效果：

HTML代码：

<section id="team"> 
        <div class="container">
            <div class="align">
                <i class="icon-group-circled"></i>
            </div>
            <h1>Meet the team</h1>
            <div class="row">
                <div class="span2">
                    <div class="teamalign"><img  class="team-thumb img-circle" src="img/portrait-1.jpg" alt=""/></div>
                    <h3>Andrew</h3>
                    <div class="job-position">web designer</div>
                </div>
                <div class="span2">
                  <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-2.jpg" alt=""> </div>
                  <h3>Stephen</h3>
                  <div class="job-position">web developer</div>
                </div>
                <div class="span2">
                  <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-3.jpg" alt=""> </div>
                  <h3>Maria</h3>
                  <div class="job-position">graphic designer</div>
                </div>
                <div class="span2">
                  <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-4.jpg" alt=""> </div>
                  <h3>John</h3>
                  <div class="job-position">project manager</div>
                </div>
                <div class="span2">
                  <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-2.jpg" alt=""> </div>
                  <h3>Ashton</h3>
                  <div class="job-position">real owner</div>
                </div>
            </div>
            <div class="row">
                <div class="featurette">
                    <h2>Want to know more? <span>| a little about us</span></h2>
                    <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
                    <p>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
                    <p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
                </div>
            </div>
        </div>
    </section>

CSS代码：

 Team And Contact部分的CSS代码：

       #team,#contact{
            color: #e4e5e2;
            background: #312a1e;
            padding:4.75em 85px 0px;
        }
        #team .align,#contact .align{
            font-size:6em;
            text-align: center;
        }
        #team h1,#contact h1{
            font-size: 3em;
            margin: 0.5em 0 1em;
            text-align: center;
            font-family: 'Patua One',cursive;
        }

Contact部分的CSS代码：

       #team{
            padding-bottom: 100px;
        }
        #team .span2{
             19%;
            display: inline-block;
            margin: 0;
            padding: 0;
        }
        #team .teamalign{
            text-align: center;
        }
        #team img{
            border-radius: 50%;
            margin-top: 26px;
        }
        #team h2{
            text-align: center;
            font-family: 'Patua One',cursive;
            font-size: 27px;
            font-weight: lighter;
            margin-bottom: 30px;
        }
        #team h3{
            font-size: 26px;
            margin: 24px 0 0;
            text-align: center;
            font-family: 'Patua One',cursive;
        }
        #team .job-position{
            text-align: center;
            font-family: 'Open Sans',sans-serif;
        }
        #team .featurette{
            margin-top:120px; 
            text-align: center;
            font-size: 21px;
        }
        #team h2 span{
            color: #a5a5a2;
            font-family: 'Quattrocento',serif;
        }
        #team p{
            text-align: center;
            margin:30px 40px;
            line-height: 30px;
        }