Personal Portfolio Webpage

index.html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://mindymcadams.com/" target="_blank">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
        <li><a href="#portfolio">Portfoilo</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- end navbar code -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 id="about">About</h1>
    </div>
  </div>
  <div class="row alert-success">
    <div class="col-xs-12">
      <h1 id="portfolio">Portfolio</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h1 id="contact">Contact</h1>
<form class="form-horizontal">
  <fieldset>
    <legend>Send me a message. Be nice.</legend>
    <div class="form-group has-success">
      <label for="inputName" class="col-lg-2 control-label">Your name</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputName" placeholder="Name">
      </div>
    </div>
    <div class="form-group has-success">
      <label for="inputEmail" class="col-lg-2 control-label">Your email</label>
      <div class="col-lg-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
      </div>
    </div>
    <div class="form-group has-success">
      <label for="message" class="col-lg-2 control-label">Message</label>
      <div class="col-lg-10">
        <textarea class="form-control" rows="3" id="message"></textarea>
        <span class="help-block">Please write a delightful message above.</span>
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <button type="submit" class="btn btn-success">Send</button>
        <button type="reset" class="btn btn-default">Cancel</button>
      </div>
    </div>
  </fieldset>
</form>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <!-- wrapped all buttons in a div so they could float right -->
      <div class="pull-right">
        <a class="btn btn-success" href="https://twitter.com/macloo" target="_blank" aria-label="Twitter">
          <i class="fa fa-twitter fa-4x" title="Twitter"></i>
        </a>
        <a class="btn btn-success" href="https://www.facebook.com/mmjournalist/" target="_blank" aria-label="Facebook">
          <i class="fa fa-facebook-square fa-4x" title="Facebook"></i>
        </a>        
        <a class="btn btn-success" href="https://www.youtube.com/playlist?list=PLZFU-W6LLeecJuSQh20QUU_gCmS30sLTB" target="_blank" aria-label="YouTube">
          <i class="fa fa-youtube fa-4x" title="YouTube"></i>
        </a>        
        <a class="btn btn-success" href="https://www.instagram.com/macloo/" target="_blank" aria-label="Instagram">
          <i class="fa fa-instagram fa-4x" title="Instagram"></i>
        </a>      
        <a class="btn btn-success" href="https://www.flickr.com/photos/macloo/albums" target="_blank" aria-label="Flickr">
          <i class="fa fa-flickr fa-4x" title="Flickr"></i>
        </a>      
        <a class="btn btn-success" href="https://www.linkedin.com/in/macloo" target="_blank" aria-label="LinkedIn">
          <i class="fa fa-linkedin fa-4x" title="LinkedIn"></i>
        </a>
        </div>
      </div>
  </div>
    <div class="row">
      <div class="col-xs-12">
        <h2>Footer TK</h2>
        <p>Bootstrap theme: <a href="https://bootswatch.com/sandstone/" target="_blank">Sandstone</a> 
          Icons from <a href="http://fontawesome.io/" target="_blank">Font Awesome</a></p>
    </div>
  </div>
</div>

personal-portfolio-webpage.markdown

Personal Portfolio Webpage

Requirements: Access all of the portfolio webpage's content just by scrolling. Click different buttons that will take me to the portfolio creator's different social media pages. See thumbnail images of different projects the portfolio creator has built. Navigate to different sections of the webpage by clicking buttons in the navigation.

A Pen by Mindy McAdams on CodePen.

License.

script.js

/*  jQuery and bootstrap.js enabled  */

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

/*  Bootstrap Sandstone theme  */

.navbar {
  -webkit-box-shadow: 0px 10px 21px -6px rgba(102,102,102,1);
  -moz-box-shadow: 0px 10px 21px -6px rgba(102,102,102,1);
  box-shadow: 0px 10px 21px -6px rgba(102,102,102,1);
}

/* account for the fixed navbar */
h1 {
  padding-top: 70px;
}

styles

<link href="http://macloo.com/css/bootstrap-sandstone/bootstrap.min.css" rel="stylesheet" />

This is my own work for the Free Code Camp project called "Personal Portfolio Webpage." This is about two hours' work, using the free Bootstrap Sandstone theme. Gist created via export from Codepen.io. My Pen is here:

https://codepen.io/macloo/full/rjBKLo/

"Personal Portfolio Webpage" project description:

https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage