"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/basov/pen/WZaQjr?depth=everything&order=popularity&page=69&q=redux&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">body { font-family: "Proxima Nova"; } .click { cursor: pointer; } a { text-decoration: inherit !important; } .text-decoration { position: relative; display: inline-block; } .text-decoration:after { transition: all 0.3s; position: absolute; content: ""; bottom: 2px; width: 0; height: 1px; background: #000; left: 0; } .text-decoration:hover:after { width: 100%; } .icon-hover { position: relative; } .icon-hover:after { transition: 0.5s; content: ""; position: absolute; border-radius: 100%; width: 50px; height: 50px; left: -17px; opacity: 0; top: -17px; z-index: -1; } .icon-hover:hover:after { opacity: 0.5; transform: scale(1.5); } .vk-social:after { background: #507299; } .instagram-social:after { background: #523f39; } .github-social:after { background: #000; } .full { top: 0; left: 0; position: absolute; content: ""; width: 100%; height: 100%; color: #fff; z-index: 1; } #header .title { margin-top: 70px; margin-bottom: 70px; } #header .title .block-social { font-size: 17px; margin-left: 10px; } #header .title .block-social a { color: #000; margin: 0 11px; font-size: 19px; } #header .title .block-social a:after { left: -18px; } #header .title .block-logo { position: relative; } #header .title .block-logo #logo { left: 0; position: absolute; right: 0; top: -32px; } #header .title .block-logo #logo .logo-title { margin-top: 5px; color: #000; font-size: 13px; font-weight: 700; } #header .title .block-search { font-size: 19px; margin-left: -10px; } #header .title .block-search i { margin: 0 11px; position: relative; } #header .title .block-search i:after { background: #9c9191; } #header .title .block-search i.fa-rss:after { left: -20px; } #header .menu { border-top: 1px solid #dadcda; } #header .menu .navbar { width: 100%; } #header .menu .navbar > li { display: inline-block; float: none; position: relative; } #header .menu .navbar > li a { padding: 25px 20px; color: #000; font-size: 15px; font-weight: 600; text-transform: uppercase; position: relative; } #header .menu .navbar > li a:after { left: 0; transition: all 0.5s; content: ""; position: absolute; top: -2px; width: 100%; height: 0; background: #f7c32e; } #header .menu .navbar > li a:hover:after { height: 3px; } #header .menu .navbar > li a.home { margin-right: 10px; color: #000; font-size: 18px; padding: 25px 20px; } #review { transition: all 0.5s; width: 100%; position: relative; height: 480px; } #review .background { background-position: 50% 50% !important; background-size: cover !important; width: 100%; height: 100%; position: relative; } #review .full { background: rgba(0, 0, 0, 0.75); color: #fff; } #review .full .block-left { position: absolute; bottom: 17%; left: 5%; padding: 30px; right: 5%; } #review .full .block-left .subject { font-size: 35px; font-weight: 700; margin-top: 11px; width: 90%; } #review .full .block-left .categoria { font-size: 13px; color: rgba(255, 255, 255, 0.8); font-weight: 700; border: 2px solid #fff; padding: 5px 13px; display: inline-block; margin-bottom: 0px; transition: all 0.5s; text-transform: uppercase; } #review .full .block-left .date { font-size: 13px; color: rgba(255, 255, 255, 0.8); } #review .full:hover .categoria { border-color: #f7c32e; } .galeria { background: rgba(193, 193, 193, 0.11); padding: 0; padding-bottom: 30px; } .galeria .container { padding: 0; } .galeria .container .title { transition: all 0.5s; margin: 0; font-size: 30px; margin: 40px 0; padding: 0; color: #D1D1D1; display: table; } .galeria .container .title:hover { color: #afadad; } .galeria .container .title:after { background: #f7c32e; height: 2px; } .galeria .container .block { width: calc(33.33% - 20px); display: inline-block; position: relative; margin: 0; } .galeria .container .block.b2 { margin-left: 25px; margin-right: 25px; } .galeria .container .block.b2 img { margin-top: 40px; } .galeria .container .block img { margin-top: -40px; width: 100%; height: 100%; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); transition: all 0.5s; } .galeria .container .block img:hover { transform: scale(0.98); box-shadow: none; } #footer { background: #252525; } @media screen and (min-width: 1600px) { .container { width: 1440px; } } </style></head><body> <link href="https://meduza.io/assets/fonts/fonts.8293f44692dcf4bc8bdd2e3ddbdfa8bc.css" rel="stylesheet"/> <div id="header"> <div class="container"> <div class="block-center row title"> <div class="text-left col-md-4 block-social"> <a href="https://vk.com/m.basov96"><i class="fa fa-vk icon-hover vk-social"></i></a><a href="https://instagram.com/m.basov96"><i class="fa fa-instagram icon-hover instagram-social"></i></a><a href="https://github.com/michael190996"> <i class="fa fa-github icon-hover github-social"> </i></a></div> <div class="text-center col-md-4 block-logo"> <a id="logo" href="/"><img src="https://moustache.pixelthrone.info/01/wp-content/uploads/sites/2/2017/01/brand-03.png"/> <div class="logo-title">Goods & LifeStyle</div></a></div> <div class="text-right col-md-4 block-search"> <i class="fa fa-search click icon-hover"></i><i class="fa fa-rss click icon-hover"></i></div> </div> <div class="menu navbar-default"><a id="menu"></a> <ul class="nav navbar-nav navbar text-center"> <li><a class="home" href="/"><i class="fa fa-home"></i></a></li> <li><a href="#menu">обо мне </a></li> <li><a>работа</a></li> <li><a>трипы</a></li> <li><a>арт</a></li> <li><a>заметки</a></li> <li><i class="glyphicon glyphicon-option-horizontal click"></i></li> </ul> </div> </div> </div> <div id="content"> <div id="review"> <div class="background" style="background: url(https://pp.userapi.com/c621705/v621705561/f0f3/NtCypOuJHrU.jpg)"></div><a class="full" href="n"> <div class="text-left block-left"> <div class="categoria">трипы</div> <h1 class="subject">О Flow и о том, как это было <span style="font-weight: normal"></span></h1> <div class="date">13 дней назад</div> </div></a> </div> <div class="container"> <div class="news row"> <div class="block">testdx</div> </div> </div> <div id="review"> <div class="background" style="background: url(https://dcv19h61vib2d.cloudfront.net/thumbs/angular-1-x-angular-1-x-redux-persist-state-with-an-application-store/angular-1-x-angular-1-x-redux-persist-state-with-an-application-store.jpg)"></div><a class="full" href="n"> <div class="text-left block-left"> <div class="categoria">заметки</div> <h1 class="subject">react/angular</h1> <div class="date">5 дней назад</div> </div></a> </div> <div class="galeria"> <div class="container"><a class="text-decoration title" href="">Клик ту Инстаграмм, товарищ!</a><a class="block" href=""><img src="https://scontent-waw1-1.cdninstagram.com/t51.2885-15/e35/20838179_474267119598151_2493869461887516672_n.jpg"/></a> <div class="block b2"><img src="https://scontent-waw1-1.cdninstagram.com/t51.2885-15/e35/20969293_168929633665403_7392832713029320704_n.jpg"/></div> <div class="block"><img src="https://scontent-waw1-1.cdninstagram.com/t51.2885-15/e35/20838179_474267119598151_2493869461887516672_n.jpg"/></div> <div class="block"><img src="https://scontent-waw1-1.cdninstagram.com/t51.2885-15/e35/20838179_474267119598151_2493869461887516672_n.jpg"/></div> <div class="block b2"><img src="https://scontent-waw1-1.cdninstagram.com/t51.2885-15/e35/20838179_474267119598151_2493869461887516672_n.jpg"/></div> <div class="block b3"><img src="https://scontent-waw1-1.cdninstagram.com/t51.2885-15/e35/20838179_474267119598151_2493869461887516672_n.jpg"/></div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="block col-md-6">footerd</div> </div> </div> </div> </body></html>

Related: See More

Material Kit
social network layout - bootstrap 4
Zigzag Timeline Layout
Multi Select Tiled Layout

Questions / Comments: