"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 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/boylett/pen/BdntA?q=food&limit=all&type=type-pens" /> <script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">.wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(http://c.boylett.uk/images/wallpapers/002.jpg); background-size: 100% 100% } .food { position: absolute !important; top: 50%; left: 50%; margin: -197px 0 0 -310px } .food { position: relative; width: 620px; height: 394px; background: #FFF; border-radius: 2px; box-shadow: 0 2px 15px rgba(0, 0, 0, .5); } .food > .cover { position: relative; height: 260px; background: transparent center no-repeat; background-size: 100% auto; border-radius: 2px 2px 0 0; } .food > .cover > label { position: absolute; top: 22px; left: -33px; height: 33px; padding: 0 30px 0 63px; line-height: 33px; vertical-align: middle; font-family: sans-serif; font-size: 13px; text-transform: uppercase; color: #FFF; text-shadow: 0 1px 2px #000; background: rgba(136, 86, 168, .6); } .food > .cover > label > i { position: absolute; top: 0; left: 0; } .food > .cover > label > i > svg { margin: 8px; } .food > .cover > .download { display: block; position: absolute; bottom: 20px; right: 20px; width: 47px; height: 47px; background: rgba(51, 193, 210, .6); border-radius: 100%; } .food > .cover > .download:hover { background: #33C1D2 } .food > .cover > .download > svg { margin: 12px 10px 0; } .food > .info { position: relative; height: 134px; overflow: hidden; border-radius: 0 0 2px 2px; } .food > .info > .recipe { display: block; position: absolute; top: 0; left: 0; width: 134px; height: 134px; background: #8856A8; font-family: sans-serif; font-size: 14px; color: #FFF; text-transform: uppercase; text-decoration: none; text-align: center; border-radius: 0 0 0 2px; } .food > .info > .recipe:hover { background: #9967B9 } .food > .info > .recipe > i { display: block; margin: 38px 0 15px; } .food > .info > .content { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 154px; font-family: sans-serif; font-size: 14px; color: #888; } .food > .info > .content strong { font-weight: normal; color: #333 } .food > .info > .content .pad-right { padding-right: 20px } .food > .info > .content .border-right { border-right: 1px solid #D9D9D9 } .food > .info > .content .consumers img, .food > .info > .content .consumers span { display: inline-block; width: 32px; height: 32px; margin: 0 2px 0 0; line-height: 32px; vertical-align: middle; border-radius: 100% } .food > .info > .content .consumers span { margin: 0 } .food > .info > .content h1 { margin: 0 0 10px; font-size: 26px; font-weight: normal; color: #333; } .food > .info > .content .stars, .food > .info > .content .stars > em { display: block; width: 99px; height: 18px; margin: 0 auto 7px; text-align: left; background: url(http://c.boylett.uk/generic/image_png_00004.png); } .food > .info > .content .stars > em { width: 99px; height: 18px; margin: 0; background: url(http://c.boylett.uk/generic/image_png_00004.png); background-position: 0 -18px; }</style></head><body> <!-- Hello there! Go check out this wonderful dribbble by Andreea Nicolaescu! http://dribbble.com/shots/1410207-Food-Widget --> <div class="wrapper"> <div class="food"> <div class="cover" style="background-image: url(https://1.bp.blogspot.com/-Y8H-0DWygcI/Uulo6hMuUNI/AAAAAAAALYA/xRbwoLi0qGc/s1600/unsplash_52d5bbef8a613_1.JPG)"> <label> <i> <svg x="0px" y="0px" width="17px" height="17px" > <g> <path d="M 7 1 C 7 1.5523 7.6716 2 8.5 2 C 9.3284 2 10 1.5523 10 1 C 10 0.4477 9.3284 0 8.5 0 C 7.6716 0 7 0.4477 7 1 ZM 7 2 C 7 2 0.6875 2.9375 0 7 C 0 7 -0.1875 9.6875 3 11 C 3 11 4.6875 10.9375 6 9 C 6 9 8.3125 12.8125 11 9 C 11 9 12.1875 10.875 14 11 C 14 11 16.75 10.0625 17 7 C 17 7 16.375 3 10.0625 1.9375 C 10.0625 1.9375 8.5 4.25 7 2 ZM 1 11 L 3 17 L 14 17 L 16 11 C 16 11 13.125 13 11 11 C 11 11 8.875 13.375 6 11 C 6 11 3 13.125 1 11 Z" fill="#ffffff"/> </g> </svg> </i> <font>Macarons</font> </label> <a href="#" class="download"> <svg x="0px" y="0px" width="27px" height="22px" > <g> <path d="M 12.5625 0 C 12.0102 0 11.5625 0.4477 11.5625 1 L 11.565 8.69 L 9.0625 8.6875 L 12 16 L 14 16 L 17.0625 8.6875 L 14.5 8.69 L 14.5 1 C 14.5 0.4477 14.0523 0 13.5 0 L 12.5625 0 ZM 1 19 L 1 14 L 0 14 L 0 19 C 0 20.6569 1.3431 22 3 22 L 24 22 C 25.6569 22 27 20.6569 27 19 L 27 14 L 26 14 L 26 19 C 26 20.1046 25.1046 21 24 21 L 3 21 C 1.8954 21 1 20.1046 1 19 Z" fill="#ffffff"/> </g> </svg> </a> </div> <div class="info"> <a href="#" class="recipe"> <i> <svg x="0px" y="0px" width="26px" height="28px" > <g> <path d="M 8.5 20 L 8.5 21 L 17.5 21 L 17.5 20 L 8.5 20 ZM 8.5 16 L 8.5 17 L 17.5 17 L 17.5 16 L 8.5 16 ZM 8.5 12 L 8.5 13 L 17.5 13 L 17.5 12 L 8.5 12 ZM 20 0 C 19.4477 0 19 0.4477 19 1 L 19 6 C 19 6.5523 19.4477 7 20 7 C 20.5523 7 21 6.5523 21 6 L 21 1 C 21 0.4477 20.5523 0 20 0 ZM 13 0 C 12.4477 0 12 0.4477 12 1 L 12 6 C 12 6.5523 12.4477 7 13 7 C 13.5523 7 14 6.5523 14 6 L 14 1 C 14 0.4477 13.5523 0 13 0 ZM 6 0 C 5.4477 0 5 0.4477 5 1 L 5 6 C 5 6.5523 5.4477 7 6 7 C 6.5523 7 7 6.5523 7 6 L 7 1 C 7 0.4477 6.5523 0 6 0 ZM 15 4 L 18 4 L 18 3 L 15 3 L 15 4 ZM 8 4 L 11 4 L 11 3 L 8 3 L 8 4 ZM 3 4 L 4 4 L 4 3 L 3 3 C 1.3431 3 0 4.3431 0 6 L 0 25 C 0 26.6569 1.3431 28 3 28 L 23 28 C 24.6569 28 26 26.6569 26 25 L 26 6 C 26 4.3431 24.6569 3 23 3 L 22 3 L 22 4 L 23 4 C 24.1046 4 25 4.8954 25 6 L 25 25 C 25 26.1046 24.1046 27 23 27 L 3 27 C 1.8954 27 1 26.1046 1 25 L 1 6 C 1 4.8954 1.8954 4 3 4 Z" fill="#ffffff"/> </g> </svg> </i> <font>Details</font> </a> <div class="content"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="middle" class="pad-right"><strong>Ingredients:</strong></td> <td align="left" valign="middle">sugar, egg whites, butter, salt cappuccino, cinnamon.</td> <td width="20" rowspan="2" class="border-right"> </td> <td width="140" rowspan="2" align="center" valign="middle"> <h1>9.75</h1> <span class="stars"> <em style="width: 91%"></em> </span><br /> <small>(320 ratings)</small> </td> </tr> <tr> <td align="left" valign="middle" class="pad-right"><strong>Consumers:</strong></td> <td align="left" valign="middle" class="consumers"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105584/profile/profile-80_5.jpg" /> <img src="https://d13yacurqjgara.cloudfront.net/users/17164/avatars/small/img.jpg?1391351372" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/57185/profile/profile-80_3.jpg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/profile/profile-80_21.jpg" /> <span>(+20)</span> </td> </tr> </table> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(function() { $('.food > .info > .content .stars') .bind('mousemove', function(e) { var pct = e.pageX - $(this).offset().left; pct = pct / $(this).width() * 100; $(this).find('> em').css('width', pct + '%'); }) .bind('mouseleave', function() { $(this).find('> em').animate({ width: '91%' }, 250); }); }); //# sourceURL=pen.js </script> </body></html>

Questions / Comments: