"layout"
Bootstrap 4.0.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 lang='en' 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/qreativelife/pen/XegqML?depth=everything&order=popularity&page=72&q=generate&show_forks=false" /> <style class="cp-pen-styles">/* Universal */ * { margin: 0; padding: 0; } body { background-color: #e4ecee; } .likes { font-family: 'Open Sans', sans-serif; color: #dadfd8; font-size: 8px; position: absolute; bottom: 17px; left: 16px; } .likes:before { content: '\2665'; color: #dadfd8; padding-right: 6px; } .clear { clear: both; } /* Navigation */ header { margin: 60px 0px; } .navbar { display: inline-block; width: 100%; } .hamburger { float: left; position: relative; top: 5px; } .bar { border-radius: 6px; } .firstLine { background-color: #7e8186; width: 17px; height: 3px; margin-bottom: 2px; } .secondLine { background-color: #7e8186; width: 10px; height: 3px; margin-bottom: 2px; } .thirdLine { background-color: #7e8186; width: 14px; height: 3px; } .search { float: right; position: relative; bottom: 20px; } .searchIcon { border: 2px solid #7e8186; width: 11px; height: 11px; border-radius: 50%; } .tail { border-radius: 8px; position: relative; left: 11px; bottom: 2px; content: ''; height: 3px; width: 5px; background-color: #7e8186; -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg); /* Standard syntax */ } #search-bar { width: 75%; padding: 15px; float: left; } #submit { width: 25%; padding: 15px; float: right; } .textLogo { text-transform: uppercase; color: #7e8186; text-align: center; font-family: 'Oswald', sans-serif; } /* Layout */ .container { max-width: 600px; margin: 0 auto; } /* Cards */ .card { box-shadow: 2px 0px 120px -6px rgba(0,0,0,0.17); } .card-long { position: relative; background-color: black; width: 335px; height: 150px; float: left; } .card-reg { position: relative; background-color: #000; width: 240px; height: 150px; float: left; } .card-xl { position: relative; background-color: #000; width: 360px; height: 150px; float: left; } .card-sm { position: relative; background-color: #000; width: 215px; height: 150px; float: left; } /* Card Styles */ .card-long-bg { position: relative; width: 150px; height: 150px; background-color: #000; float: left; background: url('https://images.unsplash.com/photo-1472060650787-9726edbd6bd4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=202fd86f216a647de9e93b27f9dbb4e3'); background-size: cover; } .card-long-bg-two { width: 150px; height: 150px; background-color: #000; float: left; background: url('https://images.unsplash.com/photo-1455463640095-c56c5f258548?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=32f066deb078dd3ebfda8a03960aedaa'); background-size: cover; background-position: 100% 0; } .card-long-block { background-color: #fff; width: 185px; height: 150px; float: right; } .card-long-header { font-family: 'Playfair Display', sans-serif; line-height: 22px; font-weight: bold; padding-top: 17px; padding-left: 17px; } .card-reg-left-reg { font-family: 'Playfair Display', sans-serif; line-height: 22px; font-weight: bold; padding: 20px 0px 25px 17px; width: 130px; } .card-reg-left-xl { font-family: 'Playfair Display', sans-serif; line-height: 22px; font-weight: bold; padding: 20px 0px 25px 17px; width: 130px; } .card-reg-left-sm { font-family: 'Playfair Display', sans-serif; color: #fff; line-height: 22px; font-weight: bold; padding: 20px 0px 25px 17px; width: 130px; } .card-reg-header { font-family: 'Playfair Display', sans-serif; text-align: center; color: white; font-weight: 700; position: relative; top: 33%; padding: 0px 25px; line-height: 24px; } .card-long-block p { font-family: 'Roboto', sans-serif; font-size: 8px; padding-top: 15px; padding-left: 17px; padding-right: 17px; line-height: 12px } .card-reg-bg { background: url('https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=4093955224092fcca5756b3d1c8aa6c8') no-repeat; background-position: 0% 100%; background-size: 200%; } .card-xl-bg { background: url('https://images.unsplash.com/photo-1434648913092-5063e80c80f1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=af8e03920b1759fec47dcc12a98276f0') no-repeat; background-position: 38% 70%; } .card-reg-overlay { background: linear-gradient( rgba(204, 58, 77, 0.85), rgba(229, 109, 99, 0.85) ), url('https://images.unsplash.com/photo-1457084103532-1bc117b6fd95?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=d58281ef47f6bd8d0559f4a7a40d7d1a') left top no-repeat; background-size: 140%; background-position: 50% 35%; } .card-sm-bg { background: url('https://images.unsplash.com/photo-1457038398933-c7f0de7ee615?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=38132e6dfdd465fd5c7e699ec7698078 ') no-repeat; background-size: 190%; background-position: 20% 50%; } .l-spacing { margin-left: 25px; } .r-spacing { margin-right: 25px; } .secondRow, .thirdRow{ margin-top: 20px; } /* Media Queries */ @media screen and (max-width: 615px) { .container { width: 90%; } .card { width: 100%; margin: 10px 0 !important; } .card-reg-header { top: 40%; } .card-long-bg, .card-long-bg-two { width: 45%; } .card-long-block { width: 55%; } .l-spacing, .r-spacing, .secondRow, .thirdRow{ margin: 0; } } .credits-wrap { font-family: 'Open Sans', sans-serif; text-align: center; padding-top: 10px; } .credit { text-decoration: none; color: #000; font-weight: bold; }</style></head><body> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto:400,700" rel="stylesheet"> <div id="parent" class="container"> <!-- Navigation --> <header> <div class="navbar"> <a id="menu" href="#"> <div class="hamburger"> <div class="bar firstLine"></div> <div class="bar secondLine"></div> <div class="bar thirdLine"></div> </div> </a> <div class="logo"> <div class="textLogo">Curated News</div> </div> <a id="search" href="#"> <div class="search"> <div class="searchIcon"></div> <div class="tail"></div> </div> </a> </div> <div id="searchBar"> <input id="search-bar" placeholder="Search feed" type="search" style="display: none;"/> <input id="submit" type="submit" style="display: none;"/> </div> </header> <!-- Card Layout --> <div class="cardLayout"> <div class="firstRow"> <div class="card card-long"> <div class="card-long-bg"> <a class="likesCounter" href="#"> <span class="likes" id="likes1">3,289</span> </a> </div> <div class="card-long-block"> <div class="card-long-header">Coventry City Guide Including Coventry Hotels</div> <p>Planning a vacation to Europe? No doubt you have certain expectations about your upcoming journey.</p> </div> </div> <div class="card l-spacing card-reg card-reg-overlay"> <div class="card-reg-header">Always Look On The Bright Side Of Life</div> <a class="likesCounter" href="#"> <span class="likes" id="likes2">2,569</span> </a> </div> </div> <div class="clear"></div> <div class="secondRow"> <div class="card card-reg card-reg-bg"> <div class="card-reg-left-reg">Creating Remarkable Poster Prints Through 4 Color</div> <a class="likesCounter" href="#"> <span class="likes" id="likes3">582</span> </a> </div> <div class="card card-long l-spacing"> <div class="card-long-bg-two"> <a class="likesCounter" href="#"> <span class="likes" id="likes4">859</span> </a> </div> <div class="card-long-block"> <div class="card-long-header">Become A Travel <br>Pro In One Easy Lesson</div> <p>When choosing a static caravan you will probably look for the holiday park which meets your requirements and then...</p> </div> </div> </div> <div class="clear"></div> <div class="thirdRow"> <div class="card r-spacing card-xl card-xl-bg"> <div class="card-reg-left-xl">A Great Way To Generate All The Motivation You Need To Get Fit</div> <a class="likesCounter" href="#"> <span class="likes" id="likes5">734</span> </a> </div> <div class="card card-sm card-sm-bg"> <div class="card-reg-left-sm">Great Benefits Of Natural Skin Care Products</div> <a class="likesCounter" href="#"> <span class="likes" id="likes6">582</span> </a> </div> </div> </div> </div> <div class="clear"></div> <div class="credits-wrap"> Design by <a class="credit" href="https://dribbble.com/shots/2572535-Curated-For-You-Day-91-dailyui" target="_blank">Sergiu Radu</a> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >'use strict'; (function(){ //Cache elements for use var hamburger = document.getElementById('menu'); var s = document.getElementById('search'); var likes = document.getElementById('likesCounter'); var submit = document.getElementById('submit'); var likes = document.getElementById('parent'); //Event Handlers var search = s.addEventListener('click', searchHandler); var submitVal = submit.addEventListener('click', onSubmit); var likesEvent = likes.addEventListener('click',likesHandler); //Handler Logic function searchHandler(e) { var sr = document.getElementById('search-bar'); if(sr.style.display === 'none' && submit.style.display === 'none') { sr.style.display = 'block'; submit.style.display = 'block'; } else { sr.style.display = 'none'; submit.style.display = 'none'; } } function onSubmit() { var inputVal = document.getElementById('search-bar').value; var arrList = []; document.getElementById('search-bar').value = ""; } function likesHandler(e) { e.preventDefault(); if(e.target.nodeName === "SPAN") { var currentNum = e.target.innerText; var currentId = e.target.id; likesIncrement(currentNum, currentId); } } function likesIncrement(currentNum, currentId) { currentNum = currentNum.replace(/,/g, ""); currentNum = parseInt(currentNum); currentNum++; currentNum = String(currentNum); currentNum = numberWithCommas(currentNum); document.getElementById(currentId).innerText = currentNum; } function numberWithCommas(likes) { return likes.replace(/(.)(?=(.{3})+$)/g,"$1,"); } }()); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: