<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>
