PORTFOLIO - CEMENT

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Muli:400,400italic,300italic,300' rel='stylesheet' type='text/css'>
<div id="top-image">

<div id="wrapper">
  
 <div id="header">
    <div class="logo"><a href="http://scr.im/calvinm" border=0 class="nocur"><img src="http://calvinmorett.com/img/200.png" class="logoi"></a></div>
   <div class="call2action"><a href="http://scr.im/calvinm" class="callr">GET STARTED</a></div>
    <div class="social">
        <nav class="containersocial">
        <a href="https://www.behance.net/morettc15cb" class="behance"><i class="fa fa-behance-square"></i></a>
        <a href="http://codepen.io/odisbey/" class="codepen"><i class="fa fa-codepen"></i></a>
        <a href="https://linkedin.com/in/calvinmorett" class="linkedin"><i class="fa fa-linkedin-square"></i></a>
      </nav>
    </div>
  </div>
    
  <div id="body">
    <div class="work"><p class="bio">Calvin is a mixed media and multimedia designer living & working in Upstate New York.
      </p><p class="bio">
He gained valuable print and editorial design experience in the newspaper industry while working along highly skilled colleagues over several years. 
</p><p class="bio">
He is currently crafting new projects in traditional and digital art. While also dedicating time for creating music, voice-acting and designing patterns. 
</p><p class="bio">
He enjoys talking philosohpy and how things operate; accustomed to sharing music and finding creative solutions. If you have any inquiries regarding work or want to chat, he recommends getting in-touch through email.</p></div>
  </div>
  
  <div id="footer">
    <div class="name">Calvin Morett<br>
     <ip class="title">Print & Web Designer,<BR>
Front-End Developer,<BR>
Digital Content Editor & More</p></div>
  
      <div class="contact">
      <a href="http://scr.im/calvinm" class="ema">EMAIL</a>†<a href="https://linkedin.com/in/calvinmorett" class="lin">LINKEDIN</a><br>
      <a href="https://www.behance.net/morettc15cb" class="beh">BEHANCE</a>†<a href="http://codepen.io/odisbey" class="cod">CODEPEN</a><BR>
      <a href="https://twitter.com/CalvinMorett" class="twi">TWITTER</a>†<a href="http://cargocollective.com/calvinmorett" class="car">CARGOCOLLECTIVE</a><BR>
      <a href="https://www.instagram.com/odisbey/" class="ins">INSTAGRAM</a>†<a href="https://soundcloud.com/odisbey" class="sou">SOUNDCLOUD</a><BR>
      </div>
 </div>    
</div>
</div>
       
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=10881604;
var sc_invisible=0;
var sc_security="93f3c33b";
var sc_text=4;
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="shopify analytics ecommerce
tracking" href="http://statcounter.com/shopify/" target="_blank"><img
class="statcounter" src="http://c.statcounter.com/10881604/0/93f3c33b/0/"
alt="shopify analytics ecommerce tracking"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->

PORTFOLIO - CEMENT.markdown

PORTFOLIO - CEMENT

A Pen by Calvin on CodePen.

License.

script.js

$(document).ready(function() {
var movementStrength = 50;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("html").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('body').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,700italic,400italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700,500italic,700italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);

*, :before, :after {
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html{width:100%;margin:20px auto;}
body{background:#000 url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/dark_wall.png') repeat;
  font-family: 'Roboto Condensed', sans-serif;
  height:100%;
  width:100%;}
#wrapper{overflow:hidden;
  width:980px;
  margin:30px auto;}
#header{
  height:auto;
  overflow:hidden;
  width:100%;
  margin-bottom:20px;}
#body{font-family: 'Roboto', sans-serif;
  width:100%;background:white;
    background: transparent;
   margin-bottom:30px;}
#footer{color:#999;width:100%;}

/** Header **/
.logo{OVERFLOW:VISIBLE;
  float:left;
  width:490px;
  margin:0;}
.logoi{
  background:rgba(169, 255, 255, 0.0); width:120px;
  height:auto;
  margin:0;
  -moz-transition: all 0.45s;
  -o-transition: all 0.45s;
  -webkit-transition: all 0.45s;
  transition: all 0.35s;}
.logoi:hover{
   background: rgba(169, 255, 255, 0.3);
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;}
.call2action{
  float:right;
 position:relative;
  height:auto;
  margin-bottom:15px;
  top:25px;
  right:-20px;
  width:150px;
  margin-right:25px;
  -moz-transition: all 0.45s;
  -o-transition: all 0.45s;
  -webkit-transition: all 0.45s;
  transition: all 0.45s;
    color:rgba(169, 255, 255, 0.3);
    text-align: center;
    text-transform: uppercase;
}
  .callr{
  padding:4px;
    border:1px solid rgba(0,0,0,0);
  font-family: 'Montserrat', sans-serif;
  -moz-transition: all 0.45s;
  -o-transition: all 0.45s;
  -webkit-transition: all 0.45s;
  transition: all 0.45s;
    color:rgba(169, 255, 255, 0.3);
    text-align: center;
    letter-spacing:2px;
    font-size: 1.05em;
    text-transform: uppercase;
}
.callr:hover{
  background:rgba(169, 255, 255, 0.3);
    text-align: center;
    border:1px solid rgba(255,255,255,.25);
  text-decoration:none;
  color:#fff;
  border-radius:25px;
  text-shadow:0px 0px 15px rgba(255,255,255,.35);
  -moz-transition: text-shadow,color,background 0.45s;
  -o-transition: text-shadow,color,background 0.45s;
  -webkit-transition: text-shadow,color,background 0.45s;
  transition: text-shadow,color,background 0.45s;}
.social{
  overflow:visible;
  right:-220px;
  float:right;
  position:relative;
  top:70px;
  text-align:center;
  height:45px;
  padding:auto;
  width:250px;
  font-size:1.65em;}
/** Body **/
.work{
  width:100%;
  color:#fff;
  height:425px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/** footer **/
.name{
  float:left;
  clear:left;
  width:490px;
  margin:0;
  color:#fff;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:2px;
  font-family: 'Montserrat', sans-serif;}

.title{color: rgba(169, 255, 255, 0.3)}

.resume{position:relative;left:-100px;top:2px;height:auto;font-size:0.85em;width:auto;height:100%;margin:auto;font-family: 'Montserrat', sans-serif;}

.contact{
  float:right;
  left:0;
  display:inline-block;
  height:auto;
  text-align:right;
  width:490px;
  margin:0;
 font-size:10px;
  letter-spacing:2px;
  font-family: 'roboto', sans-serif;}

/** floats **/
.left{float:left;}
.right{float:left;}
.clear{clear:both;}
.clearl{clear:left;}
.clearr{clear:right;}
.clearm{clear:none;}

/** side **/

.containersocial {
  margin:0;  
  position:relative;
  height:45px;
  padding:auto;
}
.containersocial a {
  margin:8px;
  padding:5px;
  color:rgba(169, 255, 255, 0.3);
  -moz-transition: all 0.45s;
  -o-transition: all 0.45s;
  -webkit-transition: all 0.45s;
  transition: all 0.45s;
}

.pinterest,
.linkedin,
.codepen,
.behance,
.instagram {
  background:none;
  text-decoration: none;
}
.pinterest:hover ,
.linkedin:hover ,
.codepen:hover ,
.behance:hover ,
.instagram:hover {color:#fff;
   text-shadow:0px 0px 10px rgba(255,255,255,.35);
}
.twi:hover {
  color: #33CCFF;
}
.sou:hover {
  color: #f50;
}
.ema:hover {
  color: #dd4b39;
}
.lin:hover {
  color: #007bb6;
}
.cod:hover {
  color: #A7AFA6;
}
.beh:hover {
  color: #1769ff;
}
.ins:hover {
  color: #517fa4;
}
.car:hover {
  color: #31b262;
}

a{color:#fff;text-decoration:none;}
a:hover{text-decoration:overline underline ;}

.bio{margin:20px;padding-bottom:5px;font-size:2em;}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 6px;
}
 
/* Track */
::-webkit-scrollbar-track {
}
 
/* Handle */
::-webkit-scrollbar-thumb {
border-radius:6px;
    background: rgba(0,0,0,.25);  
}
::-webkit-scrollbar-thumb:window-inactive {
	background:#eee;
}

::-moz-selection { /* Code for Firefox */
color:#222;
background: rgba(169, 255, 255, 0.3);
}

::selection {
color:#222;
background: rgba(169, 255, 255, 0.3);
}

.nocur{cursor:crosshair;}