Roof Houses 静态网页仿写代码-CSDN博客

CLASS

*{
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    list-style: none;
    text-decoration: none;
}
body::-webkit-scrollbar{
    width: 5px;
    height: 0;
    background-color: #30c39e;
}
body::-webkit-scrollbar-button{
    width: 0;
    height: 0;
}
body::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,0.5);
}
#nav{
    width: 100%;
    height: 83px;
    z-index: 999;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    padding:26px;
    box-sizing: border-box;
}
#nav>.logo_nav{
    float: left;
    height: 31px;
    line-height: 31px;
    color: #30c39e;
    font-size: 37px;
}
#nav>.list_nav{
    height: 31px;
    float: right;
}
#nav>.list_nav>li{
    margin-left: 47px;
    text-align: center;
    line-height: 31px;
    display: inline-block;
    color: #fff;
    font-size: 16px;
}
#nav>.list_nav>li:hover{
    cursor: pointer;
    color: #30c39e;
    border-bottom:2px solid#30c39e;
}

#content_1,.content_2,.content_3{
    position: relative;
}

#content_1>.select_button{
    width: 30px;
    height: 30px;
    background:transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    outline: 1px solid red;
    margin: auto;
}
#content_1>.left_select{
    left: 100px;
}

#content_1>.right_select{
    right: 100px;
}
#content_1>.text_body{
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto;
    height: 150px;
    left: 205px;
}
#content_1>.text_body>span{
    color: #fff;
    display: block;
    padding: 5px;
}
#content_1>.text_body>span:nth-of-type(1){
    font-size: 60px;
}
#content_1>.text_body>span:nth-of-type(2){
    font-size: 18px;
}

#content_2{
    padding:24px 0px;
}
#content_2>div{
    display: inline-block;
    padding: 48px 15px;
}
#content_2 .content_2_body{
    width: 540px;
    display: inline-block;
    padding: 15px;
    vertical-align: top;
    /* 解决两个盒子锤子方向不对齐的问题 */
}

#content_2 .content_2_body>p{
    padding: 35px 0;
    position: relative;
}


#content_2 .content_2_body>p>span:nth-of-type(1){
    font-size: 70px;
    margin: 0 15px;
    color: #c3c3c3;
    font-weight: bolder;
    position: relative;
}


#content_2 .content_2_body>p>span:nth-of-type(2){
    font-size: 30px;
    color: #f85a40;
    font-weight: bolder;
    position: absolute;
    left: 0;
    top: 0;
    height: 53px;
    line-height: 53px;
    bottom: 0;
    margin: auto;
}

#content_2 .content_2_body>span{
    letter-spacing: 1px;
    color: #999;
    font-size: 16px;
}

#content_2 .content_2_body>button{
    display: block;
    padding: 6px 12px;
    border-radius: 3.5px;
    background-color: #0ca2cf;
    color: #fff;
    font-size: 14px;
    margin-top: 15px;
    cursor: pointer;
    border: 2px solid #0ca2cf;
}
#content_2 .content_2_body>button:hover{
    background-color: #fff;
    border: 2px solid #0ca2cf;
    color: #0ca2cf;
}
#content_3{
    padding: 48px 0;
}
#content_3>div{
    padding: 48px 15px;
    display: inline-block;
}
#content_3 .content_3_title{
    position: relative;
}

#content_3 .content_3_title>span:nth-of-type(1){
    font-size: 70px;
    color: #c3c3c3;
    font-weight: bolder;
    position: relative;
}

#content_3 .content_3_title>span:nth-of-type(2){
    position: absolute;
    height: 30px;
    line-height: 30px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: red;
    font-weight: bolder;
    font-size: 30px;
    margin: auto;
    letter-spacing: 1px;
}
#content_3 .content_3_body>li{
    float: left;
    padding: 20px 15px;

}

