<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>
