Portfolio

index.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<div class = "container-fluid top-bar">
  <div class = "row"> 
    <div class = "col-md-1 text-left">    
      <img class = "img-circle" src = "https://github.com/TanyaCouture/portfolioImages/blob/master/10848776_10205150036767525_6212516804649939681_o.jpg?raw=true" alt = "Crater  Lake">
    </div>
    <div class = "col-md-10 text-right">
      <strong>Web  Development Portfolio</strong>
    </div>
  </div>
</div>
  
<div class =  "container-fluid">
  <ul class = "nav nav-pills pull-right" role = "tablist">       
    <li class="active"><a href="#top-section">Home</a></li>
    <li><a href = "#About">About</a></li>
    <li><a href = "#Portfolio">Portfolio</a></li>
    <li><a href = "#Contact">Contact</a></li>
  </ul>
</div>
    
<div class = "container-fluid">
  <ul style = "list-style-type:none">
  <li><h1><a id = "About">About</a></h1></li>
        </br>
    <p>Welcome to my web development portfolio where all of my web applications will be displayed as I complete them. If you like what you see, my contact information is listed below.</p>
        </br>
      <li><h1><a id = "Portfolio">Portfolio</a></h1></li>
    <div class =  "contents">
        </br>
     <!-- <a target = '_blank' href="http://climatechangecomedian.com">Climate Change Comedian: WordPress Website</a>-->

<img src = "https://github.com/TanyaCouture/portfolioImages/blob/master/PortfolioComedian.png?raw=true">
</div>
        </br>
        </br>
        </br>
      <li><h1><a id = "Contact">Contact</a></h1></li> 
      </br>
      <img src =  "https://github.com/TanyaCouture/portfolioImages/blob/master/tanyaEmail2-e1469975117431.jpg?raw=true">
    </ul>
    </br>
    </br>
</div>

  <div class = "container-fluid bottom-bar">
    <span class = "fa-stack fa-2x">
      <a target = '_blank' href = "https://www.linkedin.com/in/tanya-couture-455b8313">
      <i class = "fa fa-circle fa-stack-2x"></i>
      <i class = "fa fa-linkedin fa-stack-1x fa-inverse"></i></a>
    </span>

    <span class = "fa-stack fa-2x">
      <a target = '_blank' href = "https://github.com/tanyacouture"> 
      <i class =  "fa fa-circle fa-stack-2x"></i>
      <i class = "fa fa-github fa-stack-1x fa-inverse"></i></a>
    </span>
  </div>

portfolio.markdown

Portfolio

A Pen by Tanya Couture on CodePen.

License.

style.css

.top-bar{
  background-color:#9BABB5;
  font-family: Lucida Calligraphy;
  font-size: 40px;
  padding:20px; 
}
.img-circle{
  width:200px
}

.bottom-bar{
  background-color:#9BABB5;
  padding: 50px
}

.contents{
  text-align: center;
}

.fa-stack{
  float: right;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />