<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/mikemang/pen/mRddzG?limit=all&page=61&q=mobile" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,500|Lato");
body,
html {
width: 100%;
height: 100%;
}
#menuTextLeft {
color: #333333;
font-family: "Open Sans";
font-size: 16px;
}
.navigation {
background: none !important;
border: none;
}
.icon {
margin-right: 10px;
color: white;
}
.icon-one {
position: absolute;
bottom: 27%;
left: 20%;
margin-top: 40px;
color: #ffffff;
margin-right: 10px;
}
.icon-two {
position: absolute;
bottom: 27%;
left: 48%;
margin-top: 40px;
color: #ffffff;
margin-right: 10px;
}
.icon-three {
position: absolute;
bottom: 27%;
right: 20%;
margin-top: 40px;
color: #ffffff;
margin-right: 10px;
}
#scale:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.intro-header {
padding-top: 0px;
padding-bottom: 20px;
text-align: center;
background: linear-gradient(rgba(46, 171, 250, 0.75), rgba(46, 171, 250, 0.85)), url("https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/7823cc45224441.5829e88f95dfa.png") no-repeat center center;
background-size: cover;
}
.bottom-triangle {
position: absolute;
bottom: -20px;
left: 25%;
height: 30%;
width: 50%;
background: #65ce9b;
-webkit-clip-path: polygon(50% 43%, 0% 100%, 100% 100%);
clip-path: polygon(50% 43%, 0% 100%, 100% 100%);
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message > h1 {
color: #ffffff;
font-weight: 100;
font-size: 68px;
font-family: "Lato";
}
.intro-message > h3 {
color: #ffffff;
font-size: 24px;
font-family: "Open Sans";
margin-top: 20px;
}
#button {
color: #ffffff;
font-size: 24px;
font-family: "Open Sans";
margin-top: 30px;
border: solid 6px #ffffff;
background: #65ce9b;
padding: 15px;
text-transform: uppercase;
font-weight: 500;
}
#button-two {
color: #ffffff;
font-size: 24px;
font-family: "Open Sans";
margin-top: 10px;
margin-bottom: 20px;
border: solid 6px #ffffff;
background: none;
padding: 15px;
text-transform: uppercase;
font-weight: 500;
}
.content-section-a {
padding: 50px;
padding-bottom: 80px;
background: #65ce9b;
text-align: center;
color: #ffffff;
}
.content-section-b {
padding: 50px 0;
background: linear-gradient(rgba(46, 171, 250, 0.75), rgba(46, 171, 250, 0.85));
text-align: center;
color: #ffffff;
}
.content-section-c {
padding: 50px 0;
padding-bottom: 20px;
background: #ffffff;
text-align: center;
color: #333333;
}
.content-section-d {
padding: 50px 0;
background: #65ce9b;
text-align: center;
color: #ffffff;
}
@media all and (max-width: 600px) {
.intro-message > h1 {
color: #ffffff;
font-weight: 100;
font-size: 38px;
font-family: "Lato";
}
.icon-one {
position: absolute;
bottom: 10%;
left: 18%;
margin-top: 40px;
color: #ffffff;
margin-right: 10px;
}
.icon-two {
position: absolute;
bottom: 10%;
left: 44%;
margin-top: 40px;
color: #ffffff;
margin-right: 10px;
}
.icon-three {
position: absolute;
bottom: 10%;
right: 18%;
margin-top: 40px;
color: #ffffff;
margin-right: 10px;
}
nav {
visibility: hidden;
}
}
.boards {
position: relative;
margin: auto;
display: block;
margin-top: 5px;
width: 400px;
height: 280px;
background: none;
z-index: 1;
}
.col-left {
position: absolute;
width: 30%;
height: 90%;
left: 7.5%;
top: 5%;
background: #E1E1E1;
border-radius: 3%;
z-index: 2;
}
.col-middle {
position: absolute;
width: 30%;
height: 90%;
left: 40%;
top: 5%;
background: #E1E1E1;
border-radius: 3%;
z-index: 2;
}
.col-right {
position: absolute;
width: 30%;
height: 90%;
left: 72.5%;
top: 5%;
background: #E1E1E1;
border-radius: 3%;
z-index: 2;
}
.left-block-top {
position: absolute;
width: 80%;
height: 18%;
left: 10%;
top: 7%;
border-radius: 2%;
background: white;
z-index: 3;
}
.left-block-middle {
position: absolute;
width: 80%;
height: 18%;
left: 10%;
top: 30%;
border-radius: 2%;
background: white;
z-index: 3;
}
.left-block-middle-2 {
position: absolute;
width: 80%;
height: 18%;
left: 10%;
top: 53%;
border-radius: 2%;
background: white;
z-index: 3;
}
.left-block-bottom {
position: absolute;
width: 80%;
height: 18%;
left: 10%;
top: 76%;
border-radius: 2%;
background: white;
z-index: 3;
}
.ruler {
position: absolute;
bottom: -20%;
width: 15%;
height: 80%;
background: #F25C52;
z-index: 4;
}
.mark-1 {
position: absolute;
left: 0%;
top: 5%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-1 {
position: absolute;
left: 0%;
top: 5%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-2 {
position: absolute;
left: 0%;
top: 15%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-3 {
position: absolute;
left: 0%;
top: 25%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-4 {
position: absolute;
left: 0%;
top: 35%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-5 {
position: absolute;
left: 0%;
top: 45%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-6 {
position: absolute;
left: 0%;
top: 55%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-7 {
position: absolute;
left: 0%;
top: 65%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-8 {
position: absolute;
left: 0%;
top: 75%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-9 {
position: absolute;
left: 0%;
top: 85%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.mark-10 {
position: absolute;
left: 0%;
top: 95%;
width: 35%;
height: 3%;
background: #182234;
x-index: 5;
}
.pencil {
position: absolute;
bottom: -20%;
left: -17%;
width: 15%;
height: 60%;
background: none;
z-index: 4;
}
.stripe-left {
position: absolute;
height: 100%;
width: 33%;
background: #F9D354;
}
.stripe-middle {
position: absolute;
height: 100%;
width: 33%;
left: 33%;
background: #F7BA4D;
}
.stripe-right {
position: absolute;
height: 100%;
width: 33%;
right: 1%;
background: #F1853D;
}
.tip {
position: absolute;
width: 100%;
height: 21%;
top: -15%;
background: #FDDEB9;
-webkit-clip-path: polygon(50% 0%, 0 74%, 100% 74%);
clip-path: polygon(50% 0%, 0 74%, 100% 74%);
}
.tip-point {
position: absolute;
width: 100%;
height: 30%;
top: 0%;
background: black;
-webkit-clip-path: polygon(50% 0%, 0 74%, 100% 74%);
clip-path: polygon(50% 0%, 0 74%, 100% 74%);
z-index: 6;
}
.bucket {
position: absolute;
bottom: -20%;
left: 18%;
width: 45%;
height: 60%;
background: none;
z-index: 4;
}
.bucket-stripe-left {
position: absolute;
height: 100%;
width: 33%;
background: #74C198;
}
.bucket-stripe-middle {
position: absolute;
height: 100%;
width: 33%;
left: 33%;
background: #36A281;
}
.bucket-stripe-right {
position: absolute;
height: 100%;
width: 33%;
right: 1%;
background: #277F63;
}
.lid {
position: absolute;
top: -15%;
width: 99%;
height: 15%;
background: #E9E8E6;
}
.paint-stripe-left {
position: absolute;
height: 35%;
top: -15%;
width: 8%;
right: 21%;
background: #F1536A;
z-index: 5;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.paint-stripe-middle {
position: absolute;
height: 45%;
top: -15%;
width: 8%;
right: 13%;
background: #F1805A;
z-index: 5;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.paint-stripe-right {
position: absolute;
height: 28%;
top: -15%;
width: 8%;
right: 5%;
background: #7C90CF;
z-index: 5;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
@media all and (max-width: 600px) {
.boards {
position: relative;
margin: auto;
display: block;
margin-top: 20%;
width: 250px;
height: 175px;
background: none;
z-index: 1;
}
}
</style></head><body>
<body>
<!--Navigation -->
<header>
<nav class="navigation navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#"><p id="menuTextLeft" class="option1 navbar-text navbar-left">Vector Art</p></a>
<a href="#"><p id="menuTextLeft" class="option2 navbar-text navbar-left">Developlment</p></a>
<a href="#"><p id="menuTextLeft" class="option6 navbar-text navbar-left">Blogging</p></a>
<a href="#"><p id="menuTextLeft" class="option7 navbar-text navbar-left">Hire</p></a>
</div>
</div>
</nav>
</header>
<!-- Header -->
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="bottom-triangle">
</div>
<div class="intro-message">
<h1 class="animated bounceInDown">mike mangialrdi</h1>
<h3 class="animated lightSpeedIn">front-end developer and vector artist</h3>
<a target='_blank' href="https://codepen.io/mikemang/">
<i id="scale" class="icon-one fa fa-codepen fa-3x" aria-hidden="true"></i>
</a>
<a target='_blank' href="https://www.behance.net/mikemangiadbdf">
<i id="scale" class="icon-two fa fa-behance fa-3x" aria-hidden="true"></i>
</a>
<a target='_blank' href="https://github.com/michaelmang">
<i id="scale" class="icon-three fa fa-medium fa-3x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading">Not your ordinary developer</h2>
<p class="lead">I'm a front-end developer that sees the web as a canvas and my work as a mirror.</p>
<!-- Begin Trello Boards -->
<div class="boards">
<div class="col-left">
<div class="left-block-top">
</div>
<div class="left-block-middle">
</div>
<div class="left-block-middle-2">
</div>
<div class="left-block-bottom">
</div>
</div>
<div class="col-middle">
<div class="left-block-top">
</div>
<div class="left-block-middle">
</div>
<div class="left-block-middle-2">
</div>
<div class="left-block-bottom">
</div>
</div>
<div class="col-right">
<div class="left-block-top">
</div>
<div class="left-block-middle">
</div>
<div class="left-block-middle-2">
</div>
<div class="left-block-bottom">
</div>
</div>
<!-- Begin Ruler -->
<div class="ruler">
<div class="mark-1">
</div>
<div class="mark-2">
</div>
<div class="mark-3">
</div>
<div class="mark-4">
</div>
<div class="mark-5">
</div>
<div class="mark-6">
</div>
<div class="mark-7">
</div>
<div class="mark-8">
</div>
<div class="mark-9">
</div>
<div class="mark-10">
</div>
</div>
<!-- Begin Pencil -->
<div class="pencil">
<div class="stripe-left">
</div>
<div class="stripe-middle">
</div>
<div class="stripe-right">
</div>
<div class="tip">
<div class="tip-point"></div>
</div>
</div>
<!-- Begin Bucket -->
<div class="bucket">
<div class="lid"></div>
<div class="paint-stripe-left"></div>
<div class="paint-stripe-middle"></div>
<div class="paint-stripe-right"></div>
<div class="bucket-stripe-left">
</div>
<div class="bucket-stripe-middle">
</div>
<div class="bucket-stripe-right">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<div id="vector-art" class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading">Vector Art</h2>
<p class="lead">I keep my vector design skills fresh, translating to crisp color palletes, intelligent layout, and a delightful use of shapes.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<a target='_blank' href="https://www.behance.net/mikemangiadbdf" id="scale" class="thumbnail">
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/7823cc45224441.5829e88f95dfa.png" alt="...">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a target='_blank' href="https://www.behance.net/mikemangiadbdf" id="scale" class="thumbnail">
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/20d7f444397567.581175cd607f6.png" alt="...">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a id="scale" target='_blank' href="https://www.behance.net/mikemangiadbdf" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/background.png" alt="...">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<a target='_blank' href="https://www.behance.net/mikemangiadbdf" class="thumbnail">
<img id="scale" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/ee935444971773.582d4dfb815e3.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a target='_blank' href="https://www.behance.net/mikemangiadbdf" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/caveback.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a target='_blank' href="https://www.behance.net/mikemangiadbdf" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/logo%20room.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a target='_blank' href="https://www.behance.net/mikemangiadbdf" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/pub.png" alt="...">
</a>
</div>
</div>
<a target='_blank' href="https://www.behance.net/mikemangiadbdf"><button id="button" class="animated infinite pulse btn btn-success btn-lg"> <i class="icon fa fa-behance" aria-hidden="true"></i> See on Behance</button></a>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-c -->
<div id="pure-css" class="content-section-c">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading">Pure CSS</h2>
<p class="lead">I sometimes like to make cool graphics, but let CSS be my Sketch.</p>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<a id="scale" target='_blank' href="https://codepen.io/collection/AWGNVG/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.22.52%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a id="scale" target='_blank' href="https://codepen.io/collection/AWGNVG/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.28.05%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a id="scale" target='_blank' href="https://codepen.io/collection/AWGNVG/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.29.09%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a target='_blank' href="https://codepen.io/collection/AWGNVG/" id="scale" class="thumbnail">
<img src="https://cdn-images-1.medium.com/max/1600/1*yH7i8rExgN5az2cpG3-EjA.png" alt="...">
</a>
</div>
</div>
<a target='_blank' href="https://codepen.io/collection/AWGNVG/"><button id="button" class="animated infinite pulse btn btn-success btn-lg"> <i class="icon fa fa-codepen" aria-hidden="true"></i> See on Codepen</button></a>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-d -->
<div id="ui-cards" class="content-section-d">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading">UI Cards</h2>
<p class="lead">I can fit large creativity in small containers.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<a target='_blank' href="https://codepen.io/collection/AWGNVG/" id="scale" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.36.08%20PM.png" alt="...">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a target='_blank' href="https://codepen.io/collection/AWGNVG/" id="scale" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.39.10%20PM.png" alt="...">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a target='_blank' href="https://codepen.io/collection/AWGNVG/" id="scale" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.42.16%20PM.png" alt="...">
</a>
</div>
</div>
<a target='_blank' href="https://codepen.io/collection/AWGNVG/"><button id="button-two" class="animated infinite pulse btn btn-success btn-lg"> <i class="icon fa fa-codepen" aria-hidden="true"></i> See on Codepen</button></a>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-c -->
<div id="mini-web-apps" class="content-section-c">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading">Mini Web Apps</h2>
<p class="lead">Mini, but mighty, web apps using Vue and React.</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<a id="scale" target='_blank' href="https://codepen.io/collection/nGjzaN/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%209.56.50%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-4">
<a id="scale" target='_blank' href="https://codepen.io/collection/nGjzaN/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.01.15%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-4">
<a id="scale" target='_blank' href="https://codepen.io/collection/nGjzaN/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.02.31%20PM.png" alt="...">
</a>
</div>
</div>
<a target='_blank' href="https://codepen.io/collection/nGjzaN/"><button id="button" class="animated infinite pulse btn btn-success btn-lg"> <i class="icon fa fa-codepen" aria-hidden="true"></i> See on Codepen</button></a>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<div id="web-design" class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading">Web Design</h2>
<p class="lead">Elegant or fun, I'll get it done.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<a target='_blank' href="https://codepen.io/collection/DdExkp/" id="scale" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.07.19%20PM.png" alt="...">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a target='_blank' href="https://codepen.io/collection/DdExkp/" id="scale" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.09.40%20PM.png" alt="...">
</a>
</div>
<div class="col-sm-4 col-md-4">
<a id="scale" target='_blank' href="https://codepen.io/collection/DdExkp/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.09.09%20PM-min.png" alt="...">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<a target='_blank' href="https://codepen.io/collection/DdExkp/" class="thumbnail">
<img id="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.08.40%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a target='_blank' href="https://codepen.io/collection/DdExkp/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.11.20%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a target='_blank' href="https://codepen.io/collection/DdExkp/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202017-01-02%20at%2010.15.09%20PM.png" alt="...">
</a>
</div>
<div class="col-xs-3">
<a target='_blank' href="https://codepen.io/collection/DdExkp/" class="thumbnail">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Screen%20Shot%202016-12-31%20at%2011.57.43%20AM.png" alt="...">
</a>
</div>
</div>
<a target='_blank' href="https://codepen.io/collection/DdExkp/"><button id="button" class="animated infinite pulse btn btn-success btn-lg"> <i class="icon fa fa-codepen" aria-hidden="true"></i> See on Codepen</button></a>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-c -->
<div id="blogging" class="content-section-c">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Blogging</h2>
<p class="lead">I learn, I write, and I hope I help.</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<a id="scale" target='_blank' href="https://medium.com/@michaelmangial1" class="thumbnail">
<img src="https://cdn-images-1.medium.com/max/1600/1*ZIItC6zPMV_x8Ney8u2MRQ.png" alt="...">
</a>
</div>
<div class="col-xs-4">
<a id="scale" target='_blank' href="https://medium.com/@michaelmangial1" class="thumbnail">
<img src="https://cdn-images-1.medium.com/max/1600/1*z_CVwSWjLx3zVpSB7DReoA.png" alt="...">
</a>
</div>
<div class="col-xs-4">
<a id="scale" target='_blank' href="https://medium.com/@michaelmangial1" class="thumbnail">
<img src="https://cdn-images-1.medium.com/max/1600/1*WM6b5xxNSDBCAb-AjRIXtg.png" alt="...">
</a>
</div>
</div>
<a target='_blank' href="https://medium.com/@michaelmangial1"><button id="button" class="animated infinite pulse btn btn-success btn-lg"> <i class="icon fa fa-medium" aria-hidden="true"></i> Follow on Medium</button></a>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-d -->
<div class="content-section-d">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="section-heading">Have a project?</h2>
</div>
</div>
<a id="hire" target='_blank' href="http://www.mikemangialardi.de"><button id="button" class="animated infinite pulse btn btn-success btn-lg"> <i class="icon fa fa-check" aria-hidden="true"></i>Hire</button></a>
</div>
<!-- /.container -->
</div>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script><script src='https://unpkg.com/vue/dist/vue.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script >$(".option1").click(function() {
$('html, body').animate({
scrollTop: $("#vector-art").offset().top
}, 1000);
});
$(".option2").click(function() {
$('html, body').animate({
scrollTop: $("#pure-css").offset().top
}, 1000);
});
$(".option3").click(function() {
$('html, body').animate({
scrollTop: $("#ui-cards").offset().top
}, 1000);
});
$(".option4").click(function() {
$('html, body').animate({
scrollTop: $("#mini-web-apps").offset().top
}, 1000);
});
$(".option5").click(function() {
$('html, body').animate({
scrollTop: $("#web-design").offset().top
}, 1000);
});
$(".option6").click(function() {
$('html, body').animate({
scrollTop: $("#blogging").offset().top
}, 1000);
});
$(".option7").click(function() {
$('html, body').animate({
scrollTop: $("#hire").offset().top
}, 1000);
});
//# sourceURL=pen.js
</script>
</body></html>
