HTML<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<link rel= "stylesheet" type= "Text/css" href= "./reset.css" >
<link rel= "stylesheet" type= "Text/css" href= "./lesson.css" >
<body>
<nav>
<!--left Logo--
<div class= "logo" >
</div> <!--right menu bar--
<div class= "Menu" >
<ul>
<li>HOME</li>
<li>how IT works</li>
<li>discover A project</li>
<li>BLOG</li>
<li>find out More</li>
<li>LOGIN</li>
</ul>
</div>
</nav> <article>
<!--intellectual property had the Shelf life of a Banana. -
<div class= "Bgd-img" >
<div>
<p>intellectual property has the Shelf life</p>
<p class= "NR" >of a banana.</p>
<div class= "BTN" >become a member</div>
</div> <div>
</div>
</div>
<!--Our work are the presentation of our capabilities. --<div class= "Second" >
<div>
</div>
<div>
</div>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora Animi, Deserunt rerum deleniti nobis. Inventore Porro, Quas doloremque iusto. dicta dolor totam autem quae eveniet aspernatur</p>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora Animi, Deserunt rerum deleniti nobis. Inventore Porro, Quas doloremque iusto. dicta dolor totam autem quae eveniet aspernatur</p> <div class= "Bottom" >
<ul>
<li>
<span class= "Round" >1</span>
<span class= "Font" >Simple</span>
</li>
<li>
<span class= "Round Round-color" >2</span>
<span class= "Font" >Transparent</span>
</li>
<li>
<span class= "Round Round-color" >3</span>
<span class= "Font" >Collaborative</span>
</li>
</ul>
<!--Browse projects, like booking a hotel online! -
<div class= "Browse" >
<div>
</div>
<div>
<p>browse projects, like booking a hotel online!</p>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. dicta aspernatur aliquam vel veniam beatae adipisci, Eligendi est voluptatem Repudiandae sit, minima iste. Repellat tempore velit, Deserunt AD. Magnam, Quia. Perferendis?</p>
</div>
</div>
</div>
</div> <!--Find--
<div class= "Find" >
<!--left--
<div class= "Find-left" >
<div>
<p></p>
<div>
<p>sign up to browse the portfolio. Your journey to becoming a real estate baron starts here.</p>
<div class= "find-btn" >become A member</div>
</div>
</div>
</div>
<!--Right--
<div class= "Find-left find-left-bgd-color" >
<div>
<p></p>
<div>
<p>sign up to browse the portfolio. Your journey to becoming a real estate baron starts here.</p>
<div class= "find-btn btn-color" >submit Your project</div>
</div>
</div> </div> </div>
<!--Featured Projects--
<div class= "Featured-box" >
<div class= "featured" >
<div class= "Featured-left" >
<p>featured projects</p>
<p class= "Content" >brief details of new and popular projects. To view full listings,you'll be required to sign up and become a member.</p>
</div> <div class= "FEATURED-BTN" >
Become a Member
</div>
</div> <div class= "Featured-middle" >
</div> <!--be part of a growing international Community--
<div class= "Featured-bottom" >
<div>
<p>be part of a growing international community</p>
<p>one of the challenges in networking are everybody thinks it ' s making cold calls to strangers. Actually,it ' s The people who already has strong trust Relatiorships with you</p>
</div> <div class= "dialogue" >
<div class= "Dialogue-bgd-img" >
<div>
<p>one of the Best</p>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, Illum odit libero culpa Fuga ipsum error numquam!</p>
</div>
<div>
<span>david beckham</span>
</div>
</div> <div class= "Dialogue-bgd-img" >
<div>
<p>one of the Best</p>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, Illum odit libero culpa Fuga ipsum error numquam!</p>
</div>
<div>
<span>david beckham</span>
</div>
</div>
</div>
</div>
</div>
</article>
<footer>
<div class= "Footer-top" >
</div>
<p>copyright © 2001-2014 cssauthor.com</p>
</footer>
</body>
CSSnav{
width:100%;
height:85px;
Display:flex;
Justify-content:space-around;
}
. logo,
. menu{
line-height:85px;
}.menu>ul{
Display:flex;
}
. menu>ul>li{
margin:20px 30px 30px 0;
Color: #c1c1c1;
}
. menu>ul>li:last-child{
width:100px;
height:38px;
Background-color:rgb (188,218,92);
border-radius:20px;
Text-align:center;
line-height:38px;
Color: #fff;
margin:40px 0 0 75px;
}article{
margin-top:20px;
}
/*intellectual property had the Shelf life of a banana.*/
. bgd-img{
Background:url ('./IMAGES/ICROWDME-PSD---cssauthor_02.png ') no-repeat;
height:570px;
background-size:100%;
position:relative;
}
. bgd-img>div:first-child{
padding-top:170px;
width:690px;
margin:0 Auto;
}.bgd-img>div:first-child>p{
Color: #fff;
font-size:38px;
margin-bottom:24px;
}
. nr{
font-size:30px;
font-weight:100;
Text-align:center;
}
. btn{
width:255px;
height:74px;
Background-color:rgb (153,197,10);
Text-align:center;
line-height:74px;
margin:0 Auto;
border-radius:10px;
Color: #fff;
font-size:20px;
}.bgd-img>div:last-child{
Position:absolute;
bottom:48px;
right:138px;
}
. bgd-img>div:last-child>img{
margin-left:30px;
}
/* Our work is the presentation of our capabilities. */
. second{
width:100%;
Background-color: #fff;
}
. second>div:first-child{
width:58px;
margin:0 Auto;
MARGIN-TOP:30RPX;
}.second>div:nth-child (2) {
margin-top:52px;
width:500px;
Text-align:center;
margin:0 Auto;
}
h2{
font-size:22px;
margin-bottom:30px;
}
. Second>div:nth-child (2) >h2:last-child{
margin-bottom:70px;
}
. second>p{
width:920px;
height:50px;
Text-align:center;
margin:0 Auto;
Color: #c1c1c1;
margin-bottom:46px;
}.bottom{
width:100%;
margin-top:155px;
}
. bottom>ul{
width:963px;
height:85px;
Display:flex;
Justify-content:space-between;
margin:0 Auto;
border-bottom:1px solid RGB (230,230,230);
margin-bottom:65px;
}.bottom>ul>li:hover{
padding-bottom:40px;
border-bottom:1px solid RGB (173,209,54);
}.round{
Display:inline-block;
width:45px;
height:45px;
border-radius:50%;
Background-color:rgb (173,209,54);
Text-align:center;
line-height:45px;
Color: #fff;
margin-right:30px;
}
. round-color{
Background-color:rgb (95,95,95);
}.font{
font-size:24px;
font-weight:100;
}/*browse projects, like booking a hotel online! */
. browse{
width:863px;
height:244px;
margin:0 Auto;
Display:flex;
}.browse>div:first-child{
margin-top:30px;
}.browse>div:last-child{
width:644px;
margin-left:106px;
}.browse>div:last-child>p{
font-size:26px;
Color:rgb (173,209,54);
}
. browse>div:last-child>p:last-child{
margin-top:40px;
font-size:16px;
Color: #c1c1c1;
Line-height:2;
}/* Find * *
. find{
width:100%;
Display:flex;
Justify-content:space-between;
}.find-left{
width:50%;
Background-color:rgb (226,248,255);
}
. find-left>div{
PADDING:48PX 0;
width:435px;
margin:0 Auto;
Display:flex;
}
. find-left>div>p{
margin-right:45px;
margin-top:38px;
}.find-left>div>div>h4{
font-size:20px;
margin-bottom:34px;
}
. find-left>div>div>p{
font-size:16px;
font-weight:200;
Line-height:2;
}
. find-btn{
width:188px;
height:50px;
Background-color:rgb (38,166,209);
border-radius:10px;
Text-align:center;
line-height:50px;
Color: #fff;
font-size:14px;
margin-top:30px;
}
. find-left-bgd-color{
width:50%;
Background-color:rgb (245,249,235);
}
. btn-color{
Background-color:rgb (173,209,54);
}
/* Featured Projects */
. featured-box{
margin-top:80px;
width:100%;
Background-color: #fff;
}
. featured{
width:1000px;
margin:0 Auto;
Display:flex;
padding-bottom:67px;
}
. featured-left{
width:677px;
}
. featured-left>p:first-child{
font-size:28px;
font-weight:500;
margin-bottom:30px;
}
. content{
font-size:16px;
Color: #c1c1c1;
Line-height:2;
}
. featured-btn{
width:182px;
height:54px;
border:1px solid #c1c1c1;
border-radius:10px;
Text-align:center;
line-height:54px;
Color: #c1c1c1;
margin-left:120px;
margin-top:37px;
}.featured-middle{
width:1000px;
margin:0 Auto;
Display:flex;
Justify-content:space-between;}
. featured-bottom{
Background:url ('./images/english_0003s_0000s_0002_bg.png ') No-repeat Center;
height:670px;
background-size:100%;
}
. featured-bottom>div{
width:1000px;
margin:0 Auto;
margin-bottom:100px;
}
. featured-bottom>div>p:first-child{
font-size:30px;
Color:rgb (158,192,45);
padding-top:80px;
margin-bottom:40px;
margin-left:52px;
}
. featured-bottom>div>p:last-child{
font-size:16px;
Color: #c1c1c1;
Line-height:2;
Text-align:center;
margin-left:30px;
}
. dialogue{
Display:flex;
Justify-content:space-between;
}.dialogue-bgd-img{
Background-image:url ('./images/english_0003s_0000s_0000s_0002_rounded-rectangle-12.png ');
width:397px;
height:166px;
}
. dialogue-bgd-img p:first-child{
font-size:20px;
Color:rgb (158,192,45);
font-weight:500;
Text-align:center;
padding-top:25px;
margin-bottom:10px;
}
. dialogue-bgd-img p:last-child{
font-size:14px;
Color: #c1c1c1;
Line-height:2;
Text-align:center;
}.dialogue-bgd-img>div:last-child{
margin:70px 50px;
}
. Dialogue-bgd-img>div:last-child span{
margin-left:20px;
Font-weight:bold;
}/* footer*/
. footer-top{
width:100%;
height:133px;
Text-align:center;
line-height:133px;
border-bottom:1px solid #c1c1c1;
}
footer>p{
height:65px;
Text-align:center;
font-size:14px;
Color: #c1c1c1;
line-height:65px;
}
One page per week
