ife-task0002-4

<div class="party">
        <ul class="content">
            <li class="album-1" style="margin-right: 40px;">
                <div class="imgWrap">   
                    <img src="img/album_1.jpg">                    
                </div>
                <p class="title">北京活动</p>
                <p class="topic">新社区大联盟</p>
            </li>
<li class="album-2" style="margin-right: 40px;">
                <p class="title">上海活动</p>
                <p class="topic">夜上海新景观探索</p>
                <div class="imgWrap">
                    <img src="img/album_2.jpg">
                </div>
            </li>

            <li class="album-3" style="margin-right: 40px;">
                <div class="imgWrap">
                    <img src="img/album_3.jpg">
                </div>
                <p class="title">深圳活动</p>
                <p class="topic">全新海岸线观点站</p>
            </li>
<li class="album-4">
                <div class="imgWrap">
                    <img src="img/album_4.jpg">
                </div>
                <p class="title">香港活动</p>
                <p class="topic">奢侈消费大派送</p>
            </li>
        </ul>
    </div>
    <div class="newWorld">
        <div class="wrap">
            <div class="title">
               <h2>新世界</h2>
                <h1>TIME</h1>
                <p class="addr">@新世界 - 北京</p>
                <p class="date"> 2016.04.01</p> 
            </div>
        </div>
<div class="intro">
            <div class="details">
                <h3>新世界/<i>01</i></h3>
                <p>新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
                <a href="#">更多详情</a>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

.party {
    width: 100%;
    height: 605px;
    background: #F7F7F7;
    text-align: center;
      .content {
        width: 1030px;
        height: 420px;
        margin-top: 105px;
        display: inline-block;
        li{
width: 218px;
            display: inline-block;
            text-align: center;
            .imgWrap {
                width: 218px;
                height: 340px;
                background: white;
                img {
                    margin-top: 14px;
                }
            }
            .title {
                font-weight: bolder;
                margin:14px 0 ;
            }
            .topic {
                font-size: 12px;
                color: #C5BFBF;
                 margin:6px 0 ;
            }  
 }
    }    
}

.newWorld {
    .wrap {
        width: 940px;
        height: 564px;
        background: url(../img/info1_bac.jpg) no-repeat;
        background-size: 100% 100%;
        float: left;
        text-align: center;
        font-family: 微软雅黑;
        .title {
            color: white;
             margin: 0 auto;
             h2 {
                font-size: 64px;
                margin-top: 135px;
 }
             h1 {
                font-size: 185px;
                font-weight: bolder;
                margin-top: -30px;
             }
             p {
                font-weight: bolder;
             }
        }
    }
    .intro {
        float: right;
        height: 564px;
        /* text-align: center; */
        .details{
            width: 290px;
            margin: 0 auto;
            }
        }
}