"layout"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/NeSViT/pen/vGyNzX?depth=everything&order=popularity&page=94&q=services&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">/*GENERAL STYLES*/ body { background-color: #F7F7F7; font-family: RobotoRegular, Arial; color: #888888; } .container { width: 975px; margin: 0 auto; } ul { margin: 0; } ul li { list-style-type: none; } a { color: #888888; text-decoration: none; } a:visited { color: #888888; } /*Delete 4px in image*/ img { display: block; } /*/GENERAL STYLES*/ /*--------------------------------------------------------------- */ /*HEADER*/ .header { width: 100%; height: 77px; margin: 0; padding: 0; background-color: #FFFFFF; } /* LEFT HEADER */ .left-header { height: 77px; display: inline-block; float: left; background-color: #FFFFFF; } /* /LEFT HEADER */ /* CENTER HEADER */ .center-header { width: 740px; height: 77px; display: inline-block; background-color: #FFFFFF; } .center-header ul { padding-left: 77px; } .center-header li { float: left; width: 100px; height: 77px; line-height: 5em; text-align: center; } .center-header li a:hover { float: left; width: 100px; color: #EF4036; border-bottom: 4px solid #EF4036; height: 77px; transition: all 0.1s ease; } .activeTab { color: #EF4036; border-bottom: 4px solid #EF4036; } /* /CENTER HEADER */ /* RIGHT HEADER*/ .rightHeader { width: 158px; height: 77px; position: relative; float: right; background-color: #FFFFFF; } .rightHeaderFindButton{ position: absolute; top: 15px; right: 0; width: 100%; } .rightHeaderFindButton img{ right: 0; position: absolute; } .rightHeaderFindButton input { position: absolute; width: 0%; /* changes here */ height: 40px; top: 0; visibility: hidden; transition: 300ms; /* changes here */ display: block; right: 40px; /* changes here */ } .active { width: 100%!important; } /* /RIGHT HEADER */ /*--------------------------------------------------------------- */ /*--------------------------------------------------------------- */ /*MAIN STYLES*/ /* Все Аудио Видео Backstage */ main { background-color: #F7F7F7; padding: 0 0 30px 0; } .containerMenu, .containerMenuLeft, .containerMenuLeft ul, .containerMenuLeft ul li { padding: 0; display: inline-block; font-size: 14px; font-family: RobotoRegular, "Arial"; } .containerMenu { padding-top: 35px; padding-bottom: 9px; border-bottom: 1px solid #818181; width: 100%; } .containerMenuLeft ul li { padding-right : 18px; } /* CONTAINER MENU RIGHT */ .containerMenuRight { float: right; position: relative; font-size: 14px; } .containerMenuRight ul a { padding-right: 10px; } .containerMenuRight:hover, .containerMenuRight:hover ul{ background-color: #444444; text-align: right; } .containerMenuRight:hover ul a, .containerMenuRight:hover ul ul li { color: #fff; } .containerMenuRight:hover ul ul li { font-size: 12px; padding: 5px; text-align: left; } .containerMenuRight:hover ul ul li:hover { background-color: #000; } .containerMenuRight:hover ul { position: absolute; right: 0; } .containerMenuRight:hover ul ul{ width: 135px; position: absolute; right: 0; } /* Hide all ul under containerMenuRight */ .containerMenuRight ul ul { display: none; } /* Show ul 2nd grade when hover Банки Страхование Строительство Медицина Здоровье и красота */ .containerMenuRight ul { position: relative; padding: 0; } .containerMenuRight ul:hover > ul { display: block; z-index: 1; } .containerMenuRightTriangle { display: inline; position: absolute; bottom: 6px; margin-left: 4px; padding: 0; width: 0; height: 0; border-style: solid; border-width: 6px 3px 0 3px; border-color: #444444 transparent transparent transparent; } .containerMenuRight:hover .containerMenuRightTriangle { border-color: #fff transparent transparent transparent; z-index: 2; } /* /CONTAINER MENU RIGHT */ /* Collection content */ .collection { width: 100%; height: 210px; padding: 0 0 21px 0; } /*One block, other content within it*/ .container-block { display: inline-block; position:relative; overflow: hidden; width:310px; height: 210px; margin: 18px 0; } .container-block .image img { height: 210px; width: 310px; } .collection > .container-block:nth-child(1) { margin-right: 18px; } .collection > .container-block:nth-child(3) { margin-left: 18px; } /*Unvisible block with logo on background*/ .textbox { width:310px; height:210px; position:absolute; bottom:0; left:0; margin-bottom:-150px; margin-left: -250px; background-repeat: no-repeat; background-position: right top; transition: all 0.5s ease; } .textbox_audio_blue { background-image: url(https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992890/audio-blue_ii22v1.png); background-color: #3498DB; } .textbox_video_red { background-image: url(https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992893/video-red_kojunv.png); background-color: #EF4036; } .textbox_video_green { background-image: url(https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992892/video-green_pj1rd6.png); background-color: #27AE60; } /*Visibility for .textbox*/ .container-block:hover .textbox { margin-bottom:0; margin-left: 0; background-position: center; } /* text positioning in container-block */ .text { padding: 130px 0% 0 0%; color: white; text-align: center; } /* BIG PREVIEW VIDEO */ .containerBigContent { position: relative; width: 931px; background-color: #444444; /*dard-grey*/ padding: 22px; margin: 18px 0 0 0; display: none; transition: all 1s ease; } /* Desctiption for triangle */ .triangleContainerBigContent { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 16px 12px 16px; border-color: transparent transparent #444444 transparent; } .triangleContainerBigContentLeft{ top: -12px; left: 139px; } .triangleContainerBigContentMiddle { top: -12px; left: 471px; } .triangleContainerBigContentRight { top: -12px; left: 805px; } /* container for Video adn audio */ .containerVideoBlock { height: 490px; width: 100%; } .containerAudioBlock { height: 175px; width: 100%; } /* /container for Video adn audio */ /* size for video and audio within container*Block */ .containerVideoBlock iframe, .containerAudioBlock iframe { height: 100%; width: 100%; } /* /size for video and audio within container*Block */ /* text inside containerBigContent */ .containerVideoText { height: 20%; width: 100%; color: #FFFFFF; overflow: hidden; } .containerVideoText > p { margin: 0; font-family: RobotoLight, "Arial"; } .containerVideoText > p:nth-child(1) { font-size: 23px; padding-top: 14px; } .containerVideoText > p:nth-child(2) { font-size: 14px; padding: 8px 0; } .containerVideoText > p:nth-child(3) { font-size: 16px; } /* /text inside containerBigContent*/ /* /BIG PREVIEW VIDEO */ /*/MAIN STYLES*/ /*--------------------------------------------------------------- */ /*--------------------------------------------------------------- */ /* FOOTER */ .footer { width: 100%; background-color: #444444; height: 255px; color: #fff; font-family: RobotoLight, "Arial"; font-size: 14px; } .footerHeadNote { font-size: 18px; text-transform: uppercase; padding: 0;; } /* LEFT FOOTER */ .leftFooter { width: 510px; display: inline-block; position: relative; float: left; } .leftFooter ul, .leftFooter ul li { padding: 0; margin: 0; } .leftFooter ul li { list-style-type: disc; margin-left:17px; } /* /LEFT FOOTER */ /* CENTER FOOTER */ .centerFooter { width: 318px; display: inline-block; } .centerFooterContent { position: relative; padding-bottom: 20px; } .centerFooterContent p { padding: 0; margin: 0 0 0 37px; } .centerFooterContent img { position: absolute; top: 3px; } /* /CENTER FOOTER */ /* RIGHT FOOTER */ .rightFooter { width: 147px; display: inline-block; float: right; } .rightFooter a { display: inline-block; padding-right: 8px; } /* /RIGHT FOOTER */ .footer-copyright { width: 100%; height: 55px; background-color: #222222; color: #FFF; font-family: RobotoLight, "Arial"; font-size: 14px; text-align: center; vertical-align: middle; } .footer-copyright p { vertical-align: middle; line-height: 3em; margin: 0; } /* /FOOTER */ </style></head><body> <html> <head> <meta charset="UTF-8"> <title>Rec Square</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/fonts.css"> </head> <body> <!-- HEADER --> <header class="header"> <div class="container"> <div class="left-header"> <img src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457994875/logo-2_bx71sb.png" height="77" alt="RecSquare"> </div> <div class="center-header"> <ul> <li><a href="#">News</a></li> <li><a href="#">Services</a></li> <li class="activeTab"><a href="#">Portfolio</a></li> <li><a href="#">Speakers</a></li> <li><a href="#">Studios</a></li> <li><a href="#">Contacts</a></li> </ul> </div> <!-- RIGHT HEADER FIND --> <div class="rightHeader"> <div class="rightHeaderFindButton"> <input id="search" type="text" placeholder="Enter your search term"> <img onclick="showSearch()" src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992891/find_k0arzf.png"> </div> </div> <!-- /RIGHT HEADER /FIND --> </div> </header> <!-- /HEADER--> <!--START MAIN--> <main> <div class="container"> <div class="containerMenu"> <div class="containerMenuLeft"> <ul> <li><a href="#">All</a></li> <li><a href="#">Audio</a></li> <li><a href="#">Video</a></li> <li><a href="#">Backstage</a></li> </ul> </div> <div class="containerMenuRight"> <ul> <a href="#">Categories<div class="containerMenuRightTriangle"></div></a> <ul> <li><a href="#">Banks</a></li> <li><a href="#">Insurance</a></li> <li><a href="#">Building</a></li> <li><a href="#">Medicine</a></li> <li><a href="#">Health and beauty</a></li> </ul> </ul> </div> </div> </div> <div class="container"> <!-- 1st row collection --> <div class="collection"> <!-- 1st preview --> <div class="container-block"> <div class="image"> <img src="https://farm2.staticflickr.com/1704/25164368934_0a31a9cbe9_o.png" alt="Best Cartoons"> </div> <a href="javascript:showHideVideo(0)"> <div class="textbox textbox_video_green"> <p class="text">10 most anticipated 2016 cartoon</p> </div> </a> </div> <!-- /1st preview --> <!-- 2nd preview --> <div class="container-block"> <div class="image"> <img src="https://farm2.staticflickr.com/1613/25168236323_fed6fcc86b.jpg" alt="Best games"> </div> <a href="javascript:showHideVideo(1)"> <div class="textbox textbox_video_red"> <p class="text">Best Games 2015: Graphics</p> </div> </a> </div> <!-- /2nd preview --> <!-- 3rd preview --> <div class="container-block"> <div class="image"> <img src="https://farm2.staticflickr.com/1491/25768785756_25b0568d11_m.jpg" alt="Party Rock"> </div> <a href="javascript:showHideVideo(2)"> <div class="textbox textbox_audio_blue"> <p class="text">LMFAO - Party Rock Anthem</p> </div> </a> </div> <!-- / 3rd preview --> </div> <!-- /1st row collection --> <!-- Content for 1st row collection --> <!-- 1st content --> <div class="containerBigContent"> <div class="triangleContainerBigContent triangleContainerBigContentLeft"></div> <div class="containerVideoBlock"> <iframe src="https://www.youtube.com/embed/oLIbMoa6Igc" allowfullscreen></iframe> </div> <div class="containerVideoText"> <p>10 most anticipated 2016 cartoon</p> <p>Video</p> <p>Igromania Cinema selects ten most anticipated 2016 cartoons. </p> </div> </div> <!-- /1st content --> <!-- 2nd content --> <div class="containerBigContent"> <div class="triangleContainerBigContent triangleContainerBigContentMiddle"></div> <div class="containerVideoBlock"> <iframe src="https://www.youtube.com/embed/3y8hWV274_E" allowfullscreen></iframe> </div> <div class="containerVideoText"> <p>Best Games 2015: Graphics</p> <p>Video</p> <p>Igromania chooses the most beautiful graphics in games 2015.</p> </div> </div> <!-- /2nd content --> <!-- 3rd content --> <div class="containerBigContent"> <div class="triangleContainerBigContent triangleContainerBigContentRight"></div> <div class="containerAudioBlock"> <iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/16850898&amp"></iframe> </div> <div class="containerVideoText"> <p>Music track</p> <p>Audio</p> <p>LMFAO - Party Rock Anthem</p> </div> </div> <!-- /3rd content --> <!-- 2nd row collection --> <div class="collection"> <!-- 1st preview --> <div class="container-block"> <div class="image"> <img src="https://farm2.staticflickr.com/1503/25494166290_a35946df7d.jpg" alt="CSS Dropdown"> </div> <a href="javascript:showHideVideo(3)"> <div class="textbox textbox_video_red"> <p class="text">Create a drop-down menu on the CSS</p> </div> </a> </div> <!-- /1st preview --> <!-- 2nd preview --> <div class="container-block"> <div class="image"> <img src="https://farm2.staticflickr.com/1661/25164368524_88b37d41be_m.jpg" alt="Leonardo Di Caprio"> </div> <a href="javascript:showHideVideo(4)"> <div class="textbox textbox_video_red"> <p class="text">Why Leonardo DiCaprio is still hasn't Oscar?</p> </div> </a> </div> <!-- /2nd preview --> <!-- 3rd preview --> <div class="container-block"> <div class="image"> <img src="https://farm2.staticflickr.com/1521/25768786206_ca14e810fa_m.jpg" alt="Party Rock"> </div> <a href="javascript:showHideVideo(5)"> <div class="textbox textbox_audio_blue"> <p class="text">G-Eazy - Me Myself And I (ft. Bebe Rexha) (When its Dark Out In Desc.)</p> </div> </a> </div> <!-- / 3rd preview --> </div> <!-- /2nd row collection --> <!-- Content for 2nd row collection --> <!-- 1st content --> <div class="containerBigContent"> <div class="triangleContainerBigContent triangleContainerBigContentLeft"></div> <div class="containerVideoBlock"> <iframe src="https://www.youtube.com/embed/hnKZKZyWNYM" allowfullscreen></iframe> </div> <div class="containerVideoText"> <p>Create a drop-down menu on the CSS</p> <p>Video lessons</p> <p>In this tutorial I will show you how to create beautiful, drop down menus without using javascript. All that we will use in this tutorial, so it's CSS. Menu will be presented to an unordered list with two levels of submenus.</p> </div> </div> <!-- /1st content --> <!-- 2nd content --> <div class="containerBigContent"> <div class="triangleContainerBigContent triangleContainerBigContentMiddle"></div> <div class="containerVideoBlock"> <iframe src="https://www.youtube.com/embed/lrQEgFB7FYw" allowfullscreen></iframe> </div> <div class="containerVideoText"> <p>Why Leonardo DiCaprio is still hasn't Oscar?</p> <p>Video</p> <p>Despite the huge number of brilliant role Leonardo DiCaprio is still no Oscar. Hollywoodyallen decided to establish the chronology of the struggle for the statuette Leo and understand the reasons why Leo is constantly losing.</p> </div> </div> <!-- /2nd content --> <!-- 3rd content --> <div class="containerBigContent"> <div class="triangleContainerBigContent triangleContainerBigContentRight"></div> <div class="containerAudioBlock"> <iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/228604665&amp"></iframe> </div> <div class="containerVideoText"> <p>Music track</p> <p>Audio</p> <p>G-Eazy - Me Myself And I (ft. Bebe Rexha) (When its Dark Out In Desc.)</p> </div> </div> <!-- /3rd content --> <!-- /2nd row collection --> </div> </main> <!--END MAIN--> <!--START FOOTER--> <footer> <div class="footer"> <div class="container"> <div class="leftFooter"> <p class="footerHeadNote">Услуги</p> <ul> <li>Production of promotional audio / video clips</li> <li>Copyright: commercials, slogans, presentations, texts</li> <li>Record announcers, actors, singers, music</li> <li>Recording studio for rent</li> <li>Photo Studio for rent</li> </ul> </div> <div class="centerFooter"> <p class="footerHeadNote">Contacts</p> <div class="centerFooterContent"> <img src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992891/location_pi1odn.png"> <p>Address: <p>103 N. Lakeshore Blvd</p> <p>Marquette, Michigan 49855</p> </div> <div class="centerFooterContent"> <img src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992892/phone_eyr6sw.png"> <p>Phone:</p> <p>000-000-000-000</p> </div> <div class="centerFooterContent"> <img src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992891/email_newbiv.png"> <p>Email:</p> <p>mail@mail.com</p> </div> </div> <div class="rightFooter"> <p class="footerHeadNote">Stay with us</p> <a href="#"><img src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992893/vk_gtcsba.png"></a> <a href="#"><img src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992891/facebook_g8nqki.png"></a> <a href="#"><img src="https://res.cloudinary.com/dhcozxcaf/image/upload/v1457992892/twitter_mci3ch.png"></a> </div> </div> </div> <div class="footer-copyright"> <p>Written and coded by <a href="https://www.freecodecamp.com/nesvit" target="_blank">Nesterenko Vitalii</p> </div> </footer> <!--/FOOTER--> <script type="text/javascript" src="js/script.js"></script> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >function showHideVideo(number) { var element = document.getElementsByClassName("containerBigContent"); console.log(element); for (var i = 0; i<element.length; i++) {if (window.CP.shouldStopExecution(1)){break;} if (i==number) continue; element[i].style.display = "none"; console.log(element[i] + "was hided!"); } window.CP.exitedLoop(1); element[number].style.display = (element[number].style.display != "block") ? "block" : "none"; } function showSearch() { var search = document.getElementById("search"); search.style.visibility = (search.style.visibility != "visible") ? "visible" : "hidden"; search.classList.contains('active')? search.classList.remove('active'):search.classList.add('active'); } //# sourceURL=pen.js </script> </body></html>

Related: See More

Argon Design System
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: