Bootstrap Snippet box using HTML

"box"
Bootstrap 3.0.0 Snippet by evarevirus

3.0.0

740 1 Fav

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>  <!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/andybarefoot/pen/GMyREX?depth=everything&order=popularity&page=3&q=grid&show_forks=false" /> <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto|Slabo+27px" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles"> body { margin: 50px; color: #16302B; background-color: #A3A866; font-family: 'Lato', sans-serif; } h2, h3 { font-family: 'Montserrat', sans-serif; } h1 { font-family: 'Slabo 27px', sans-serif; color: #DAFFFD; text-align: center; font-size: 2.5em; margin: 0 0 65px 0; } h2 { font-size: 1.6em; margin: 0 30px 5px 30px; text-transform: uppercase; } h3 { font-size: 0.9em; margin: 0 30px 5px 30px; text-transform: uppercase; } p { margin: 0 30px 0 30px; } #grid { margin: auto; width: 90vw; display: grid; grid-row-gap: 15px; grid-template-columns: repeat(auto-fill, minmax(350px,1fr)); } .smallgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .textHolder { position: absolute; top: 50%; transform: translateY(-50%); } .odd > .desc{ background-color: #DAFFFD; z-index: 4; width: 112%; margin-left: -10.5%; transform: perspective(1000px) rotateY(-30deg); grid-column: 1 / 3; grid-row: 1 / 2; text-align: right; } .odd > .desc > .textHolder{ right: 0; } .even > .desc{ z-index: 2; background-color: #6BC1BC; width: 112%; transform: perspective(1000px) rotateY(30deg); grid-column: 2 / 4; grid-row: 1 / 2; } .even > .photo{ z-index: 3; width: 150%; margin-left: -23%; transform: perspective(1000px) rotateY(-45deg); grid-column: 1 / 2; grid-row: 1 / 2; } .odd > .photo{ z-index: 5; width: 150%; margin-left: -25%; transform: perspective(1000px) rotateY(45deg); grid-column: 3 / 4; grid-row: 1 / 2; } img { display: block; width: 100%; } </style></head><body>  <h1>Pitchfork's Top 40 Albums of the 1990s</h1> <div id="grid"> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>001: Radiohead</h3> <h2>OK Computer</h2> <p>[1997 / Capitol]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/01.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>002: My Bloody Valentine</h3> <h2>Loveless</h2> <p>[1991 / Creation]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/02.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>003: The Flaming Lips</h3> <h2>The Soft Bulletin</h2> <p>[1999 / Warner Bros]</p></div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/03.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>004: Neutral Milk Hotel</h3> <h2>In the Aeroplane Over the Sea</h2> <p>[1998 / Merge]</p></div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/04.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>005: Pavement</h3> <h2>Slanted and Enchanted</h2> <p>[1992 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/05.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>006: Nirvana</h3> <h2>Nevermind</h2> <p>[1991 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/06.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>007: DJ Shadow</h3> <h2>...Entroducing</h2> <p>[1996 / Mo'Wax]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/07.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>008: Pavement</h3> <h2>Crooked Rain, Crooked Rain</h2> <p>[1994 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/08.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>009: Bonnie "Prince" Billy</h3> <h2>I See a Darkness</h2> <p>[1999 / Palace]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/09.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>010: Guided By Voices</h3> <h2>Bee Thousand</h2> <p>[1994 / Scat]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/10.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>011: Talk Talk</h3> <h2>Laughing Stock</h2> <p>[1991 / Polydor]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/11.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>012: Slint</h3> <h2>Spiderland</h2> <p>[1991 / Touch & Go]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/12.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>013: Nirvana</h3> <h2>In Utero</h2> <p>[1993 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/13.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>014: Belle And Sebastian</h3> <h2>If You're Feeling Sinister</h2> <p>[1996 / Jeepster]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/14.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>015: Radiohead</h3> <h2>The Bends</h2> <p>[1995 / Capitol]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/15.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>016: The Dismemberment Plan</h3> <h2>Emergency & I</h2> <p>[1999 / DeSoto]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/16.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>017: Public Enemy</h3> <h2>Fear of a Black Planet</h2> <p>[1990 / Def Jam]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/17.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>018: Smashing Pumpkins</h3> <h2>Siamese Dream</h2> <p>[1993 / Virgin]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/18.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>019: Beck</h3> <h2>Odelay</h2> <p>[1996 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/19.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>020: Björk</h3> <h2>Post</h2> <p>[1995 / Elektra]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/20.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>021: Björk</h3> <h2>Homogenic</h2> <p>[1997 / Elektra]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/21.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>022: Built To Spill</h3> <h2>Perfect From Now On</h2> <p>[1997 / Warner Bros.]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/22.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>023: The Beta Band</h3> <h2>The Three EPs</h2> <p>[1999 / Astralwerks]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/23.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>024: Built To Spill</h3> <h2>There's Nothing Wrong With Love</h2> <p>[1994 / Up]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/24.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>025: Yo La Tengo</h3> <h2>I Can Hear the Heart Beating As One</h2> <p>[1997 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/25.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>026: Weezer</h3> <h2>Weezer (Blaues Album)</h2> <p>[1994 / DGC]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/26.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>027: Guided By Voices</h3> <h2>Alien Lanes</h2> <p>[1995 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/27.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>028: Pixies</h3> <h2>Bossanova</h2> <p>[1990 / 4AD]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/28.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>029: Modest Mouse</h3> <h2>The Lonesome Crowded West</h2> <p>[1997 / Up]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/29.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>030: Liz Phair</h3> <h2>Exile In Guyville</h2> <p>[1993 / Matador]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/30.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>031: Wilco</h3> <h2>Summerteeth</h2> <p>[1999 / Reprise Records]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/31.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>032: The Notorious B.I.G.</h3> <h2>Ready to Die</h2> <p>[1994 / Bad Boy]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/32.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>033: Nas</h3> <h2>Illmatic</h2> <p>[1994 / Columbia]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/33.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>034: Beastie Boys</h3> <h2>Check Your Head</h2> <p>[1992 / Grand Royal]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/34.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>035: Boards Of Canada</h3> <h2>Music Has the Right to Children</h2> <p>[1998 / Warp]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/35.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>036. Wu-Tang Clan</h3> <h2>Enter the Wu-Tang (36 Chambers)</h2> <p>[1993 / Loud]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/36.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>037: The Magnetic Fields</h3> <h2>69 Lovesongs</h2> <p>[1999 / Merge]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/37.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>038: Jesus Lizard</h3> <h2>Goat</h2> <p>[1991 / Touch & Go]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/38.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>039: Olivia Tremor Control</h3> <h2>Dusk at Cubist Castle</h2> <p>[1996 / Flydaddy]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/39.jpg"></div> </div> <div class="smallgrid"> <div class="desc"> <div class="textHolder"> <h3>040: Aphex Twin</h3> <h2>The Richard D. James Album</h2> <p>[1996 / Warp]</p> </div> </div> <div class="photo"><img src="https://andybarefoot.com/codepen/images/albums/40.jpg"></div> </div> </div>  <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >function alternate(){ colsno = window.getComputedStyle(document.getElementById("grid")).gridTemplateColumns.split(' ').length; smallgrids = document.getElementsByClassName("smallgrid"); for(i=0;i<smallgrids.length;i++){if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} thisrow = Math.floor(i/colsno); thiscol = i%colsno; if((thisrow+thiscol)%2==1){ smallgrids[i].setAttribute('class', 'smallgrid even'); }else{ smallgrids[i].setAttribute('class', 'smallgrid odd'); } } window.CP.exitedLoop(1); window.CP.exitedLoop(1); } window.onload = alternate(); window.addEventListener("resize", alternate); //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Light Bootstrap Dashboard

Vue Light Bootstrap Dashboard

Questions / Comments:

Posting GuidelinesFormatting