"card"
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 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/davidkpiano/pen/gapLgq?depth=everything&order=popularity&page=19&q=grid&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">@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,600); .baseline-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; opacity: 0; -webkit-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; } .baseline-grid:hover { opacity: 1; } .guide { margin-bottom: 6.25rem; } .guide, .guide:before, .guide:after { height: 1.25rem; width: 100%; outline: 1px solid turquoise; } .guide:before, .guide:after { content: ''; display: block; position: absolute; top: 200%; } .guide:after { top: 400%; } .recipe-container { font-family: Raleway, sans-serif; font-weight: 400; width: 750px; height: 440px; background-color: white; overflow: hidden; -webkit-box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1); } .recipe-container:hover > .baseline-grid { opacity: 1; } .recipe-image { position: absolute; width: auto; height: 100%; left: 0; top: 0; } .recipe-content { position: absolute; width: 50%; height: 100%; right: 0; top: 0; padding: 2.5rem 1rem; } .heading-2 { font-size: 0.75rem; line-height: 1.25rem; font-weight: 400; text-transform: uppercase; margin: 0; letter-spacing: 4px; color: #999; } .heading-1 { font-size: 1.778rem; line-height: 2.5rem; font-weight: 200; text-transform: uppercase; letter-spacing: 1px; margin: 1.25rem 0; } .paragraph { font-size: 1rem; line-height: 1.25rem; margin: 0 0 1.25rem 0; } .recipe-list { list-style-type: none; padding: 0; margin: 0; } .recipe-list.meta > .recipe-item { display: inline-block; padding-right: 2rem; } .recipe-item { padding: 0 1rem; } .recipe-item:first-child { padding-left: 0; } .recipe-item > .recipe-value { font-size: 1.333rem; line-height: 2.5rem; font-weight: bold; } .recipe-item > .recipe-text { font-size: 0.75rem; line-height: 1.25rem; } .recipe-item + .recipe-item { border-left: 1px solid #ccc; } .recipe-stars { line-height: 2.5rem; margin: 1.25rem 0; font-size: 1rem; line-height: 2.5rem; } .recipe-star { height: auto; width: auto; display: inline-block; } .recipe-star:before { content: '\2605'; color: gold; } .recipe-star.inactive:before { color: gray; } .recipe-ratings { color: gray; margin: 0 0.5rem; } .recipe-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #5ad485; color: white; border: none; height: 2.5rem; padding: 0 1rem; border-radius: 1.25rem; font-size: 0.75rem; } .recipe-button.transparent { background-color: transparent; color: gray; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #e1e1e1; } </style></head><body> <div class="recipe-container"> <div class="baseline-grid"> <div class="guide"></div> <div class="guide"></div> <div class="guide"></div> <div class="guide"></div> <div class="guide"></div> <div class="guide"></div> <div class="guide"></div> <div class="guide"></div> </div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/C6BM7hh.jpg" alt="" class="recipe-image" /> <div class="recipe-content"> <h2 class="heading-2">Healthy Meals</h2> <h1 class="heading-1"> Smoked Salmon<br> & Bacon </h1> <p class="paragraph"> With Bread and Roasted Berries </p> <ul class="recipe-list meta"> <li class="recipe-item"> <div class="recipe-value">40</div> <div class="recipe-text">Mins</div> </li> <li class="recipe-item"> <div class="recipe-value">225</div> <div class="recipe-text">Nutrition</div> </li> <li class="recipe-item"> <div class="recipe-value">6</div> <div class="recipe-text">Ingredients</div> </li> </ul> <div class="recipe-stars"> <span class="recipe-star"></span> <span class="recipe-star"></span> <span class="recipe-star"></span> <span class="recipe-star"></span> <span class="recipe-star inactive"></span> <span class="recipe-ratings">29</span> </div> <button class="recipe-button"> View Recipe </button> <button class="recipe-button transparent"> Add to Collection </button> </div> </div> </body></html>

Related: See More

Rubik Presentation Page
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: