<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/BoiseDigital/pen/wgaFq?depth=everything&limit=all&order=popularity&page=14&q=portfolio&show_forks=false" />
<style class="cp-pen-styles">.container {
width:750px;
margin:auto;
}
.panel .pad {
padding: 0 15px;
}
.panel.flip .action {
display: none;
}
.panel {
width: 200px;
height: 300px;
margin: 20px;
position: relative;
display:inline-block;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.panel .front {
z-index: 900;
width: inherit;
height: inherit;
background: #fff;
-moz-box-shadow: 0 1px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 15px rgba(0,0,0,0.1);
box-shadow: 0 1px 15px rgba(0,0,0,0.1);
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transform: rotateX(0deg) rotateY(0deg);
-o-transform-style: preserve-3d;
-o-backface-visibility: hidden;
-ms-transform: rotateX(0deg) rotateY(0deg);
-ms-transform-style: preserve-3d;
-ms-backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .front {
z-index: 900;
background: #fff;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.panel .back {
position: absolute;
top: 0;
left: 0;
z-index: 800;
width: inherit;
height: inherit;
background: #fff;
border:1px solid #000;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transform: rotateY(-180deg);
-o-transform-style: preserve-3d;
-o-backface-visibility: hidden;
-ms-transform: rotateY(-180deg);
-ms-transform-style: preserve-3d;
-ms-backface-visibility: hidden;
transform: rotateY(-180deg);
transform-style: preserve-3d;
backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel.flip .back {
z-index: 1000;
background: #fff;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.frontTitle {
padding-top:5px;
text-align:center;
font-family:'latoregular',arial;
font-size:18px;
color:#000;
height:45px;
}
.frontLogo {
width:100%;
height:200px;
background-repeat:no-repeat;
background-position:center center;
}
.isas {
background-image:url('http://dizin.x10.bz/codepen/wgaFq/isas.png');
background-size:150px 150px;
}
.boisedigital {
background-image:url('http://dizin.x10.bz/codepen/wgaFq/logo_dark.png');
background-size:85% auto;
background-position:center center;
}
.dissolve {
background-image:url('http://portfolio.dizin.x10.bz/images/dissolve.png');
background-size:125px 125px;
}
.frontLocation {
padding-top:10px;
text-align:center;
color:#aaa;
font-family:'latoregular',arial;
font-size:18px;
}
.backTitle {
padding:10px;
color:#000;
font-family:'latohairline',arial;
font-size:16px;
font-weight:bold;
}
.backParagraph {
padding:10px;
padding-top:0;
color:#000;
font-family:'latoregular',arial;
font-size:14px;
}
.backGoto {
padding:10px;
padding-top:0;
color:#06f;
font-family:'latoregular',arial;
font-size:14px;
}
.backGoto a {
text-decoration:none;
color:#06f;
-webkit-transition:0.1s all linear;
-moz-transition:0.1s all linear;
-o-transition:0.1s all linear;
transition:0.1s all linear;
}
.backGoto a:hover {
text-decoration:underline;
padding-left:15px;
}</style></head><body>
<div class="container">
<div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';">
<div class="front">
<div class="frontTitle">
Idaho Science and Aerospace Scholars
</div>
<div class="frontLogo isas">
</div>
<div class="frontLocation">
NASA Ames
</div>
</div>
<div class="back">
<div class="backTitle">ISAS Graduate</div>
<div class="backParagraph">
Idaho Science and Aerospace is an online class that invites the top 20% of students to a free trip to Boise State University and NASA Ames. During this time I spent personal time with two astronauts, and multiple mission controllers from the Mars landing. I illustrated my teams (Team P.E.N.G.U.I.N.) mission patch (front).
</div>
<div class="backGoto">
<a href="http://nicholas.dizin.x10.bz" target="_blank" title="Academic Portfolio">Academic Portfolio →</a>
</div>
</div>
</div>
<div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';">
<div class="front">
<div class="frontTitle">
Boise Digital Marketing
</div>
<div class="frontLogo boisedigital">
</div>
<div class="frontLocation">
Boise, Idaho
</div>
</div>
<div class="back">
<div class="backTitle">Boise Digital Marketing</div>
<div class="backParagraph">
Boise Digital Marketing was founded in 2015 under a partnership between Koby & Nicholas. We're small agency doing big agency work.
</div>
<div class="backGoto">
<a href="http://boisedigitalmarketing.com" target="_blank" title="Boise Digital Marketing">Boise Digital →</a>
</div>
</div>
</div>
<div class="hover panel" onmouseover="javascript:this.className += ' flip';" onmouseout="javascript:this.className = 'hover panel';">
<div class="front">
<div class="frontTitle">
Cinematography
</div>
<div class="frontLogo dissolve">
</div>
<div class="frontLocation">
Dissolve.com
</div>
</div>
<div class="back">
<div class="backTitle"> Cinematography</div>
<div class="backParagraph">
I am an independent stock footage contributor on Dissolve.com. I use a GoPro Hero 3+, Canon EOS 70D and DJI Phantom 3 with Adobe Premiere to create the highest quality video and timeplapses I can.
</div>
<div class="backGoto">
<a href="http://dissolve.com/products?media_type=video&producer=Nicholas+Butler" target="_blank" title="Stock Video Collection (Not very comprehensive atm)">Stock Collection →</a>
</div>
</div>
</div>
</div>
</body></html>
