<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- ************* --> <div class="header"> <div class="background_color"> <div class="container"> <div class="navbar"> <span>UihEro</span> <ul> <li>home</li> <li>studio</li> <li>works</li> <li>about me</li> <li>blog</li> <li>contact</li> </ul> </div> <div class="slide"> <img src="http://www4.0zz0.com/2017/06/22/00/740782702.png" alt="phone"> <div> <h2>Flat & Modern transparent</h2> <p>flat inspired UI with some modern transparent <br>Element</p> <ul> <li>19<span>Psd</span> Files <span>Easy</span> to Edite</li> <li>All <span>Font</span> Used <span>Link</span> Included</li> </ul> <h2>Get Now Your Copy just for <span>7$</span></h2> </div> </div> </div> </div> </div> <!-- ************* --> <div class="studio"> <div class="container"> <div clas="left"> <img src="http://www7.0zz0.com/2017/06/22/00/509682825.png" alt="pc"> <h1>Video Promotional on vimeo</h1> <span>Simple & Elegant User Interface</span> <p>One morning, when Gregor Samsa woke from troubled dreams,when<br> Gregor Samsa woke from troubled dreams , when Gregor Samsa<br> woke from troubled dreams</p> <button>Moredetails</button> </div > <div class="right"> <h1>Web & Mobile Landing Page</h1> <span>Simple & Elegant User Interface</span> <p>One morning, when Gregor Samsa woke from troubled dreams,when<br> Gregor Samsa woke from troubled dreams , when Gregor Samsa<br> woke from troubled dreams</p> <button>Readmore</button><br> <img src="http://www4.0zz0.com/2017/06/22/00/465881357.png" alt="video"> </div> </div> </div> <!-- ************* --> <div class="space"></div> <!-- ************* --> <div class="info"> <i class="fa fa-quote-left fa-2x" aria-hidden="true"></i> <p>“Good design is all about making other designers<br> feel like idio because that idea wasn't theirs."</p> <div> <div></div> <p>Frank <span>Chimero</span></p> <p>Professional <span>Designer.</span></p> </div> </div> <!-- ************* --> <div class="downloads"> <div class="container"> <div> <h2>Flat & Modern transparent </h2> <p>flat inspired UI with some modern transparent Element</p> <p>En se réveillant un matin après des rêves agités, Gregor Samsa En se réveillant un matin après des rêves agités, Gregor Samsa </p> <hr> <ul> <i class="fa fa-share" aria-hidden="true"></i> <li>16Psd Files Easy to Edite</li><br> <i class="fa fa-share" aria-hidden="true"></i><li>All Font used Link Included</li><br> <i class="fa fa-share" aria-hidden="true"></i> <li>16Psd Files Easy to Edite</li><br> <i class="fa fa-share" aria-hidden="true"></i><li>All Font used Link Included</li><br> </ul> <h2>Get Now Your <span>Copy</span> just for <span>7$</span></h2> <button>Download Now</button> </div> <div> <img src="http://www4.0zz0.com/2017/06/22/00/145678555.png"> </div> </div> </div> <!-- ************* --> <div class="client"> <div class="container"> <h2>Our Clients</h2> <p>Voyez ce jeu exquis wallon</p> <img src="http://www4.0zz0.com/2017/06/22/00/863257521.png" > <img src="http://www7.0zz0.com/2017/06/22/00/283377152.png" > <img src="http://www7.0zz0.com/2017/06/22/00/607730343.png" > <img src="http://www7.0zz0.com/2017/06/22/00/540449919.png" > <img src="http://www7.0zz0.com/2017/06/22/00/698244080.png" > </div> </div> <!-- ************* --> <div class="pricing"> <h2>Pricing Table</h2> <p>Choose From Our Amazing Plans</p> <div class="container"> <div> <h2>Small</h2> <p>19$/Month</p> <hr> <p>10,000 messages</p> <p><span>Unlimited</span> data</p> <p><span>Unlimited</span> Users</p> <p>first 30 days free</p> <button>Sign Up</button> </div> <div> <h2>Medium</h2> <p>29$/Month</p> <hr> <p>100,000 messages</p> <p><span>Unlimited</span> data</p> <p><span>Unlimited</span> Users</p> <p>first 30 days free</p> <button>Sign Up</button> </div> <div> <h2>Large</h2> <p>49$/Month</p> <hr> <p>Unlimited messages</p> <p><span>Unlimited</span> data</p> <p><span>Unlimited</span> Users</p> <p>first 30 days free</p> <button>Sign Up</button> </div> </div> </div> <!-- ************* --> <div class="works"> <h2>Our Works</h2> <div class="container"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> <img src="http://www7.0zz0.com/2017/06/22/00/665054596.png"> </div> </div> <!-- ************* --> <div class="blog"> <div> <div class="container"> <i class="fa fa-twitter fa-4x" aria-hidden="true"></i><br> <span>UihEro</span><span>On Twitter @Uihero</span> <p>“Good design is all about making other designers<br> feel like idio because that idea wasn't theirs."</p> <span>Antoine de Saint-Exupéry</span> </div> </div> </div> <!-- ************* --> <div class="contact"> <h2>SO WHAT YOU THINK ?</h2> <p>“Good design is all about making other designers<br> feel like idio because that idea wasn't theirs."</p> <button>Contact Me</button> </div> <!-- ************* --> <div class="copyright"> <div class="container"> <div class="leftway"> <i class="fa fa-facebook fa-lg" aria-hidden="true"></i> <i class="fa fa-twitter fa-lg" aria-hidden="true"></i> <i class="fa fa-instagram fa-lg" aria-hidden="true"></i> <i class="fa fa-behance fa-lg" aria-hidden="true"></i> <span> /AYOUB ELRED</span> </div> <div class="rightway"> <i class="fa fa-copyright fa-lg" aria-hidden="true"></i> <span>2014 By: AYOUB ELRED</span> </div> </div> </div> <!-- ************* -->

.container{width:1170px;margin:auto} *{font-family:sans-serif} /*start header*/ .header{ background-image:url("http://www7.0zz0.com/2017/06/22/00/229041294.png"); height:700px; width:100%; background-size:cover; overflow:hidden } /*---------------*/ .header .background_color{ background-color:rgba(51,59,69,.96); width:100%; height:100%; padding-top: 20px } .header .background_color .container .navbar{ overflow:hidden; color:white; padding-bottom: 25px } .header .background_color .container .navbar span{ font-size: 30px; font-weight: bold; font-family: cursive; float:left; padding:3px 15px } .header .background_color .container .navbar ul{ float:right; list-style:none } .header .background_color .container .navbar ul li{ float:left; padding:3px 15px; font-size: 18px; margin-left:35px; text-transform: uppercase } .header .background_color .container .navbar ul li:hover{ border:0 solid #ff4b5a; border-radius:30px; background-color:#ff4b5a } /*---------------*/ .header .background_color .container .slide{ overflow:hidden; } .header .background_color .container .slide img{ height:500px; width:250px; float:left; margin-left:120px } .header .background_color .container .slide div{ float:right; width:59%; padding:50px 0 0 10px; color:white; line-height: 15px } .header .background_color .container .slide div ul{ list-style: none } .header .background_color .container .slide div ul li span{ font-weight: bold } .header .background_color .container .slide div ul li{ padding-top:20px; padding-bottom: 10px } .header .background_color .container .slide div ul li:before{ content:'.'; color:#ff4c5b; font-size: 50px; line-height: 10px } .header .background_color .container .slide div h2{ padding-top:20px; font-weight: 400 } .header .background_color .container .slide div h2 span{ color:#29af61 } /*end header*/ /*start studio*/ .studio{ overflow:hidden; background-color:#f2f2f2; padding:100px 0 40px 0 } .studio .container > div{ float:left; width:50% } .studio .container > div img{ width:90%; height:55%; padding-bottom:128px } .studio .container div.right button{ margin-bottom: 350px } .studio .container > div h1{ color:#444e5d; font-size:40px } .studio .container > div p{ line-height: 23px; color:#444e5d } .studio .container div.right > span{ color:#ff4b5a } .studio .container > div h1 ~ span{ color:#1fab5a } .studio .container > div h1 ~ span ~ button{ background:#1fab5a; padding:15px 25px; border:none; color:white } .studio .container div.right button{ background:#ff4b5a; padding:15px 25px; border:none; color:white } /*end studio*/ .space{width:100%;height:60px;background-color:#38404a} /*start info*/ .info{ background-color:#edebeb; color:#6a6565; text-align:center; font-size: 22px; overflow:hidden; padding:70px } .info > div { width:340px; margin:auto } .info > div > div { height:100px; width:100px; border:1px solid #edebeb; border-radius: 50px; background-image:url("http://www7.0zz0.com/2017/06/22/00/181105617.png"); background-size: cover } .info > div > div, .info > div > p{ float:left } .info > div > p{ margin:15px 0 5px 10px } .info > div > p ~ p{ margin:2px 0 5px 10px } .info > div > p > span { font-weight: bold } /*end info*/ /*start downloads*/ .downloads{ overflow:hidden; background-color:#f2f2f2; color:#444e5d; padding:100px } .downloads .container > div{ width:30%; float:left } .downloads .container > div p ~ p{ padding-bottom: 35px } .downloads .container > div ~ div{ float:right; margin-right:100px } .downloads .container > div ~ div >img{ height:650px; width:300px } .downloads .container > div ul{ list-style: none; padding:0; margin:0; margin-top:40px } .downloads .container > div ul li, .downloads .container > div ul i{ display:inline } .downloads .container > div ul i{ color:#1fab5a; line-height: 30px; } .downloads .container > div ul ~ h2{ font-weight: 400 } .downloads .container > div ul ~ h2 > span{ font-weight: bold } .downloads .container > div ul ~ h2 ~ button{ font-weight: bold; border:1px solid #1fab5a; border-radius:4px; background-color:#1fab5a; color:#FFF; padding:13px 18px } /*end downloads*/ /*start client*/ .client{ padding-top:15px; text-align: center; background-color:#faf8f8; overflow:hidden; padding:30px 0 100px 0; color:#444e5d } .client > div img{ height:50px; float:left; width:17%; margin-right:35px } /*end client*/ /*start pricing*/ .pricing{ overflow:hidden; text-align: center; color:#444e5d; background-color:#f1f1f1; padding:50px 0 100px 0 } .pricing > p{ padding-bottom: 80px } .pricing .container > div{ float:left; width:21%; border:1px solid #a1a1a1; height:348px; margin:0 6% } .pricing .container > div > h2{ margin:10px 0 5px 0 } .pricing .container > div > h2 ~ p{ margin-bottom:0; color:#999 } .pricing .container > div > h2 ~ p > span{ font-weight: bold } .pricing .container > div > button{ margin-top:30px; border:1px solid #1fab5a; border-radius:4px; background-color:#1fab5a; padding:15px 25px; color:white; font-weight: bold } /*end pricing*/ /*start works*/ .works{ overflow:hidden; color:#444e5d; text-align: center; padding:50px 0 100px 0; background-color:#fbf8f8 } .works h2{ padding-bottom: 50px } .works .container > img{ float:left; width:32.5%; margin:0 8px 8px 0 } /*end works*/ /*start blog*/ .blog{ text-align: center; height:500px; background-image:url("http://www4.0zz0.com/2017/06/22/00/230805745.png"); background-size:cover; color:white } .blog > div{ background-color:rgba(0,0,0,.5); height:100%; width:100% } .blog > div > .container{ padding-top:10% } .blog > div > .container i{ margin-bottom: 30px } .blog > div > .container i ~ span{ font-weight: bold; font-size: 18px; padding:10px } .blog > div > .container i ~ span ~ span{ font-size:16px; font-weight: 400 } /*end blog*/ /*Start contact*/ .contact{ text-align: center; height:300px; background-color:#333a45; color:#FFF; padding-top:50px } .contact p { color:#95969a } .contact button{ background:#ff4b5a; padding:15px 25px; border:1px solid #ff4b5a; border-radius: 3px; color:#FFF; font-weight: bold; margin-top: 30px } /*end contact*/ /*start copyright*/ .copyright{ text-align: center; background-color: #2a3039; color:#dad9d9; overflow:hidden; padding:30px } .copyright .container > div > i{ color:#4e5967 } .copyright .container .leftway{ float:left } .copyright .container .rightway{ float:right } /*end copyright*/