<div id="header">
  <div class="center">
    <div class="middle">
      <h1>Penny Yi Wang</h1>
      <span>617.820.6544 | <a href="mailto:hello@pennyyiwang.com">hello@pennyyiwang.com</a> | <a href="pennyyiwang.com">pennyyiwang.com</a></span>
      
    </div>
  </div>
</div>


<div id="page">

   <ul>
 
    <li><a href="http://medillreports.com/2014/12/10/peer-to-peer-lending-sees-exponential-growth/" target="_blank" ><div id="lend"></div></a><em>Article: Consumer credit market</em></li>
    
    <li><a href="http://wp.me/s2IfrD-haraj" target="_blank"><div id="cat"></div></a><em>Video: Doha neighborhood closing</em></li>
    
    <li> <a href="https://www.youtube.com/watch?v=1wwa01MTN4c"  target="_blank"><div id="doc"></div></a><em>Documentary: Tibetan traditional art</em></li>
    
    <li><a href="http://medillreports.com/2014/11/12/spothero-shifts-into-high-gear-with-parking-app/" target="_blank" ><div id="spot"></div></a><em>Video: Small business profile</em></li>
    
    <li><a href="http://pennyyiwang.com/2013/05/06/dnent/" target="_blank" id="doha"><div id="doha"></div></a><em>Article: Business law in Qatar</em></li>
    
    <li><a href="http://pennyyiwang.com/" target="_blank"><div id="more"></div></a><em>Everything else</em></li>
  </ul>
  <div class="social">
        <a href="http://pennyyiwang.com" target="_blank" ><img src="https://communitymeetings.files.wordpress.com/2015/01/wordpress.png" alt="wordpress" /></a>
        <a href="https://www.youtube.com/channel/UCApskT722ZeA-ic9v8y4-oQ/videos" target="_blank" ><img src="https://communitymeetings.files.wordpress.com/2015/01/youtube.png" alt="youtube" /></a>
        <a href="https://twitter.com/ptsingle" target="_blank" ><img src="https://communitymeetings.files.wordpress.com/2015/01/twitter.png" alt="twitter" /></a>
        <a href="https://www.linkedin.com/in/pennywang" target="_blank" ><img src="https://communitymeetings.files.wordpress.com/2015/01/linkedin.png" alt="linkedin" /></a>
        <a href="https://www.flickr.com/photos/penny-yi-wang/sets/72157632705405531/show/" target="_blank"><img src="https://communitymeetings.files.wordpress.com/2015/01/flickr.png" alt="flickr" /></a>
        <a href="https://www.facebook.com/penny.yi.wang" target="_blank"><img src="https://communitymeetings.files.wordpress.com/2015/01/facebook.png" alt="facebook" /></a>
      </div>
</div>
@import "compass/css3";


@import url(https://fonts.googleapis.com/css?family=Lusitana);

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  font-family: "Varela Round";
  background: #030303;

}
#header {
  background: url(https://farm4.staticflickr.com/3822/8820310586_8282f4975d_o_d.jpg) no-repeat center top;
  background-size: cover;
  position: fixed;
  height: 90%;
  bottom: 10%;
  right: 0;
  left: 0;
  top: 0;
  
  .center {
    text-align: center;
    position: absolute;
    color: #0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    
    .middle {
      position: absolute;
      right: 0;
      left: 0;
      top: 30%;

      h1 {
        font-family: "Lusitana";
        font-weight: normal;
        line-height: 1em;
        font-size: 4em;
        margin: 0;
      }
      span {
        line-height: 5em;
        font-size: 1em;
        
      }
    }
  }
}

ul {
  color: #FFFFFF;
  padding: auto;
  list-style-type: none;
  display:inline-block;
  text-align:center;
  padding-right: 5em;
  padding-left: 5em;
  
}

li  {
  margin: 30px; 
  display:inline-block;
}

#doc {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: url(https://farm4.staticflickr.com/3674/12205865716_0de1e18b51_b_d.jpg) no-repeat;
  background-size: cover;
}

#lend {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: url(https://farm8.staticflickr.com/7582/16137744011_15624afced_z_d.jpg) no-repeat;
  background-size: cover;
  
}

#cat {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: url(https://farm4.staticflickr.com/3701/10212113195_57e3cb03c4_z_d.jpg) no-repeat;
  background-size: cover;
  
}

#spot {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: url(https://farm9.staticflickr.com/8061/8249422176_8df9de4612_o_d.jpg) no-repeat;
  background-size: cover;
}

#doha {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: url(https://pennyyiwang.files.wordpress.com/2013/02/commercial.jpg) no-repeat;
  background-size: cover;
}

#more {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: url(https://farm8.staticflickr.com/7542/15519891283_8c67800a7c_z_d.jpg);
  background-size:cover;
}

$pageTopDecrease: 20px;


#page {
  background-image:url(https://farm8.staticflickr.com/7406/8809598221_b7cc5d08ea_o_d.jpg);
  background-size: 100%;
  position: relative;
  margin-top: -($pageTopDecrease);
  top: 95%;
}

.social
{text-align:center;}

a {
    color: #000000;
}
View Compiled
$(document).scroll(function() {
  $("#header").css({
    "background-position-y": (-$(this).scrollTop()/2)
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-1.11.1.min.js