Skip to content

Instantly share code, notes, and snippets.

@wgrossiteratwork

wgrossiteratwork/FreeCodeCamp Portfolio Project

Last active August 21, 2017 19:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wgrossiteratwork/a99313a33bb36221dec63676a5309cd6 to your computer and use it in GitHub Desktop.
Save wgrossiteratwork/a99313a33bb36221dec63676a5309cd6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FreeCodeCamp Portfolio Project
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Warren Rossiter | Portfolio</title>
<meta name="description" content="FreeCodeCamp Portfolio Project">
<meta name="author" content="Warren Rossiter">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body data-spy="scroll" data-target="#main-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Product Name</a>
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<a href="#" class="btn btn-success navbar-btn navbar-right">Buy now</a>
<ul class="nav navbar-nav">
<li><a href="#section-testimonials">Testimonials</a></li>
<li><a href="#section-features">Features</a></li>
<li><a href="#section-gallery">Gallery</a></li>
<li><a href="#section-faq">FAQ</a></li>
<li><a href="#section-contact">Contact</a></li>
</ul>
</div><!-- end collapse -->
</div><!-- end container -->
</nav><!-- end navbar -->
<div class="container">
<!-- IMAGE AND INTRO TEXT -->
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="image-wrapper">
<img src="http://bit.ly/2u9JArS" alt="winston churchill">
</div>
<h1 class="text-center">Hello! I'm Warren Rossiter</h1>
<h4 class="text-center">I'm a User Interface Designer and Front-End Developer</h4>
<p class="text-center paragraph">I set up WordPress websites that enable people to have an online digital presence. If you would like to chat about setting up your own website or have an existing website you would like to discuss please <a href="#">contact me</a>.</p>
</div><!-- col-md-8 end -->
</div><!-- Row end -->
</section><!-- end section-->
<!-- PORTFOLIO -->
<section>
<div class="row">
<div class="col-md-4 image-3">
<a href="#"><img src="http://bit.ly/2f3qXnK" alt="financial wellbeing program"></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is longer.</p>
</div>
<div class="col-md-4 image-4">
<a href="#"><img src="http://bit.ly/2f3qXnK" alt="financial wellbeing program"></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is longer.</p>
</div>
<div class="col-md-4 image-4">
<a href="#"><img src="http://bit.ly/2f3qXnK" alt="financial wellbeing program"></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is longer.</p>
</div>
</div><!-- Row end -->
<div class="row">
<div class="col-md-3 image-3">
<a href="#"><img src="http://bit.ly/2f3qXnK" alt="financial wellbeing program"></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is longer.</p>
</div>
<div class="col-md-3 image-4">
<a href="#"><img src="http://bit.ly/2f3qXnK" alt="financial wellbeing program"></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is longer.</p>
</div>
<div class="col-md-3 image-4">
<a href="#"><img src="http://bit.ly/2f3qXnK" alt="financial wellbeing program"></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is longer.</p>
</div>
<div class="col-md-3 image-4">
<a href="#"><img src="http://bit.ly/2f3qXnK" alt="financial wellbeing program"></a>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is longer.</p>
</div>
</div><!-- Row end -->
</section>
<hr>
<section>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-left" id="section-contact">
<h2>Contact <small>Let's get in touch</small></h2>
</div>
<form action="#" class="form-horizontal" role="form">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" placeholder="Email address">
</div>
<div class="form-group">
<input type="url" class="form-control" id="contact-website" placeholder="Website">
</div>
<div class="form-group">
<textarea name="contact-message" id="contact-message" class="form-control" cols="30" rows="10" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Send message</button>
</div>
</form>
</div>
</div>
</section>
</div><!-- Container end -->
<hr>
<!-- FOOTER -->
<section>
<div class="text-center">
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
<ul class="list-inline">
<li><a href="">Twitter</a></li>
<li><a href="">Facebook</a></li>
</ul>
<p>&copy; Copyright 20014</p>
</div>
</section>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Raw
stylesheet
body {
font-family: 'Open Sans', sans-serif;
}
/* Fonts */
h1 {
font-size: 42px;
margin: 30px 0px 10px 0px;
}
h4 {
font-size: 18px;
}
a {
color: #c9302c;
}
.paragraph {
margin: 40px 0px 40px 0px;
}
.card-text {
font-size: 95%;
margin: 10px 0px 0px 0px;
}
/* Imagery */
.image-wrapper {
width: 130px;
height: 130px;
overflow: hidden;
margin: 100px auto 10px auto;
border-radius: 50%;
}
img {
width: 100%;
}
/* Main navigation */
.navbar-nav li a {
margin: 0px 0px 0px 0px;
font-size: 14px;
}
/* Portfolio images */
.portfolio-1 {
margin: 0px 0 0px 0;
}
.portfolio-2 {
margin: 0px 0 60px 0;
}
.image-1, .image-2, .image-3, .image-4 {
margin-bottom: 30px;
}
button {
float: right;
}
#section-contact {
margin-left: -15px;
margin-bottom: 20px;
}
/* Footer */
footer {
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f1f1f1;
margin-top: 40px;
}
footer p {
margin-bottom: .25rem;
}
/* Media queries */
@media only screen and (max-width: 768px) {
.portfolio-2 {
margin: 0px 0px 0px 0px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment