"grid"
Bootstrap 3.0.0 Snippet by Nemra1

<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/finnhodgkin/pen/kkwRBk?limit=all&page=84&q=paint" /> <style class="cp-pen-styles">body, html {margin: 0;padding:0;height: 100%; font-family: 'Century Gothic', sans-serif; font-size: .9vw; background-color: #f1f1f1; } #wrapper{ width: 77%; margin-left: 15%; margin-right: 15%; overflow: hidden;} /*--------------TITLETEXT---------------*/ .title{ font-size: 2.1vw; text-shadow: none; margin-top: 22.5%; padding-top: 0%;} h1 {margin: 0;padding: 0;font-weight: normal; font-size: 4vw;} h2 {font-weight: normal;margin: 0;text-align: left; padding-left: 10.5%;padding-right: 5%; font-size: 1.7vw; text-shadow: .5px .5px #3080d2;} h3 {margin: 0;padding: 0;font-weight: normal; font-size: 1.1vw; text-shadow: .3px .3px #000;} /*--------------MAINBOXES---------------*/ .tinyBox{background-color: #d9dae9;overflow: hidden;float: left;position: relative; width: 10%; margin: 1%; border-radius: 3px;} .smallBox{float: left;position: relative;overflow: hidden;background-color: #d9dae9; width: 22%; margin: 1%; border-radius: 3px;} .bigBox{ width: 46%; background-color: #d9dae9; overflow: hidden; margin: 1%; float: left; position: relative; border-radius: 3px; } /*--------------IMAGEBOX---------------*/ .imageBox{position: relative; width: 0px; height: 0px;z-index: 15; float: left; background-color: #000;} .timage{ position: absolute; z-index: 15; display: none; background:url('https://finn-hodgkin-design.appspot.com/images/faces.jpg') center center no-repeat #d9dae9; background-size: 100% 100%; } .closeTimage{text-align:center;padding-top:4.5%;color:#9194a6;font-size:135%;} .timagea{background:url('https://finn-hodgkin-design.appspot.com/images/morgan.jpg') center center no-repeat #d9dae9; background-size: 100% 100%;}.timageb{background:url('https://finn-hodgkin-design.appspot.com/images/al.jpg') center center no-repeat #d9dae9; background-size: 100% 100%;} .active-slide{ display: block; } /*-------TEXT-BOXES-AND-HOVERS---------*/ .textSlide{ top:0;left:0; position: absolute; margin-left:-105%; transition: all .6s ease; margin-top: 47%; width: 90%; height: 48%; padding: 5%; background: rgba(9,13,37,0.85); } .textLine{ top:0;left:0; position: absolute; margin-left:105%; transition: all .6s ease; width: 100%; margin-top: 43%; height: 4%; background: #f1f1f1; } .slideCenter{margin-top:52.5%;} .lineCenter{margin-top:48.5%;} .slideRight{ margin-left: 105%; } .lineRight{ margin-left:-105%; } .slideTiny{height: 90%;margin: 0;opacity:0;} .slideBot{margin-top:105%;}.slideTop{margin-top:-105%;} .textSlideBig{ top:0;left:0; position: absolute; background: rgba(9,13,37,0.85); height: 35%; width: 39%; padding: 5%; margin-top: -105%; transition: all .6s ease; } .textLineBig{ top:0;left:0;position: absolute; background: #f1f1f1; height: 56%; width: 2%; margin-left: 49%; margin-top: 105%; transition: all .6s ease; } .textLineBigHR{ top:0;left:0;position: absolute; background: #f1f1f1; height: 4%; width: 51%; margin-left: 105%; margin-top: 26.5%; transition: all .6s ease; } .boxNoHover{top:0;left:0;position:absolute;padding:0;width: 100%;height: 100%;opacity:0;} .boxHover{top:0;left:0;position:absolute;padding:0;width: 100%;height: 100%;opacity:0;background: rgb(38,40,43);transition: all 0.5s ease;} .smallBox:hover .boxHover, .bigBox:hover .boxHover, .tinyBox:hover .boxHover{margin:0;opacity:.3;} .smallBox:hover .textSlide, .bigBox:hover .textSlide, .smallBox:hover .textLine, .bigBox:hover .textLine{margin-left: 0;} .bigBox:hover .textSlideBig, .bigBox:hover .textLineBig{margin-top: 0;} .bigBox:hover .textLineBigHR{margin-left: 0;} .tinyBox:hover .slideTiny{margin: 0;opacity:1;} /*----------------CLEAR-AND-MISC--------------------*/ .clear{ clear: both;margin: 0;padding: 0;} a{color: #dee0ff;} /*-----------MOBILE AND SMALLER SCREEN--------------*/ @media screen and (max-width: 1200px) { #wrapper{width:98%;margin-left:1%;margin-right:1%;} .tinyBox{width:24%; margin:.5%;} .bigBox{width:99%; margin:.5%;} .smallBox{width:49%; margin:.5%;} .textSlideBig{width:39.5%;} .textLine{height:2%; margin-top: 45%}.textLineBig{width:1%;margin-left:49.5%;}.textLineBigHR{height:2%;width:50.5%;margin-top: 27.8%;} body{font-size: 2.2vw;} h2{font-size: 5.5vw;} .title{font-size: 5.8vw;} h3{font-size: 2.8vw;} .timage{margin-left:.5%; width: 99%; margin-right:.5%; float: left;} .clearBig{clear:both;} .slideCenter{margin-top:52%;} .lineCenter{margin-top:50%;} } @media screen and (max-width: 450px) { #hiddenMobileTest{float:left;} }</style></head><body> <title>Finn Hodgkin Design</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div id="wrapper"> <div class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/LogoWhite.svg') center center no-repeat #d9dae9;background-size: 75% 75%;"> <div class="boxNoHover"> <div style="padding-top:50%;padding-top:50%;"></div> </div> </div> <a href="https://finn-hodgkin-design.appspot.com/DraftGIHome/GI-draft.html" target="_blank"> <div class="smallBox" class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/GI-Draft.jpg') center center no-repeat #d9dae9; background-size: 124% 124%;"> <div class="boxHover"></div> <div class="textLine lineLeft"></div> <div class="textSlide slideLeft"><h3 style="color:#ec008c;">Global Initiative</h3>2016<br/><br/>First draft pre-code redesign of the Global Initiative website.</div> </div> </a> <a href="https://www.kevinhope.co.uk/" target="_blank"> <div class="bigBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/kevin.jpg') center center no-repeat #fff;background-size: 100% 100%;"> <div class="boxHover"></div> <div class="textLineBig"></div> <div class="textSlideBig"><h3 style="color:#ec008c;">Kevin Hope</h3>2009<br/><br/>Portfolio site for the illustrator and sculptor Kevin Hope.</div> <div class="textLineBigHR"></div> </div> </a> <a href="http://www.endcorporalpunishment.org/interactive-map" target="_blank"> <div class="bigBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/map.jpg') center center no-repeat #000;background-size: 100% 100%;"> <div class="boxHover"></div> <div class="textLineBig" style="height:100%;"></div> <div class="textSlideBig" style="height:90%;"><h3 style="color:#ec008c;">Interactive map</h3>2016<br/><br/>An interactive map of the world displaying the current status of the law on corporal punishment in every state and territory. <br/><br/>Design and implementation by Finn Hodgkin.</div> </div> </a> <div class="clearBig"></div> <div class="imageBox"> <div class="timage"> <p class="closeTimage">click to close</p> </div> </div> <a href="https://www.rosasquith.co.uk/" target="_blank"> <div class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/ros.jpg') center center no-repeat #d9dae9;background-size: 100%;"> <div class="boxHover"></div> <div class="textLine lineCenter"></div> <div class="textSlide slideCenter"><h3 style="color:#ec008c;">Ros Asquith</h3>2015<br/><br/>Migrated site to Wordpress. Full re-design currently in progress.</div> </div> </a> <a href="https://www.instagram.com/finnstagram90/" target="_blank"> <div class="tinyBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/insta.png') center center no-repeat #d9dae9; background-size: 75% 75%;"> <div class="boxHover"></div> <div class="textSlide slideTiny"><h3 style="text-align: center; color:#ec008c;"><br /><br />Instagram</h3></div> </div> </a> <a href="" class="image3"> <div class="tinyBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/al.jpg') center center no-repeat #d9dae9; background-size: 90% 90%;"> <div class="boxHover"></div> <div class="textSlide slideTiny"><h3 style="text-align: center; color:#ec008c;"><br /><br />View</h3></div> </div> </a> <a href="https://codepen.io/finnhodgkin/" target="_blank"> <div class="tinyBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/codepen.png') center center no-repeat #d9dae9; background-size: 75% 75%;"> <div class="boxHover"></div> <div class="textSlide slideTiny"><h3 style="text-align: center; color:#ec008c;"><br /><br />Codepen</h3></div> </div> </a> <a href="" class="image2"> <div class="tinyBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/morgan.jpg') center center no-repeat #d9dae9; background-size: 90% 90%;"> <div class="boxHover"></div> <div class="textSlide slideTiny"><h3 style="text-align: center; color:#ec008c;"><br /><br />View</h3></div> </div> </a> <div class="clear"></div> <a href="https://finn-hodgkin-design.appspot.com/images/LeafletCAU.pdf" target="_blank"> <div class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/leaflet.jpg') center center no-repeat #d9dae9;background-size: 100% 100%;"> <div class="boxHover"></div> <div class="textLine"></div> <div class="textSlide"><h3 style="color:#fee900;">Children Are Unbeatable!</h3>2015<br/><br/>Recruitment leaflet for the Children Are Unbeatable! Alliance UK.</div> </div> </a> <a href="https://finn-hodgkin-design.appspot.com/images/GI-Evaluation.pdf" target="_blank"> <div class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/gi-evaluation.jpg') center center no-repeat #d9dae9;background-size: 100% 100%;"> <div class="boxHover"></div> <div class="textLine lineRight"></div> <div class="textSlide slideRight"><h3 style="color:#fee900;">Global Initiative</h3>2015<br/><br/>Sixty page evaluation report for the Global Initiative. Layout and design by Finn.</div> </div> </a> <a href="https://www.youtube.com/watch?v=z1DUtppc62E" target="_blank"> <div class="bigBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/paint.jpg') center center no-repeat #000;background-size: 100% 100%;"> <div class="boxHover"></div> <div class="textLineBig" style="height:100%;"></div> <div class="textSlideBig" style="height:90%;"><h3 style="color:#00aeef;">Scenes from Paint</h3>2012<br/><br/>Rendered scenes from an unfinished CGI animation project.<br/><br/>Rendering, lighting, rigging and animation by Finn Hodgkin.</div> </div> </a> <a href="https://www.prs-recruitment.net" target="_blank"> <div class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/PRS.jpg') center center no-repeat #d9dae9;background-size: 124% 124%;"> <div class="boxHover"></div> <div class="textLine"></div> <div class="textSlide"><h3 style="color:#ec008c;">PRS Recruitment</h3>2013<br/><br/>Wordpress re-design for an early years recruitment agency.</div> </div> </a> <a href="https://www.youtube.com/watch?v=R2-qhU2snUc" target="_blank"> <div class="smallBox" class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/rigging.jpg') center center no-repeat #d9dae9; background-size: 124% 124%;"> <div class="boxHover"></div> <div class="textLine lineRight"></div> <div class="textSlide slideRight"><h3 style="color:#00aeef;">Rigging reel</h3>2012<br/><br/>Reel of rigging work in Maya.</div> </div> </a> <a href="https://www.childrenareunbeatable.org.uk/" class="touch" target="_blank"> <div class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/CAU.png') center center no-repeat #d9dae9;background-size: 60% 60%;"> <div class="boxHover"></div> <div class="textLine"></div> <div class="textSlide"><h3 style="color:#ec008c;">Children Are Unbeatable!</h3>2015<br/><br/>Responsive website and logo design for an anti-smacking charity based in the UK.</div> </div> </a> <a href="https://finn-hodgkin-design.appspot.com/images/FinnHodgkin-CV-2016.pdf" class="touch" target="_blank"> <div class="smallBox" style="background:url('https://finn-hodgkin-design.appspot.com/images/CV.png') center center no-repeat #d9dae9;background-size: 60% 60%;"> <div class="boxHover"></div> <div class="textLine lineRight"></div> <div class="textSlide slideRight"><h3 style="color:#fee900;">CV</h3>2016<br/><br/>Up to date PDF with information on Finn's employment and education history.</div> </div> </a> <div class="clear"></div> <div id="hiddenMobileTest"></div> </div> <div class="testing"></div> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >$(document).ready(function(){ var i = 1; var active = ""; var current = ""; $('.image1').click(function(event) { event.preventDefault(); $(".timage").fadeIn(300).addClass('active-slide').addClass('timagec'); }); $('.image2').click(function(event) { event.preventDefault(); $(".timage").fadeIn(300).addClass('active-slide').removeClass('timageb').removeClass('timagec').addClass('timagea'); }); $('.image3').click(function(event) { event.preventDefault(); $(".timage").fadeIn(300).addClass('active-slide').removeClass('timagec').addClass('timageb'); }); $('.timage').on('click', function(){ $(".timage").fadeOut(300).removeClass('active-slide'); }); $('#wrapper a').bind('click', function(e){ current = $(this).attr("href"); if($('#hiddenMobileTest').css('float') === 'left'){ if(active === current){ console.log(active, current); } else{ e.preventDefault(); console.log(active, current); active = $(this).attr("href"); } } }); }); $(window).on('load resize', function () { var div = $('.smallBox'); var div2 = $('.bigBox'); var div4 = $('.tinyBox'); var timage = $('.timage'); var width = div.width(); var div3 = $('#wrapper'); var marginL = div3.css('margin-left').replace("px", ""); var width3 = div4.width(); var margin = marginL / 2; var timageS = width*2; var getMargin = +div.css('margin-left').replace("px", ""); div4.css('height', width3); div3.css('marginTop', margin + "px"); div3.css('marginBottom', margin + "px"); div.css('height', width); div2.css('height', width); timage.css('margin', getMargin + "px") timage.css('height', ((width + getMargin)*2)); timage.css('width', ((width + getMargin)*2)); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: