Final About Page
CSS Code
css/portfolio.css
//Home Page CSS
#about-page .row {
padding-bottom: 50px;
}
#about-page #bio {
font-size: large;
}
#about-page .list-group-item:hover {
background-color: #BCF3EE;
}
HTML Code
pages/about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>John Doe</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/portfolio.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">John Doe</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="../index.html">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="about-page">
<div class="row">
<div class="col-md-6 text-center">
<img src="https://images.unsplash.com/photo-1450133064473-71024230f91b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ed901e5123c180bfc39c366c1183c2e6" class="img-circle " height="250">
</div>
<div class="col-md-6">
<h2 class="text-center">Hi, I'm John</h2>
<p id="bio">
My name is John and I am a made up person for this tutorial. I am 14 years old and have a blue shirt. Sometimes though, I like to wear a black shirt. I have a cat named Tabby and a fish named Fishy McFishFace. When I am not being an awesome programmer, I like to ride my bike around my town and say nice things to people.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2 class="text-center">What I Do</h2>
<p id="what-i-do">
<ul class="list-group">
<li class="list-group-item">I am really good at writing essays and short stories</li>
<li class="list-group-item">I like to cook. I can make a really good fruit salad</li>
<li class="list-group-item">I can draw birds really well</li>
<li class="list-group-item">I am learning to code!</li>
</ul>
</p>
</div>
<div class="col-md-6 text-center">
<img src="https://images.unsplash.com/photo-1455853828816-0c301a011711?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=8c8ec8bf49d283387ac5c31ec14bd5f7" class="img-rounded" height="350">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center">
<img src="https://images.unsplash.com/photo-1442346755583-2acd3658364d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=464c7a155f620d0c59a67dc0e56f940e" class="img-rounded" height="350">
</div>
<div class="col-md-6">
<h2 class="text-center">What I Want To Do</h2>
<p id="what-i-want-to-do">
<ul class="list-group">
<li class="list-group-item">I want to perform on stage</li>
<li class="list-group-item">I want to make one amazing website that helps people</li>
<li class="list-group-item">I want to read 100 books</li>
</ul>
</p>
</div>
</div>
</div>
<footer class="footer">
<p class="text-muted">Copyright 2016, John Doe</p>
</footer>
</div>
<!-- Our Javascript Files -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/portfolio.js"></script>
</body>
</html>