FCC Portfolio Page

index.html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
    </div>
    <ul class="nav navbar-nav visible-xs">
      <li>
        <a href="#">
          <p class="navbar-font">Portfolio</p>
        </a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right hidden-xs">
      <li>
        <a href="#about">
          <p class="navbar-font">About</p>
        </a>
      </li>
      <li>
        <a href="#portfolio">
          <p class="navbar-font">Portfolio</p>
        </a>
      </li>
      <li>
        <a href="#contact">
          <p class="navbar-font">Contact</p>
        </a>
      </li>
    </ul>
  </div>
</nav>
<div class="container" id="about">
  <div class="jumbotron">
    <div class="row">
      <div class="col-9 col-sm-9">
        <h2>Avi Warner</h2>
        <h3>Web Dev in Training</h3>
        <div class="btn-group" style="padding-top:20px">
          <a href="https://www.twitter.com/aviwarner" target="_blank" class="btn btn-info" role="button"><span class="fa fa-twitter"></span> Twitter</a>
          <a href="https://www.instagram.com/aviwawa" target="_blank" class="btn btn-info" role="button"><span class="fa fa-instagram"></span> Instagram</a>
          <a href="https://www.freecodecamp.com/aviwarner" target="_blank" class="btn btn-info" role="button "><span class="fa fa-free-code-camp "></span> FreeCodeCamp</a>
        </div>
      </div>
      <div class="col-3 col-sm-3 ">
        <img src="https://pbs.twimg.com/profile_images/543972652247814144/V4jYqDPm_400x400.jpeg " class="img-circle profile-pic img-responsive hidden-xs" alt="Round pic of Avi">
      </div>
    </div>
  </div>
</div>
<div class="container" style="margin-top:-70px;" id="portfolio">
  <div class="jumbotron">
    <h2 style="margin-bottom:40px">Portfolio</h2>
    <div class="row align-center" style="max-width:90%;margin:auto">
      <div class="col-sm-6">
        <div class="thumbnail">
          <img src="https://anonimag.es/i/P22010352c6a08.png" class="img-responsive" alt="website thumbnail 1">
          <div class="caption center-block">some caption text</div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="thumbnail">
          <img src="https://anonimag.es/i/P22010352c6a08.png" class="img-responsive border" alt="website thumbnail 2">
          <div class="caption center-block">some caption text</div>
        </div>
      </div>
    </div>
    <div class="row align-center" style="max-width:90%;margin:auto">
      <div class="col-sm-6">
        <div class="thumbnail">
          <img src="https://anonimag.es/i/P22010352c6a08.png" class="img-responsive" alt="website thumbnail 1">
          <div class="caption center-block">some caption text</div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="thumbnail">
          <img src="https://anonimag.es/i/P22010352c6a08.png" class="img-responsive border" alt="website thumbnail 2">
          <div class="caption center-block">some caption text</div>
        </div>
      </div>
    </div>
    <div class="row align-center" style="max-width:90%;margin:auto">
      <div class="col-sm-6">
        <div class="thumbnail">
          <img src="https://anonimag.es/i/P22010352c6a08.png" class="img-responsive" alt="website thumbnail 1">
          <div class="caption center-block">some caption text</div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="thumbnail">
          <img src="https://anonimag.es/i/P22010352c6a08.png" class="img-responsive border" alt="website thumbnail 2">
          <div class="caption center-block">some caption text</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container" style="margin-top:-70px;" id="contact">
  <div class="jumbotron">
    <h2 style="margin-bottom:40px">Contact</h2>
    <div class="row">
      <div class="col-sm-7">
        <input class="form-control text">
        <p>Name</p>
        </input>
        <input class="form-control email">
        <p>Email</p>
        </input>
        <input class="form-control text">
        <p>Message</p>
        </input>
        <button type="submit" class="btn btn-primary"><span class="navbar-font" style="font-size:20px"><i class="fa fa-paper-plane-o"></i> Submit</span></button>
      </div>
      <div class="col-sm-1"></div>
      <div class="col-sm-4">
        <p style="font-weight:300">So the embarrassing thing is, this form doesn't actually work. I've figured out how to make the form, but I haven't learned any PHP yet. Pretend it does, and don't send me any spam.</p>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <hr>
  <h4 class="footer-text">Built by typing on a keyboard. No copy/pasta, no cheating. c/o Avi Warner</h4>
</div>

pjrjoa.markdown

PjRjoa

A Pen by Avi Warner on CodePen.

License.

style.css

body {
  padding-top: 50px;
  background-image: url("https://anonimag.es/i/P22010352c6a08.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
}

.jumbotron {
  margin-top: 60px;
  background: rgba(255, 255, 255, 0.6);
}

.profile-pic {
  border-style: solid;
  border-color: white;
  border-width: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.thumbnail {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h2 {
  font-weight: 300;
  font-size: 62px;
}

h3 {
  font-weight: 300;
}

.navbar-font {
  font-weight: 200;
  font-size: 25px;
}

.footer-text {
  color: white;
  font-weight: 200;
  text-align: center;
}

styles

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