Portfolio Page

index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar turnBlue navbar-fixed-top">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#WORK">progress</a></li>
      <li><a href="#DONE">complete</a></li>
      <li><a href="#SOCIAL">social</a></li>
    </ul>
  </div>
</nav>

<div class="container-fluid text-center" style="padding-top: 110px; padding-bottom: 100px;">
  <h1><div class="standardBox">quinn</div> vinlove</h1>
  <div class="h4 titleSpace">i
    <div class="miniBox">make</div> things on the internet</div>
</div>

<div class="container-fluid turnBlue contentSpacer" id="WORK">
  <div class="h4 text-center">stuff i'm
    <div class="miniBox">working</div> on</div>

  <div class="row titleSpace" style="padding-left: 10%; padding-right: 10%;">
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
  </div>

  <div class="row titleSpace" style="padding-left: 10%; padding-right: 10%;">
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
    <div class="col-md-3 thumbnail">
      <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    </div>
  </div>
</div>

<div class="container-fluid" id="DONE">
  <div class="container contentSpacer">
    <div class="h4 text-center">stuff i'm
      <div class="miniBox">done</div> with</div>

    <div class="row titleSpace" style="padding-left: 10%; padding-right: 10%;">
      <div class="col-md-4 thumbnail">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
      </div>
      <div class="col-md-4 thumbnail">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
      </div>
      <div class="col-md-4 thumbnail">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
      </div>
    </div>

    <div class="row titleSpace" style="padding-left: 10%; padding-right: 10%;">
      <div class="col-md-4 thumbnail">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
      </div>
      <div class="col-md-4 thumbnail">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
      </div>
      <div class="col-md-4 thumbnail">
        <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
      </div>
    </div>
  </div>
</div>

<div class="container-fluid turnBlue" id="SOCIAL">
  <div class="container contentSpacer text-center">
    <div class="h4 text-center">places you can
      <div class="miniBox">find</div> me</div>
    <p class="titleSpace h2">
      <a href="https://www.facebook.com/quinn.vinlove"><i class="fa fa-facebook-square"></i></a>
      <a href="https://www.freecodecamp.com/quin2"><i class="fa fa-free-code-camp"></i></a>
      <a href="https://github.com/quin2"><i class="fa fa-github-square"></i></a>
      <a href="https://tumblr.com"><i class="fa fa-tumblr"></i></a>
    </p>
  </div>


  

portfolio-page.markdown

Portfolio Page

A Pen by Quinn on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

.turnBlue{
  background-color: #B2DFEE;
}

h1{
  font-size: 65px;
}

.standardBox{
  border: 5px solid black;
  display: inline;
  padding: 6px;
}

.miniBox{
  border: 3px solid black;
  display: inline;
  padding: 1px;
}

.titleSpace{
  margin: 50px 0px 0px 0px;
}

.contentSpacer{
  padding: 50px 0px 50px 0px;
}

nav{
  border: 5px solid black;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />