Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/BO0dy/pen/BzopjK?depth=everything&order=popularity&page=90&q=pack&show_forks=false" /> <meta charset="utf-8"> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Black+Ops+One"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide"> <title>Teens Club</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style class="cp-pen-styles">/* -- Body -- */ body{ width:auto; height:2350px; margin: 0px; font-family: "Audiowide" } /* -- Body End -- */ /* -- Nanv -- */ .nav{ background-color:#cccccc; width:auto; height:60px; text-shadow: 6px 6px 6px #aaa; position: relative; overflow: hidden; } div.nav ul li{ list-style-type: none; padding: 14px 8px; float: right; } div.nav ul{ margin: 5px 10px; } div.nav ul li a{ padding: 14px 8px; width: 100%; height: 100%; text-decoration: none; color:#0f0f0f; } div.nav ul li:hover{ background-color:#ada8a2; font-weight: 600; } .soc_med:hover{ width: 38px; height: 26px; } .soc_med{ width: 30px; height: 20px; } .slide_p{ font-family: 'Black Ops One'; font-size: 29px; display: inline; top: -24px; margin: 35px 0px 0px 0px; position: absolute; font-weight: 800; } /* -- Nanv End -- */ /* -- Sec_slide-- */ .sec_slide{ width: auto; height: 500px; background-image: url('https://i.imgur.com/8tRn3oTl.jpg'); background-size:100%; position: relative; overflow: hidden; } .sec_slide p{ margin-left: auto; margin-right: auto; color:white; margin-top:260px; padding: 20px; font-size: 30px; text-align: center; } .sec_slide div{ width: 100%; height: 100%; position: absolute; background-color: rgba(0,0,0,.6); } /* -- Sec_slide End-- */ /* -- Workshops -- */ .workshops{ width:auto; height:420px; position: relative; background-color: whitesmoke; } .prev img , .next img{ height: 20%; top:40%; position: absolute; } .next img{ right: 0%; float: right; } .workshops a{ text-align: center; } .workshops .wsp{ position: absolute; left: 5%; top:2%; margin: 0px; font-weight: 900; font-family: "Black Ops One" } .prev img:hover , .next img:hover{ background-color: rgba(0,0,0,0.5); } .wrk_shp{ float:left; position:relative; margin-left: 40px; width:340px; height:300px; background-size:cover; background-repeat: no-repeat; overflow:hidden; } /* -- http://www.oslo.esn.no/sites/oslo.esn.no/files/styles/zoom/public/events/images/party-06.jpg --*/ .wrk_shp:hover .ws_child{ border-radius:0px; overflow:hidden; position:absolute; width:100%; height:100%; } .cont{ width:100%; height:100%; background-color:rgba(0,0,0,0.6); top:72%; position:absolute; padding:8px; } .wrk_shp:hover .cont{ top:0; } .wrk_shp p{ margin:8px; position:abslolute; font-size:14px; line-height:20px 0px 0px 0px; color:#dDD; max-height: 54px; overflow: hidden; } .wrk_shp h4{ margin:10px; color:#fff; text-align:center; font-weight: 400; font-size: 19px; } .wrk_shp a{ padding:10px; color:#2d97de; margin:6px 40%; text-align: center; border:2px solid #2d97de; overflow:hidden; text-decoration:none; position:absolute; } .wrk_shp a:hover{ color:#227fbb; border-color: #227fbb; } /* -- Worksohps --*/ /* -- Our Parteners */ .part{ width: auto; height: 300px; background-color: whitesmoke; position: relative; margin:0; overflow: hidden; } .part p{ left: 30%; margin:auto; padding: 10px; font-size: 37px; font-family: "Black Ops One"; font-weight: 900; position:absolute; text-align:center; top:10px; } .part ul{ position: absolute; top:30%; left: 14%; overflow: hidden; } .part ul li img{ border:1px solid black; border-radius: 50%; height: 150px; } .part ul li { list-style-type: none; float: left; margin: 20px 20px; overflow: hidden; } /* -- part End --*/ /* -- Mail list --*/ .mailing{ width:auto; height: 200px; background-color: #DDD; position: relative; margin: 0px; } .mailing h1 { margin: auto; font-family: 'Black Ops One'; font-size: 37px; font-weight: 900; top:10px; position: absolute; padding: 10px; left: 27.5%; } .mailing p { margin: auto; font-size: 14px; line-height: 25px; top:55px; position: absolute; padding: 8px; left: 37%; } .mailing input{ position: absolute; margin: 0px 5px; border-radius: 0px; border: 0px; top:110px; float:left; font-size:30px; } .mailing input[type="email"]{ left: 40%; color: rgba(0,0,0,.3); } .mailing input[type="email"]:focus{ border: 0px; } .mailing input[type="submit"]{ left: 28%; background-color: rgba(0,0,0,.3); color: white; text-align: center; } /*-- mail list End --*/ /* -- Footer -- */ .footer{ padding: 40px; width: auto; height: 329px; background-color: dimgray; } .footer img{ width: 24px; height: 24px; padding: 2px; background-position: center; } .footer ul { color: antiquewhite; margin: 40px 30px; float: left; } .footer ul li{ list-style-type: none; color: antiquewhite; padding: 5px; } .footer a:hover{ color:wheat; font-weight: 900; } .footer a{ text-decoration: none; font-size: 20px; padding: 5px; margin: 5px; color: antiquewhite; } .footer p{ display: inline-block; } .footer img{ margin:-8px 2px; padding-top: 10px; }</style></head><body> <body> <!-- Nav --> <div class="nav" > <ul> <p class="slide_p">Teens Club</p> <li><a href="https://www.facebook.com/teensclub.eg/" target="_blank"><img src="http://sl.uploads.im/t/UWIqX.png" alt="Facebook" class="soc_med"></a></li> <li><a href="https://twitter.com" target="_blank"><img src="http://sm.uploads.im/gcO0m.png" alt="Twitter" class="soc_med"></a></li> <li><a href="https://instagram.com" target="_blank"><img src="http://sk.uploads.im/C6uqN.png" alt="instagram" class="soc_med"></a></li> <li><a href="#about">About Us</a></li> <li><a href="#call">Call Us</a></li> <li><a href="#events">Events</a></li> <li><a href="#workshops">Workshops</a></li> <li><a href="">Home</a></li> </ul> </div> <!-- Second Slide--> <div class="sec_slide"> <div > <p> Our Goal Is To Build An Active Source in Our Society <br> Via Workshops And Active Events</p> </div> </div> <!-- Workshops Slide --> <div class="workshops" id="workshops"> <a href="#workshops" class="prev"><img alt="Previous Button" src="http://sm.uploads.im/HNkMX.png"></a> <h1 class="wsp">Workshops</h1> <div style="position:absolute;left:86px;top:13%;overflow:hidden;margin:0 auto;width:93%;height:70%;"> <div class="wrk_shp" style="background-image:url('https://i.imgur.com/AsV9War.jpg');background-position: center;"> <div class="ws_child"> <div class="cont"> <h4>Web Design And Development (Html, Css, JavaScript, PHP)</h4> <hr><br> <p>Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code </p> <br> <p style="font-size:10px;margin:0px 0px 10px 18px;">Course Hours : 62 hours</p> <a href=""> Join</a> </div> </div> </div> <div class="wrk_shp" style="background-image:url('http://www.ichanical.com/wp-content/uploads/2015/04/html-programming.jpg');"> <div class="ws_child"> <div class="cont"> <h4>Desktop Programming (Python, C/C++, C#, Ruby) </h4> <hr><br> <p>An application program is a computer program designed to perform a group of coordinated .... This includes graphic-art software, desktop publishing software</p> <br> <p style="font-size:10px;margin:0px 0px 10px 18px;">Course Hours : 62 hours</p> <a href=""> Join</a> </div> </div> </div> <div class="wrk_shp" style="background-image:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZEewiaYMTPrCCY5xk5RpanjpB8ALWOQIVWBMtT83pWQYHoNy6tw');"> <div class="ws_child"> <div class="cont"> <h4>Graphics Editing <br> (PhotoShop, Illustrator)</h4> <hr><br> <p>Graphics (from Greek γραφικός graphikos, 'something written' e.g. autograph) are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate</p> <br> <p style="font-size:10px;margin:0px 0px 10px 18px;">Course Hours : 62 hours</p> <a href=""> Join</a> </div> </div> </div> </div> <a href="#workshops" class="next"><img alt="Next Button" src="http://sl.uploads.im/kZj8U.png"></a> </div> <!-- Events Slide --> <div class="workshops" id="events" style="background-color:#DDD;"> <a href="#events" class="prev"><img alt="Previous Button" src="http://sm.uploads.im/HNkMX.png"></a> <h1 class="wsp">Events</h1> <div style="position:absolute;left:86px;top:13%;overflow:hidden;margin:0 auto;width:93%;height:70%;"> <div class="wrk_shp" style="background-image:url('https://static.pexels.com/photos/2232/vegetables-italian-pizza-restaurant.jpg');"> <div class="ws_child"> <div class="cont"> <h4>Pizza Camp <br> ( Eating ) </h4> <hr><br> <p>Pizza is a flatbread generally topped with tomato sauce and cheese and baked in an oven. It is commonly topped with a selection of meats, vegetables and condiments. The term</p> <br> <p style="font-size:10px;margin:0px 0px 10px 18px;">Date : 20/10/5120</p> <a href=""> Join</a> </div> </div> </div> <div class="wrk_shp" style="background-image:url(http://www.oslo.esn.no/sites/oslo.esn.no/files/styles/zoom/public/events/images/party-06.jpg);"> <div class="ws_child"> <div class="cont"> <h4>Cosplay Party<br> ( Celebration ) </h4> <hr><br> <p>Cosplay (コスプレ kosupure?), a contraction of the words costume Roleplay, is a performance art in which participants called cosplayers wear costumes and</p> <br> <p style="font-size:10px;margin:0px 0px 10px 18px;">Date : 20/10/5120</p> <a href=""> Join</a> </div> </div> </div> <div class="wrk_shp" style="background-image:url(http://wallpapercave.com/wp/Mee1byf.jpg);"> <div class="ws_child"> <div class="cont"> <h4>Marathon Competition <br> ( Sports ) </h4> <hr><br> <p>The marathon is a long-distance running event with an official distance of 42.195 kilometres (26.219 miles, or 26 miles 385 yards), usually run as a road race</p> <br> <p style="font-size:10px;margin:0px 0px 10px 18px;">Date : 20/10/5120</p> <a href=""> Join</a> </div> </div> </div> </div> <a href="#events" class="next"><img alt="Next Button" src="http://sl.uploads.im/kZj8U.png"></a> </div> <!-- Parteners In Success --> <div class="part"> <p>Our Parteners In Success</p> <ul> <li><img alt="Dell" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Dell_Logo.svg/2000px-Dell_Logo.svg.png"></li> <li><img alt="hp" src="http://www.aef.info/assets/img/modules/rue-2016-logos-organisations/logo_SD_HP.png"></li> <li><img alt="Elzero"src="https://lh3.googleusercontent.com/VFtCw7l1gMu6dw1EdfuMLc3KJ9lrvpOWs2oJ1aIeCzwPvurZPV6BmF6ce5RXlHrzJ7TrxoBy=s630-fcrop64=1,358e19e7f736dbce"></li> <li><img alt="Intel"src="https://www.compu-zone.co.uk/media/magentothem/brandslider/intel-logo-1-.jpg"></li> </ul> </div> <!-- Mailing List --> <div class="mailing"> <h1>Get News Throw Your E-mail</h1> <p>You Will Recive All New Events And Workshops</p> <br> <form method="post"> <input type="email" name="email"> <input type="submit" Value="Get News"> </form> </div> <!-- Footer --> <div class="footer"> <ul style="margin:40px 30px 40px 120px;"><h2>About Teens Club</h2> <li><p style="max-width: 255px;"id="about">Teens Club is a non-profit project seeking to develop teens' skills.We provide teens with special activities such as : Debates,Language courses..etc</p></li> </ul> <ul><h2>Important Links</h2> <li><a href="#">Home</a></li> <li><a href="#workshops">Workshops</a></li> <li><a href="#events">Events</a></li> <li><a href="#about">About Us</a></li> <li><a href="#call" >Call US</a></li> </ul> <ul><h2 id="call">Contact Us</h2> <li><img alt="map" src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-20-128.png"><p>Address : The Greek Campus, Cairo</p></li> <li><img alt="Mobile" src="https://cdn2.iconfinder.com/data/icons/kitchen-appliances-computers-and-electronics/32/Appliances-06-128.png"><p>Telephone : 01069971710</p></li> <li><img alt="E-Mail"src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-email-outline-128.png"><p>E-Mail : Admin@teensclub.com</p></li> <li><p ></p></li> </ul> </div> <p style="margin:7px 36%;position:relative;color:rgba(0,0,0,.5)">Copy Right © Boody All Rights Reseved ®</p> </body> </body></html>

Related: See More

Questions / Comments: