"bulma "
Bootstrap 4.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/drooJohnsonMT/pen/bgGyvr" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css'> <style class="cp-pen-styles">.is-image-overlay { position: absolute; bottom: 0; top: 0; left: 0; right: 0; -webkit-box-orient: vertical; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .is-image-overlay .image-overlay-body { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 40px 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 0; flex-shrink: 0; } .is-image-overlay .image-overlay-body:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: radial-gradient(ellipse at center, #969696 10%, rgba(150, 150, 150, 0) 100%); mix-blend-mode: darken; width: 100%; height: 100%; } .is-image-overlay .image-overlay-body .container { margin: auto !important; } .is-image-overlay .image-overlay-body h1 { color: white; font-weight: bold; letter-spacing: 1px; mix-blend-mode: normal; } section.section.is-dark { background: #363636; color: #f5f5f5; } section.section.is-dark .title, section.section.is-dark .subtitle { color: #f5f5f5; } section.section.is-dark .card .title, section.section.is-dark .card .subtitle { color: #363636; } .container.is-dark { background-color: #363636; } .container.is-dark .title, .container.is-dark .subtitle { color: #363636; } .background--dark { color: white; } .background--light { color: black; } </style></head><body> <section class="hero is-dark is-medium"> <!-- Hero header: will stick at the top --> <div class="hero-head"> <header class="nav"> <div class="container"> <div class="nav-left"> <a class="nav-item"> LOGO </a> </div> <span class="nav-toggle"> <span></span> <span></span> <span></span> </span> <div class="nav-right nav-menu"> <a class="nav-item is-active"> Home </a> <a class="nav-item"> Examples </a> <a class="nav-item"> Documentation </a> <span class="nav-item"> <a class="button is-primary is-inverted"> <span class="icon"> <i class="fa fa-github"></i> </span> <span>Download</span> </a> </span> </div> </div> </header> </div> <!-- Hero content: will be in the middle --> <div class="hero-body"> <div class="container has-text-centered"> <h1 class="title"> Title </h1> <h2 class="subtitle"> Subtitle </h2> </div> </div> <!-- Hero footer: will stick at the bottom --> <div class="hero-foot"> <nav class="tabs"> <div class="container"> <ul> <li class="is-active"><a>Overview</a></li> <li><a>Modifiers</a></li> <li><a>Grid</a></li> <li><a>Elements</a></li> <li><a>Components</a></li> <li><a>Layout</a></li> </ul> </div> </nav> </div> </section> <!-- Body Content ---> <section class="section"> <div class="container"> <div class="columns"> <!-- LEFT COLUMN ---> <div class="column is-two-thirds"> <div class="columns"> <div class="column is-fullwidth"> <div class="card is-fullwidth"> <div class="card-image"> <img src="https://source.unsplash.com/collection/328373" alt="" /></div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> </div> <div class="columns"> <div class="column is-fullwidth"> <div class="tile is-ancestor is-full-width"> <div class="tile is-parent is-6"> <div class="tile is-child card"> <div class="card-image"> <img src="https://source.unsplash.com/collection/328373/500x500" alt="" /></div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> <div class="tile is-parent is-6"> <div class="tile is-child card"> <div class="card-image"> <img src="https://source.unsplash.com/collection/328373/500x500" alt="" /></div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> </div> <div class="tile is-ancestor is-full-width"> <div class="tile is-parent is-6"> <div class="tile is-child card"> <div class="card-image"> <img src="https://source.unsplash.com/collection/328373/500x500" alt="" /></div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> <div class="tile is-parent is-6"> <div class="tile is-child card"> <div class="card-image"> <img src="https://source.unsplash.com/collection/328373/500x500" alt="" /></div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> </div> <div class="tile is-ancestor is-full-width"> <div class="tile is-parent is-6"> <div class="tile is-child card"> <div class="card-image"> <img src="https://source.unsplash.com/collection/328373/500x500" alt="" /></div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> <div class="tile is-parent is-6"> <div class="tile is-child card"> <div class="card-image"> <img src="https://source.unsplash.com/collection/328373/500x500" alt="" /></div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> </div> <div class="tile is-ancestor is-full-width"> <div class="tile is-parent"> <div class="tile is-child"> <a href="" class="button is-fullwidth is-medium">More</a> </div> </div> </div> </div> </div> </div> <!-- /LEFT COLUMN --> <!-- RIGHT SIDEBAR ---> <div class="column is-one-third"> <div class="columns is-multiline"> <div class="column is-12"> <p class="control has-addons"> <input type="text" class="input is-expanded" placeholder="search" /> <a href="" class="button is-info">search</a> </p> </div> <div class="column is-12"> <div class="card is-fullwidth"> <div class="card-header"> <p class="card-header-title"> Most Popular </p> </div> <div class="card-content"> <article class="media"> <figure class="media-left"> <p>1</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>2</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>3</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>4</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>5</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> </div> </div> </div> <div class="column is-12"> <div class="card is-fullwidth"> <div class="card-image"> <figure class="image is-square"> <img src="https://source.unsplash.com/collection/328373/960x960" alt="" /> <section class="is-image-overlay"> <div class="image-overlay-body"> <div class="image-overlay-text container"> <h1 class="title has-text-centered"> Overlaid </h1> </div> </div> </section> </figure> </div> </div> </div> <div class="column is-12"> <div class="card is-fullwidth"> <div class="card-header"> <p class="card-header-title"> Most Popular </p> </div> <div class="card-content"> <article class="media"> <figure class="media-left"> <p>1</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>2</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>3</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>4</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> <article class="media"> <figure class="media-left"> <p>5</p> </figure> <div class="media-content"> <div class="content"> <p>Article Name</p> </div> </div> </article> </div> </div> </div> </div> </div> <!-- /RIGHT SIDEBAR --> </div> </section> <!-- /Body Content --> <section class="section is-dark"> <div class="container is-dark has-text-centered"> <h1 class="title"> Hero title </h1> <h2 class="subtitle"> Hero subtitle </h2> <hr /> </div> <div class="container"> <div class="tile is-ancestor"> <div class="tile is-parent"> <div class="tile is-child card"> <div class="card-image"> <figure class="image is-square"><img src="https://source.unsplash.com/collection/328373/400x400" alt="" /></figure> </div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> <div class="tile is-parent"> <div class="tile is-child card"> <div class="card-image"> <figure class="image is-square"><img src="https://source.unsplash.com/collection/328373/400x400" alt="" /></figure> </div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> </div></div> </div></section> <section class="section"> <div class="container has-text-centered"> <h1 class="title"> Hero title </h1> <h2 class="subtitle"> Hero subtitle </h2> <hr /> </div> <div class="container"> <div class="tile is-ancestor"> <div class="tile is-parent"> <div class="tile is-child card"> <div class="card-image"> <figure class="image is-square"><img src="https://source.unsplash.com/collection/328373/400x400" alt="" /></figure> </div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> <div class="tile is-parent"> <div class="tile is-child card"> <div class="card-image"> <figure class="image is-square"><img src="https://source.unsplash.com/collection/328373/400x400" alt="" /></figure> </div> <div class="card-content"> <h1 class="title">Featured/Recent Post</h1> <h2 class="subtitle">Byline</h2> </div> </div> </div> </div> </div> </div> </section> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/370425/background-check.min.js'></script> <script >// PUT BACKGROUNDCHECK.JS INITIALIZATION HERE!!! $(document).ready(function(){ var ImageOverlayText = $(".is-image-overlay .title"); var img = document.querySelector('img'); img.crossOrigin = "Anonymous"; //img.src = img.getAttribute('data-src'); BackgroundCheck.init({ targets: '.image-overlay-text' }); }); // //# sourceURL=pen.js </script> </body></html>

Related: See More

Argon Design System

Questions / Comments: