码迷，mamicode.com
首页 > 其他好文 > 详细

仿页面 菜鸟作品

时间：2018-06-18 22:42:36      阅读：192      评论：0      收藏：0      [点我收藏+]

标签：info   oct   relative   member   utf-8   number   导航   foo   type   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CROWEDEM</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/CROWDEM.css">
</head>
<body>
<!--导航-->
<header>
    <nav>
        <div class="navigation1">
            <img src="../images/RoundedRectangle13copy2.png" alt="">
            <img src="../images/english_0001s_0000s_0004_Crowdme.png" alt="">
        </div>
        <div class="navigation2">
            <a href="#">HOME</a>
            <a href="#">HOW IT WPRKS</a>
            <a href="#">DISCOVER A PROJECT</a>
            <a href="#">BLOG</a>
            <a href="#">FIND OUT MORE</a>
        </div>
        <div class="navigation3">
            <a href="#">LOGIN</a>
        </div>
    </nav>
</header>
<!--/*第一块背景*/-->
<div class="imgOne">
    <img class="imgOne1" src="../images/Overlay.png" alt="">
    <div class="text">
        <p class="text1">Intellectual Property has the Shelf Life</p>
        <p class="text2">of a Banana.</p>
        <img class="imgOne2" src="../images/BecomeaMember.png" alt="">
    </div>
</div>
<!--第二块-->
<div class="imgTwo">
    <img src="../images/english_0003s_0004s_0000_Shape-846.png" alt="">
    <p class="text3">OUR WORK IS THE PRESENTATION </p>
    <p class="text4"> OF OUR CAPABILITIES.</p>
    <p class="text5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam autem corporis
        debitis non nulla perferendis qui tenetur. A ad amet cupiditate dignissimos iure,
        minus nobis nostrum numquam, sint voluptates voluptatum.</p>
    <p class="text6">olor sit amet, consectetur adipisicing elit. Aliquam autem corporis
        debitis non nulla perferendis qui tenetur. A ad amet cupiditate dignissimos iure,
        minus nobis nostrum numquam, sint voluptates voluptatum.</p>
</div>
<!--第三块-->
<div class="simple">
    <div class="simple1">
        <p>
            <span class="number">1</span> <span class="text7">Simple</span>
        </p>
        <p>
            <span class="number">2</span> <span class="text7">Transparent</span>
        </p>
        <p>
            <span class="number">3</span> <span class="text7">Collaborative</span>
        </p>
    </div>
    <div class="simple2">
        <img src="../images/english_0003s_0003s_0000s_0000_glasses.png" alt="">
        <div class="simple3">
            <p class="text8">Browse projects,like booking a hotel online !</p>
            <p class="text9">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam autem corporis
                debitis non nulla perferendis qui tenetur. A ad amet cupiditate dignissimos iure,
                minus nobis nostrum numquam, sint voluptates voluptatum.</p>
        </div>
    </div>
</div>
<!--第四块-->
<div class="fiand">
    <div class="fiand1">
        <div class="fiand1_1">
            <img src="../images/english_0003s_0002s_0001s_0002_Vector-Smart-Object.png" alt="">
        </div>
        <div class="fiand1_2">
            <!--标题-->
            <p class="headline">Find Properties</p>
            <p class="content1">Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
                tenetur.</p>
            <button>
                Become A Member
            </button>
        </div>
    </div>
    <div class="fiand2">
        <div class="fiand1_1">
            <img src="../images/english_0003s_0002s_0000s_0000_Vector-Smart-Object.png" alt="">
        </div>
        <div class="fiand1_2">
            <p class="headline">Find Buyers</p>
            <p class="content1">Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
                tenetur.</p>
            <button>
                Submit Your Project
            </button>
        </div>
    </div>
</div>
<!--第五块-->
<section class="featured">
    <div class="featured1">
        <div>
            <h1>Featured Projecs</h1>
            <p>Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
                tenetur.Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
                tenetur.</p>
        </div>
        <div>
            <button>
                Become A Member
            </button>
        </div>
    </div>
    <div class="featured2">
        <div class="featured2_1">
            <img class="image_1" src="../images/NEW_1.png" alt="">
            <div class="featured2_2">
                <h2>Ontario Tower, LONDON</h2>
                <p class="character1">Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
                    tenetur.</p>
                <img class="image_2" src="../images/RoundedRectangle8copy.png" alt="">
                <p class="character"><span>10% Funded</span><span>8 Days Left</span></p>
                <div class="character2">
                    <span>See Project Details</span>
                    <img class="image_3" src="../images/english_0003s_0001s_0001s_0002s_0001_Shape-646-copy-3.png"
                         alt="">
                </div>
            </div>
        </div>
        <div class="featured2_1">
            <img class="image_1" src="../images/NEW1.png" alt="">
            <div class="featured2_2">
                <h2>Ontario Tower, LONDON</h2>
                <p class="character1">Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
                    tenetur.</p>
                <img class="image_2" src="../images/RoundedRectangle8copy1.png" alt="">
                <p class="character"><span>10% Funded</span><span>8 Days Left</span></p>
                <div class="character2">
                    <span>See Project Details</span>
                    <img src="../images/english_0003s_0001s_0001s_0002s_0001_Shape-646-copy-3.png" alt="">
                </div>
            </div>
        </div>
        <div class="featured2_1">
            <img src="../images/NEW_1.png" alt="">
            <div class="featured2_2">
                <h2>Ontario Tower, LONDON</h2>
                <p class="character1">Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
                    tenetur.</p>
                <img class="image_2" src="../images/RoundedRectangle8copy.png" alt="">
                <p class="character"><span>10% Funded</span><span>8 Days Left</span></p>
                <div class="character2">
                    <span>See Project Details</span>
                    <img class="image_3" src="../images/english_0003s_0001s_0001s_0002s_0001_Shape-646-copy-3.png"
                         alt="">
                </div>
            </div>
        </div>
    </div>
</section>
<!--第六块-->
<div class="part">
    <img src="../images/bg.png" alt="">
    <h1>Be Part of a Growing International Community</h1>
    <div class="part1">
        <p>Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
            tenetur.Lorem ipsum dolor sit amet, consectetur elit. Aliquam autem corporis
            tenetur.
        </p>
        <div class="part1_1">
            <div class="part1_2">
                <img src="../images/OneoftheBest.png" alt="">
                <div class="part1_3">
                    <img src="../images/english_0003s_0000s_0001s_0003_Layer-23.png" alt="">
                    <span>David Beckham</span>
                </div>
            </div>
            <div class="part2">
                <img src="../images/ExellentService.png" alt="">
                <div class="part2_1">
                    <img src="../images/english_0003s_0000s_0000s_0003_Layer-24.png" alt="">
                    <span>David Beckham</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--倒数第二-->
<div class="yahoo">
    <img src="../images/Layer25.png" alt="">
</div>
  <!--页脚-->
<footer>
    <img src="../images/english_0004s_0001_Copyright-?-2001---2014--Cssauthor.com.png" alt="">
</footer>
</body>
</html>
a {
    text-decoration: none;
}

button {
    outline: none;
}

body {
    text-align: center;
    margin: 0 auto;
    width: 1300px;
}

/*导航*/
nav {
    height: 85px;
    display: flex;
    margin-left: 135px;
    margin-right: 140px;
    justify-content: space-between;
    line-height: 85px;
}

.navigation1 img:first-child {
    width: 33px;
    padding-right: 10px;
}

.navigation1 img:last-child {
    width: 168px;
}

.navigation2 a {
    padding-right: 30px;
    color: #a7a7a7;
}

nav a {
    color: #a7a7a7;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    margin-top: 22px;
    font-size: 12px;
}

