cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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>
            
          
!
            
              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;}
}
            
          
!
            
              $(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));
	});	
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console