#content_3 .content_3_body>li>div:nth-of-type(1){
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #30c39e;
    border-radius: 50%;
    vertical-align: top;
    line-height: 60px;
    text-align: center;
}
#content_3 .content_3_body>li>div:nth-of-type(2){
    display: inline-block;
    width: 255px;
    padding: 0 15px;
}

#content_3 .content_3_body>li>div:nth-of-type(2)>span:nth-of-type(1){
    display: block;
    text-align: left;
    font-size: 18px;
    font-weight: bolder;
    color: #000;
    margin-bottom: 8px;
}

#content_3 .content_3_body>li>div:nth-of-type(2)>span:nth-of-type(2){
    display: block;
    font-size: 14px;
    color: #676767;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-align: left;
}
#content_3 .content_3_body>li>div:nth-of-type(2)>button{
    padding: 7.500px;
    margin-top: 5px;
    float: left;
    color:red;
    font-size: 15px;
    letter-spacing: 1.5px;
    background: transparent;
}
#content_3 .iconfont{
    border-radius: 50%;
    font-size: 25px;
    /* width: 60px;
    height: 60px; */
    color: #fff;
    background-color: #30c39e;
}

#content_3 .content_3_body>li:hover .iconfont{
    background-color: #30c39e;
    color: #000;
}
#content_4{
    padding: 150px 0px;
    background-color:rgba(0, 0, 0, 0.28);
}
#content_4>p:nth-of-type(1){
    font-size: 45px;
    color: #f85a40;
}

#content_4>p:nth-of-type(2){
    font-size: 19px;
    letter-spacing: 1px;
    color: #FFF;
    margin:20px 0px;
}

#content_4>button{
    padding: 6px 15px;
    font-size: 14px;
    background-color: #0ca2cf;
    border: 1px solid #0ca2cf;
    color: #fff;
    cursor: pointer;
    border-radius: 2.5px;
}

#content_4>button:hover{
    background-color: #fff;
    color: #0ca2cf;
}

#content_5 .content_5_title{
    position: relative;
}

#content_5 .content_5_title>span:nth-of-type(1){
    position: relative;
    font-size: 70px;
    color: #c3c3c3;
    font-weight: bolder;
}

#content_5 .content_5_title>span:nth-of-type(2){
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 30px;
line-height: 30px;
color: #f85a40;
font-size: 26px;
font-weight: bolder;
}

#content_5>ul>li{
    display: inline-block;
    width: 255px;
    margin: 25px;
}

#content_5>ul>li>img{
    width: 255px;
    height: 318.75px;
}
#content_5>ul>li>p:nth-of-type(1){
    color: #30c39e;
    font-size: 22.4px;
    font-family: 'Courier New', Courier, monospace;
    margin: 22.4px 0px 11px;
}


#content_5>ul>li>p:nth-of-type(2){
    color: #f85a40;
    font-size:15px;
    margin-bottom: 20px;
}

#content_5>ul>li>p:nth-of-type(3){
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 20px;
    font-size:16px;
}

#content_5>ul>li>ul{
    border-top: 1px solid #c3c3c3;
}



#content_5>ul>li>ul>li{
    width: 20px;
    height: 20px;
    margin:20px 5px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}

#content_5 .iconfont{
    font-size: 20px;
    color: #30c39e;
    background-color: transparent;
}

#content_6>.content_6_title{
    position: relative;
    /* outline: 1px solid red; */
}

#content_6>.content_6_title>span:nth-of-type(1){
    position: relative;
    font-size: 70px;
    color: #c3c3c3;
    font-weight: bolder;
    /* outline: 1px solid red; */
}

#content_6>.content_6_title>span:nth-of-type(2){
    position: absolute;
    left: 0;right: 0;
    top: 0;bottom: 0;
    font-weight: bolder;
    margin: auto;
    height: 40px;
    color:red;
    font-size:30px;
    line-height:40px;
    /* outline: 1px solid red; */
}

#content_6>ul:nth-of-type(1){
    /* outline: 1px solid red; */
    margin: 20px;
}
#content_6>ul:nth-of-type(1)>li{
    /* outline: 1px solid red; */
    padding:6px 15px;
    font-size: 13.5px;
    display: inline-block;
    cursor: pointer;
}

#content_6>ul:nth-of-type(1)>li:active{
    background-color: red;
    color: #FFF;
}


#content_6>ul:nth-of-type(1)>li:nth-of-type(1){
    background-color: red;
    color: #FFF;
}

#content_6>ul:nth-of-type(2)>li{
    display:inline-block;
    margin: 0.5%;

}

#content_6>ul:nth-of-type(2)>li>img{
    width: 372px;
    width: 316px;
    height: 207.89;
    cursor: pointer;
}

#content_7>.content_7_view{
    width: 570px;
    /* height: 200px; */
    display: inline-block;
    /* outline: 1px solid red; */
    vertical-align: top;
}

#content_7>.content_7_view:nth-of-type(1)>p{
    position: relative;
    /* outline: 1px solid red; */
}

#content_7>.content_7_view:nth-of-type(1)>p>span:nth-of-type(1){
    position: relative;
    font-size: 70px;
    color: #c3c3c3;
}

#content_7>.content_7_view:nth-of-type(1)>p>span:nth-of-type(2){
    position: absolute;
    left: 0;right: 0;
    bottom: 0;top: 0;
    margin: auto;height: 40px;
    line-height: 40px;color: red;
    font-size: 30px;
}

#content_7>.content_7_view:nth-of-type(1)>p:nth-of-type(2){
    font-size: 16px;
    color: #999;
    letter-spacing: 1px;
    text-align: left;
    margin-top: 35px;;
    margin-bottom: 15px;
}

#content_7>.content_7_view:nth-of-type(1)>button{
    padding:6px 15px;
    border: 2px solid #0ca2cf;
    border-radius: 3px;
    background-color: #0ca2cf;
    color: #FFF;
    cursor: pointer;
}

#content_7>.content_7_view:nth-of-type(1)>button:hover{
    background-color: #FFF;
    color: #000;
}

#content_7>.content_7_view:nth-of-type(2)>ul>li{
    display: inline-block;
    width: 255px;
    height: 110.188px;
    /* outline: 1px solid red; */
    margin:5px 7.5px;
}

#content_7>.content_7_view:nth-of-type(2) .iconfont{
    font-size: 25px;
    background-color: transparent;
    color: #30c39e;
}

#content_7>.content_7_view:nth-of-type(2)>ul>li>p:nth-of-type(1){
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    margin: 15px;
    letter-spacing: 2px;
}

#content_7>.content_7_view:nth-of-type(2)>ul>li>p:nth-of-type(2){
    font-size: 21px;
    height: 21px;
    line-height: 21px;
    color: #999;
}

#content_8>.content_8_title{
    position: relative;
    /* outline: 1px solid red; */
}

#content_8>.content_8_title>span:nth-of-type(1){
    position: relative;
    font-size: 70px;
    font-weight: bolder;
    color: #c3c3c3;
    /* outline: 1px solid red; */
}

#content_8>.content_8_title>span:nth-of-type(2){
    position: absolute;
    left: 0;right: 0;
    top: 0;bottom: 0;
    margin: auto;height: 30px;
    line-height: 30px;
    color: red;
    font-weight: bolder;
    letter-spacing: 2px;
    font-size: 30px;
    /* outline: 1px solid red; */
}

#content_8>ul>li{
    width: 350px;
    height: 300px;
    margin: 20px;
    /* outline: 1px solid red; */
    display: inline-block;
}

#content_8>ul:nth-of-type(1)>li:nth-of-type(1){
    background-image: url(./images/n1.jpg);
}

#content_8>ul:nth-of-type(1)>li:nth-of-type(2){
    background-image: url(./images/n2.jpg);
}

#content_8>ul:nth-of-type(1)>li:nth-of-type(3){
    background-image: url(./images/n3.jpg);
}

#content_8>ul:nth-of-type(2)>li:nth-of-type(1){
    background-image: url(./images/n4.jpg);
}

#content_8>ul:nth-of-type(2)>li:nth-of-type(2){
    background-image: url(./images/n5.jpg);
}

#content_8>ul:nth-of-type(2)>li:nth-of-type(3){
    background-image: url(./images/n6.jpg);
}


#content_8>ul>li{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#content_8>ul>li>div{
    visibility: hidden;
    padding: 30px;
    text-align: left;
    width: 100%;
    height: 100%;
    border: 5px solid #c3c3c3;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.5);
}


#content_8>ul>li:hover div{
    visibility: visible;
}

#content_8>ul>li>div>p:nth-of-type(1){
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 21px;
}

#content_8>ul>li>div>p:nth-of-type(2){
    font-size: 25px;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

#content_8>ul>li>div>p:nth-of-type(3){
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 25px;
    margin-bottom: 21px;
}

#content_8>ul>li>div>button{
    font-size: 14px;
    font-weight: bolder;
    letter-spacing: 2px;
    line-height: 25px;
    background-color: transparent;
    cursor: pointer;
}

#content_9{
    background: url(/images/contact.jpg) no-repeat center center;
    background-size: cover cover;
}

#content_9>.content_9_title{
    /* outline: 1px solid red; */
    position: relative;
}


#content_9>.content_9_title>span:nth-of-type(1){
    /* outline: 1px solid red; */
    position: relative;
    font-size: 70px;
    color: #999;
    font-weight: bolder;
}

#content_9>.content_9_title>span:nth-of-type(2){
    /* outline: 1px solid red; */
    left: 0;right: 0;
    top: 0;bottom: 0;
    margin: auto;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    color: black;
    font-weight: bolder;
    position: absolute;
    letter-spacing: 1.5px;
}


#content_9>div{
    display: inline-block;
    vertical-align: top;
    /* outline: 1px solid red; */
    vertical-align: top;
    padding: 48px;
    margin:15px;
    background-color: rgba(0, 0, 0, 0.6);
}

#content_9>div:nth-of-type(1){
    width: 254px;
}

#content_9>div:nth-of-type(2){
    width: 666px;
}
#content_9>div>p:nth-of-type(odd){
    color: #30c39e;
    font-size: 28px;
    text-align: left;
}

#content_9>div>p:nth-of-type(even){
    color: #fff;
    font-size: 15px;
    letter-spacing: 1.5px;
    line-height: 30px;
    text-align: left;
}

#content_9>div:nth-of-type(2)>form{
    /* outline: 1px solid red; */
}

#content_9>div:nth-of-type(1) ul{
    float: left;
}

#content_9>div:nth-of-type(1) ul li{
    display: inline-block;
    cursor: pointer;
    margin-top: 40px;
}

#content_9>div:nth-of-type(2)>form *{
    /* outline: 1px solid red; */
    display: block;
}


#content_9>div:nth-of-type(2)>form input,
#content_9>div:nth-of-type(2)>form textarea{
    resize: vertical;
    width: 100%;
    height: 38px;
    padding: 10px;
    font-size:16px ;
    box-sizing: border-box;
    border-radius: 3.5px;
    box-shadow: -1.5px -1.5px 2.5px #30c39e;
}

#content_9>div:nth-of-type(2)>form textarea{
    height: 100%;
}

#content_9>div:nth-of-type(2)>form span{
    color: #FFF;
    text-align: left;
    font-size: 16px;
    letter-spacing: 1px;
    margin: 10px 0px;
}


#content_9>div:nth-of-type(2)>form>label:nth-last-of-type(1)>input{
    width: 100px;
    text-align: center;
    height: 35px;
    float: left;
    font-size: 14px;
    background-color: #30c39e;
    color: #fff;
    letter-spacing: 2px;
    border-radius:2px;
    margin-top: 20px;

}
#content_9 .iconfont{
    background-color: transparent;
    color: #fff;
    font-size: 20px;
}

#content_5,
#content_6,
#content_7,
#content_8,
#content_9,
#content_10,
#content_11{
    padding: 50px 0px;
    /* outline: 1px solid red; */
}

#content_11{
/* background: #151515;; */
}
#content_11>.fankui{
    padding: 25px;
    /* outline: 1px solid red; */
    background-color: rgba(21, 21, 21, 0.8);
}
#content_11>.fankui>span{
    width: 100px;
    margin-right: 350px;
    display: inline-block;
    color: #30c39e;
    font-size: 40px;
    vertical-align: top;
}
#content_11>.fankui>form{
    display: inline-block;
    vertical-align: top;
}

#content_11>.fankui>form input{
    height: 24.500px;
    font-size: 15px;
    box-sizing: content-box;
    padding: 10px 20px;
    margin: 2px;
    background-color: #fff;
    text-align: center;
}

#content_11>.fankui>form input:nth-last-of-type(1){
    background: #30c39e;
    color: #FFF;
    letter-spacing: 1px;
    cursor: pointer;
    width: 150px;
}
#content_11>.Bottom{
    /* outline: 1px solid red; */
    background-color: rgb(21, 21, 21);
}

#content_11>.Bottom>ul{
    width: 1140px;
    padding: 100px;
    /* outline: 1px solid red; */
}

#content_11>.Bottom>ul>li{
    display: inline-block;
    vertical-align: top;
    width: 24.5%;
    /* outline: 1px solid red; */
}

#content_11>.Bottom>ul>li>p:nth-of-type(1){
    color: #fff;
    font-size: 23px;
    text-align:left;
    letter-spacing: 1px;
}

#content_11>.Bottom>ul>li>p:nth-of-type(2){
    color: #999;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    line-height: 25px;
    margin: 20px 0px;
}
#content_11>.Bottom>ul>li>p:nth-of-type(2)>span{
    display: block;
    /* margin: 10px 0px; */
}

#content_11>.Bottom>ul>li:nth-of-type(1) i{
    width: 25px;
    height: 25px;
    font-size:15px ;
    color: #c3c3c3;
    float: left;
    /* margin:20px 0px; */
}

#content_11>.Bottom>ul>li:nth-of-type(2) i{
    width: 25px;
    height: 25px;
    font-size:15px ;
    color: #c3c3c3;
    /* float: left; */
    margin:20px 0px;
}


#content_11{padding-bottom: 0px;
}
.Exit{
    text-align: left;
    font-size: 17px;
    padding: 20px 0px;
    letter-spacing: 1.5px;
    color: #676767;
    width: 1140px;
    border-top: 2px solid #c3c3c3;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3251609_kjf21esb52.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3252972_hlfmx5t7o86.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3253467_g5fn609uwbp.css">
    <title>Home</title>
</head>
<body>
    <!-- 导航 -->
    <div id="nav">
        <span class="logo_nav">Roof Houses</span>
        <ul class="list_nav">
            <li>HOME</li>
            <li>ABOUT</li>
            <li>SERVICES</li>
            <li>TEAM</li>
            <li>GALLERY</li>
            <li>STATS</li>
            <li>NEWS</li>
            <li>CONTACT</li>
        </ul>
    </div>
    <!-- 内容区1 -->
    <div id="content_1">
        <img width="100%" height="100%" src="/images/b1.jpg"/>
        <button class="left_select select_button"></button>
        <button class="right_select select_button"></button>
        <p class="text_body">
            <span>Modern Villas</span>
            <span>Lorem Ipsum is simply dummy text</span>
        </p>    
    </div>
    <!-- 内容区2 -->
    <div id="content_2" align="center">
        <div>
            <img src="./images/ab.jpg">
            <div class="content_2_body" align="left">
                <p>
                    <span>ABOUT</span>
                    <span>ABOUT US</span>
                </p>
                <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</span>
                <button>MORE INFO</button>
            </div>
        </div>
    </div>
    <!-- 内容区3 -->
    <div id="content_3" align="center">
        <div>
            <p class="content_3_title">
                <span>SERVICE</span>
                <span>SERVICE</span>
            </p>
            <ul class="content_3_body">
                <li>
                    <div>
                        <i class="iconfont icon-steam" aria-hidden="true"></i>
                    </div>
                    <div>
                        <span>MODERN HOUSES</span>
                        <span>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat egestas erat.</span>
                        <button>READ MORE »</button>
                    </div>
                </li>
                
                <li>
                    <div>
                        <i class="iconfont icon-rocket" aria-hidden="true"></i>
                    </div>
                    <div>
                        <span>MODERN HOUSES</span>
                        <span>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat egestas erat.</span>
                        <button>Read More »</button>
                    </div>
                </li>

                <li>
                    <div>
                        <i class="iconfont icon-paintbrush" aria-hidden="true"></i>
                    </div>
                    <div>
                        <span>MODERN HOUSES</span>
                        <span>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat egestas erat.</span>
                        <button>Read More »</button>
                    </div>
                </li>
            </ul>
            <ul class="content_3_body">
                <li>
                    <div>
                        <i class="iconfont icon-industry" aria-hidden="true"></i>
                    </div>
                    <div>
                        <span>MODERN HOUSES</span>
                        <span>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat egestas erat.</span>
                        <button>READ MORE »</button>
                    </div>
                </li>
                
                <li>
                    <div>
                        <i class="iconfont icon-fire" aria-hidden="true"></i>
                    </div>
                    <div>
                        <span>MODERN HOUSES</span>
                        <span>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat egestas erat.</span>
                        <button>Read More »</button>
                    </div>
                </li>

                <li>
                    <div>
                        <i class="iconfont icon-cogs" aria-hidden="true"></i>
                    </div>
                    <div>
                        <span>MODERN HOUSES</span>
                        <span>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat egestas erat.</span>
                        <button>Read More »</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容区4 -->
    <div id="content_4" align="center">
       <p>We Make Your Dreams As Real</p>
       <p>Contrary to popular belief, Lorem Ipsum is not simply random text</p>
       <button>MORE INFO</button>
    </div>
    <!-- 内容区5 -->
    <div id="content_5" align="center">
        <p class="content_5_title">
            <span>OUR TEAM</span>
            <span>TEAM</span>
        </p>
        <ul>
            <li>
                <img src="./images/t1.jpg">
                <p>Amanda Seylon</p>
                <p>Designer</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <ul>
                    <li>
                        <i class="iconfont icon-facebook-f"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-twitter"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-google-plus-g"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-linkedin-in"></i>
                    </li>
                </ul>
            </li>
            <li>
                <img src="./images/t2.jpg">
                <p>Amanda Seylon</p>
                <p>Designer</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <ul>
                    <li>
                        <i class="iconfont icon-facebook-f"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-twitter"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-google-plus-g"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-linkedin-in"></i>
                    </li>
                </ul>
            </li>
            <li>
                <img src="./images/t3.jpg">
                <p>Amanda Seylon</p>
                <p>Designer</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <ul>
                    <li>
                        <i class="iconfont icon-facebook-f"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-twitter"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-google-plus-g"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-linkedin-in"></i>
                    </li>
                </ul>
            </li>
            <li>
                <img src="./images/t4.jpg">
                <p>Amanda Seylon</p>
                <p>Designer</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <ul>
                    <li>
                        <i class="iconfont icon-facebook-f"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-twitter"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-google-plus-g"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-linkedin-in"></i>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- 内容区6 -->
    <div id="content_6" align="center">
        <p class="content_6_title">
            <span>GALLERY</span>
            <span>GALLERY</span>
        </p>
        <ul>
            <li>ALL</li>
            <li>INTERIOR</li>
            <li>VILLAS</li>
            <li>APARTMENTS</li>
            <li>PROPERTIES</li>
        </ul>
        <ul>
            <li><img src="/images/g1.jpg"></li>
            <li><img src="/images/g2.jpg"></li>
            <li><img src="/images/g3.jpg"></li>
            <li><img src="/images/g4.jpg"></li>
            <li><img src="/images/g5.jpg"></li>
            <li><img src="/images/g6.jpg"></li>
            <li><img src="/images/g7.jpg"></li>
            <li><img src="/images/g8.jpg"></li>
            <li><img src="/images/g9.jpg"></li>
            <li><img src="/images/g10.jpg"></li>
            <li><img src="/images/g11.jpg"></li>
            <li><img src="/images/g12.jpg"></li>
        </ul>
    </div>
    <!-- <内容区7 -->
    <div id="content_7" align="center">
        <div class="content_7_view" align="left">
            <p>
                <span>STATS</span>
                <span>OUR STATS</span>
            </p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
            <button>MORE INFO</button>
        </div>
        <div class="content_7_view">
            <ul>
                <li>
                    <i class="iconfont icon-home"></i>
                    <p>2601</p>
                    <p>Properties</p>
                </li>
                <li>
                    <i class="iconfont icon-smile"></i>
                    <p>653</p>
                    <p>Happy Customers</p>
                </li>
                <li>
                    <i class="iconfont icon-yonghu"></i>
                    <p>1024</p>
                    <p>Professional Agents</p>
                </li>
                <li>
                    <i class="iconfont icon-spinner"></i>
                    <p>2355</p>
                    <p>Success Stories</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容区8 -->
    <div id="content_8" align="center">
        <p class="content_8_title">
            <span>NEWS</span>
            <span>LATEST NEWS</span>
        </p>
        <ul>
            <li>
                <div>
                    <p>On Jan 20th, 2021</p>
                    <p>Office Design</p>
                    <p>Vestibulum ut tincidunt lectus, vitae faucibus felis. Vivam uspretium leo eu iaculis lobortis.</p>
                    <button>Read more</button>
                </div>
            </li>
            <li>
                <div>
                    <p>On Jan 20th, 2021</p>
                    <p>Office Design</p>
                    <p>Vestibulum ut tincidunt lectus, vitae faucibus felis. Vivam uspretium leo eu iaculis lobortis.</p>
                    <button>Read more</button>
                </div>
            </li>
            <li>
                <div>
                    <p>On Jan 20th, 2021</p>
                    <p>Office Design</p>
                    <p>Vestibulum ut tincidunt lectus, vitae faucibus felis. Vivam uspretium leo eu iaculis lobortis.</p>
                    <button>Read more</button>
                </div>
            </li>
        </ul>
        <ul>
            <li>
                <div>
                    <p>On Jan 20th, 2021</p>
                    <p>Office Design</p>
                    <p>Vestibulum ut tincidunt lectus, vitae faucibus felis. Vivam uspretium leo eu iaculis lobortis.</p>
                    <button>Read more</button>
                </div>
            </li>
            <li>
                <div>
                    <p>On Jan 20th, 2021</p>
                    <p>Office Design</p>
                    <p>Vestibulum ut tincidunt lectus, vitae faucibus felis. Vivam uspretium leo eu iaculis lobortis.</p>
                    <button>Read more</button>
                </div>
            </li>
            <li>
                <div>
                    <p>On Jan 20th, 2021</p>
                    <p>Office Design</p>
                    <p>Vestibulum ut tincidunt lectus, vitae faucibus felis. Vivam uspretium leo eu iaculis lobortis.</p>
                    <button>Read more</button>
                </div>
            </li>
        </ul>
    </div>
    <!-- 内容区9 -->
    <div id="content_9" align="center">
        <p class="content_9_title">
            <span>CONTACT US</span>
            <span>CONTACT</span>
        </p>
        <div>
            <p>About Us</p>
            <p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Sed Tortor Est, Malesuada At Nulla In.</p>
            <p>Find Us</p>
            <p>
                <span>1608 US-19, Ellaville, USA</span>
                <span>(012) 345 6789</span>
                <span>Info@Example.Com</span>
            </p>
            <ul>
                <li>
                    <i class="iconfont icon-facebook-f"></i>
                </li>
                <li>
                    <i class="iconfont icon-twitter"></i>
                </li>
                <li>
                    <i class="iconfont icon-google-plus-g"></i>
                </li>
                <li>
                    <i class="iconfont icon-linkedin-in"></i>
                </li>
            </ul>
        </div>
        <div>
            <p>Write To Us</p>
            <form action="">
                <label for=""></label>
                <label>
                    <span>Name</span>
                    <input placeholder="First name"/>
                </label>
                <label>
                    <span>Email address</span>
                    <input placeholder="Email"/>
                </label>
                <label>
                    <span>Example textarea</span>
                    <!-- <input/> -->
                    <textarea></textarea>
                </label>
                <label>
                    <input type="submit" value="Submit"/>
                </label>
            </form>
        </div>
    </div>
    <!-- 内容区10 -->
    <div id="content_10" align="center">

    </div>
    <!-- 内容区11 -->
    <div id="content_11" align="center">
        <div class="fankui">
            <span>Newsletter</span>
            <form method="post">
                <input placeholder="Name" type="text" required/>
                <input placeholder="Email" type="email" required/>
                <input type="submit" value="Subscribe"/>
            </form>
        </div>
        <div class="Bottom">
        <ul>
            <li>
                <p>About Us</p>
                <p>Curabitur non nulla sit amet nislinit tempus convallis quis ac lectus.Nulla porttitor accumsana tincidunt.</p>
         
                    <i class="iconfont icon-facebook-f"></i>
                    <i class="iconfont icon-twitter"></i>
                    <i class="iconfont icon-google-plus-g"></i>
                    <i class="iconfont icon-linkedin-in"></i>

            </li>
            <li>
                <p>Contact</p>
                <p>
                    <span>
                        <i class="iconfont icon-facebook-f"></i>0926k 4th block building, king Avenue, New York City.
                    </span>
                    <span>
                        <i class="iconfont icon-facebook-f"></i>0926k 4th block building, king Avenue, New York City.
                    </span>
                    <span>
                        <i class="iconfont icon-facebook-f"></i>0926k 4th block building, king Avenue, New York City.
                    </span>
                </p>
            </li>
            <li>
                <p>Navigation</p>
                <p>
                    <span>Home</span>
                    <span>About</span>
                    <span>Services</span>
                    <span>Team</span>
                    <span>Gallery</span>
                    <span>news</span>
                    <span>contact</span>
                </p>
            </li>
            <li>
                <p>Latest news</p>
                <p>
                    <img src="images/g1.jpg" width="100" height="60" alt="">
                    <img src="images/g1.jpg" width="100" height="60"  alt="">
                    <img src="images/g1.jpg" width="100" height="60"  alt="">
                    <img src="images/g1.jpg" width="100" height="60"  alt="">
                    <img src="images/g1.jpg" width="100" height="60"  alt="">
                    <img src="images/g1.jpg" width="100" height="60"  alt="">
                </p>
            </li>
        </ul>
        <p class="Exit">Copyright © 2021.Company Name All Rights Reserved.
            <a href="#">网页模板</a>
        </p>
        </div>
    </div>
</body>
</html>