.navigation3 a {
    color: #f5f5f5;
    border: 1px solid #bcda5d;
    background-color: #bcda5d;
    border-radius: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

/*第一块背景*/
.imgOne1 {
    width: 1300px;
    position: relative;
}

.text {
    position: absolute;
    top: 240px;
    left: 428px;
    color: #ffffff;
}

.text1 {
    font-size: 46px;
}

.text2 {
    font-size: 26px;
    padding-top: 25px;
    padding-bottom: 60px;
}

/*<!--第二块-->*/
.imgTwo img {
    width: 58px;
    padding-top: 100px;
    padding-bottom: 50px;
}

.text3, .text4 {
    font-size: 20px;
}

.text5, .text6 {
    font-size: 14px;
    color: #b2b2b2;
    padding-left: 190px;
    padding-right: 190px;
    line-height: 2;
}

.text4 {
    padding-top: 27px;
    padding-bottom: 70px;
}

.text6 {
    padding-top: 60px;
    padding-bottom: 157px;
}

/*第三块*/
.simple1 {
    width: 985px;
    margin-left: 160px;
    margin-right: 160px;
    height: 85px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
}

.simple1 p {
    border-bottom: 1px solid transparent;
}

.number {
    display: inline-block;
    width: 45px;
    height: 45px;
    color: #ffffff;
    background-color: #606060;
    border: 1px solid #606060;
    border-radius: 50%;
    line-height: 42px;

}

.number:hover {
    background-color: #add137;
    border: 1px solid #add137;
}

.simple1 p:hover {
    border-bottom: 1px solid #add137;
}

.text7 {
    padding-left: 35px;
    line-height: 85px;
    font-size: 20px;
    color: #666666;
}

.simple2 {
    padding-left: 250px;
    padding-right: 180px;
    /*height: 310px;*/
    display: flex;
}

.simple2 img {
    padding-top: 90px;
    padding-bottom: 120px;
    width: 113px;
}

.simple3 {
    padding-top: 70px;
    padding-bottom: 110px;
    padding-left: 105px;
    text-align: left;
}

.text8 {
    color: #add137;
    font-size: 20px;
    padding-bottom: 40px;
}

.text9 {
    color: #a0a0a0;
    line-height: 2;
}

/*第四块*/
.fiand {
    display: flex;
}

.fiand1, .fiand2 {
    display: flex;
}

.fiand1 {
    background-color: #e2f8ff;
}

.fiand2 {
    background-color: #f5f9eb;
}

.fiand1 img {
    width: 133px;
    padding: 85px 58px 110px 140px;
}

.fiand2 img {
    width: 101px;
    padding: 95px 73px 115px 75px;
}

.fiand1_2 {
    padding-top: 45px;
    padding-right: 75px;
    padding-bottom: 50px;
}

.fiand1_2 {
    text-align: left;
}

.headline {
    font-size: 20px;
    padding-bottom: 32px;
}

.content1 {
    line-height: 1.5;
    color: #a0acb0;
}

.fiand button {
    color: #ffffff;
    width: 190px;
    height: 50px;
    border: 0;
    border-radius: 15px;
    margin-top: 30px;
    font-size: 18px;
}

.fiand1 button {
    background-color: #28a7d1;
}

.fiand2 button {
    background-color: #add137;
}

/*<!--第五块-->*/
.featured {
    padding: 83px 160px 0 160px;
}

.featured1 {
    display: flex;
    justify-content: space-between;
}

.featured1 h1 {
    text-align: left;
    font-size: 20px;
}

.featured1 p {
    font-size: 14px;
    color: #9a9a9a;
    text-align: left;
    padding-right: 125px;
    line-height: 2;
    padding-top: 32px;
    padding-bottom: 70px;
}

.featured1 button {
    width: 183px;
    height: 52px;
    margin-top: 45px;
    background-color: transparent;
    border-radius: 15px;
    border: 1px solid #e5e5e5;
}

.featured2 {
    display: flex;
    justify-content: space-between;
}

.featured2_2 {
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    text-align: left;
    width: 299px;
}

.featured2_2 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.featured2_2 h2 {
    font-size: 18px;
    padding: 30px 0 25px 25px;
}

.character1 {
    font-size: 14px;
    color: #cccccc;
    padding-left: 25px;
    padding-bottom: 20px;
    padding-right: 25px;
    line-height: 2;
}

.image_1 {
    width: 301px;
}

.image_2 {
    width: 253px;
    padding-left: 25px;
}

.image_3 {
    width: 12px;
}

.character {
    display: flex;
    justify-content: space-between;
    margin-left: 25px;
    margin-right: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #cccccc;
}

.character2 {
    padding: 25px 25px 25px 110px;
    color: #9a9a9a;
}

/*<!--第六块-->*/
.part {
    width: 1300px;
    position: relative;
}

.part h1 {
    position: absolute;
    top: 80px;
    left: 210px;
    color: #9fc02e;
    font-size: 30px;
}

.part1 p {
    position: absolute;
    top: 140px;
    padding-left: 190px;
    padding-right: 200px;
    color: #9d9d9d;
    line-height: 3;
}

.part1_1 {
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 370px;
    left: 170px;
}

.part2 {
    padding-left: 150px;
}

.part1_3 img {
    position: absolute;
    left: 53px;
    top: 190px
}

.part2_1 img {
    position: absolute;
    right: 283px;
    top: 190px
}

.part1_3 span {
    position: absolute;
    left: 130px;
    top: 210px;
    color: #525252;
}

.part2_1 span {
    position: absolute;
    right: 150px;
    top: 210px;
    color: #525252;
}

/*<!--倒数第二-->*/
.yahoo {
    border-bottom: 1px solid #e5e5e5;
}

.yahoo img {
    padding-top: 55px;
    padding-bottom: 40px;
}

/*页脚*/
footer img {
    padding-top: 30px;
    padding-bottom: 30px;
}

技术分享图片

 

仿页面 菜鸟作品

标签：info   oct   relative   member   utf-8   number   导航   foo   type   

原文地址：https://www.cnblogs.com/ybzwj/p/9196545.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！