Portfolio1

index.html

<!--FA FA ICONS-->
<!--Google Fonts-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <ul>
    <li>Lucy Sabin</li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
 </div>
</nav>
<div class="about section" id="about">
  <h1>About</h1>
  <p>Info</p>
  <img src="#"/>
</div>
<div class="portfolio-h1" id="portfolio">
  <h1>Portfolio</h1>
</div>
<div class="portfolio">
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
</div>
<div class="contact section" id="contact">
  <h1>Contact</h1>
  <p>My contact details.</p>
</div>
<footer>
  &copy; Copyright 2016
  
</footer>

portfolio1.markdown

Portfolio1

A Pen by Lucy Sabin on CodePen.

License.

style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*Styles */


ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
}

li:first-child {
  margin-right: auto;
}

li {
  display: inline-block;
  padding: 20px;
}

nav {
  background-color: silver;
}
.section {
  margin: 50px auto;
  padding-top: 20px;
  width:50%;
}
.about h1 {
  font-size:2em;
  margin-bottom:20px;
}
.about img {
  margin-left:200px;
  margin-top:-50px;
  float:right;
  border-radius:50%;
  border: solid 3px silver;
}
body{
  font-family: 'David Libre', serif;
}
.portfolio-h1 {
  margin: 10px auto;
  padding-top: 20px;
  width:50%;
  font-size:2em;
  margin-bottom:20px;
}
.portfolio {
  display:flex;
  justify-content:space-between;
  flex-wrap: wrap;
  margin: 10px auto;
  width:50%;
}
.portfolio img {
  width:48%;
  height:48%;
  margin:20px auto;
}
.contact h1{
  font-size:2em;
  margin-bottom:20px;
}
footer {
  background-color: silver;
  padding: 50px;
}

styles

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