Skip to content

Instantly share code, notes, and snippets.

@kingrichardiii

kingrichardiii/index.html

Created August 28, 2015 20:32
Show Gist options
  • Save kingrichardiii/06d73dd0d72ba7266dc6 to your computer and use it in GitHub Desktop.
Save kingrichardiii/06d73dd0d72ba7266dc6 to your computer and use it in GitHub Desktop.
Download ZIP
One Page Scroll
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Richard Rabeau III</title>
<!-- JQuery -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- My CSS -->
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="main stylesheet">
<!-- My Fonts -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template go here -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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>
</div>
<div class="rrlogo">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="img/rrlogo.png" alt="rrlogo">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#top"> Home </a></li>
<li><a href="#about"> About </a></li>
<li><a href="#work"> Work </a></li>
<li><a href="#FAQ"> FAQ </a></li>
<li><a href="#contact"> Contact </a></li>
</ul>
</div> <!--Navbar Collapse Ends -->
</div> <!-- Container Fluid Ends -->
</div> <!-- Navbar Ends -->
<!-- Bootstrap Carosuel -->
<div class="container-fluid" id="top">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/stock2.jpg" alt="Computer">
<div class="carousel-caption">
<h3> Web Design + Development </h3>
</div>
</div>
<div class="item">
<img src="img/stock3.jpg" alt="Paper">
<div class="carousel-caption">
<h3> Illustration </h3>
</div>
</div>
<div class="item">
<img src="img/stock1.jpg" alt="Computer Two">
<div class="carousel-caption">
<h3> Graphic Design </h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- End Bootstrap Carosuel -->
<!-- Bootstrap Columns/Rows -->
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
<h2>Portfolio Concepts</h2>
<p> I took a course in web design while studying at The New School, which gave me some exposure to HTML/CSS, and an eagerness to learn more. In terms of design, I am minimalist attracted to bold colors, so I would like my portfolio site to reflect that. I also dig the flat design trend and parallax scrolling. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-6">
<h2>Project Goals</h2>
<p>I currently work full-time as a graphic designer in the marketing department of a real estate firm. I’ll be dedicating my evenings (and slow days at work, shhh) to this course. As a somewhat recent college grad, I am hoping I am still a quick learner and haven’t yet lost my work ethic. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-6">
<h2>Course Goals</h2>
<p>I am taking this course to gain coding skills and experience, so I can transition my career from graphic design to web design and development. My goal is to find a entry-level, front-end developer job, preferably at a cool tech start-up or boutique marketing agency.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
<!-- End Bootstrap Columns/Rows -->
<!-- About Section -->
<div class="container" id="about">
<div class="header">
<h4> About Me </h4>
</div>
<div class="image-column">
<img src="img/richardiii.png" alt="richard">
</div>
<div class="intro-column">
<h2> Introduction </h2>
<p>
Hello! I'm Richard Rabeau III. I'm a graphic and web designer from Philadelphia. I solve problems visually, and create various things for the web. I’m also learning how to code.
</p>
</div>
<div class="skills-column">
<h2> My Skills </h2>
<ul id="skill-list">
<li>Graphic Design</li>
<li>Web Design</li>
<li>Web Development</li>
<li>Branding</li>
<li>Copywriting</li>
</ul>
</div>
<div class="main-text">
<h2> My Story </h2>
<p>
I’m a graphic and web designer living and working in the City of Brotherly Love. Before pursuing a career in the design industry, I dabbled in a variety of other disciplines (including working part-time in college as a cake decorator), and switched majors at least three times (psychology to creative writing to digital media). I’m currently in the works of adding web developer to my bag of tricks.
<p/>
<p>
As a design professional, I maintain a healthy balance between functionality and visual impact in all my work. I believe good design should simple and effective with a hint of playfulness.
</p>
</div>
</div>
<!-- End About Section -->
<!-- Work Section -->
<div class="container" id="work">
<h4> Work </h4>
<div class="row" id="projects">
<div class="col-md-4 col-xs-6">
<img src="img/lighthouse.jpg" alt="lighthouse" class="img-responsive">
<h2 class="description"> Jersey Shore Illustrations </h2>
</div>
<div class="col-xs-6 col-md-4">
<img src="img/lucy.jpg" alt="lucy the elephant" class="img-responsive">
<h2 class="description"> Jersey Shore Illustrations </h2>
</div>
<div class="col-xs-6 col-md-4">
<img src="img/lifeguard.jpg" alt="lifeguard" class="img-responsive">
<h2 class="description"> Jersey Shore Illustrations </h2>
</div>
<div class="col-xs-6 col-md-4">
<img src="img/lifeguard.jpg" alt="lifeguard" class="img-responsive">
<h2 class="description"> Jersey Shore Illustrations </h2>
</div>
<div class="col-xs-6 col-md-4">
<img src="img/lucy.jpg" alt="lucy the elephant" class="img-responsive">
<h2 class="description"> Jersey Shore Illustrations </h2>
</div>
<div class="col-xs-6 col-md-4">
<img src="img/lighthouse.jpg" alt="lighthouse" class="img-responsive">
<h2 class="description"> Jersey Shore Illustrations </h2>
</div>
</div>
</div>
<!-- End Work Section -->
<!-- FAQ Section -->
<div class="container" id="FAQ">
<h4> FAQ </h4>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why did you decide to become a web developer? <span class="glyphicon glyphicon-plus"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
As a graphic designer, I knew how to design but not to code. I wanted to do more than ‘splice’ images in Photoshop into perfectly positioned tables. I eventually decided to take the plunge and enrolled in a full-stack web development course.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What is your design process? <span class="glyphicon glyphicon-plus"></span>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
My creative process begins with identifying a client’s needs, and familiarizing myself with their brand. Based on your marketing message and content, I then begin to develop design sketches and a skeletal framework. Once refined, it’s onto the development process.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What is your average project turnaround? <span class="glyphicon glyphicon-plus"></span>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Delivery dates are contingent on the client’s needs and differ with each project. Most custom websites move through the steps of conception, design, and development within 30-60 days.
</div>
</div>
</div>
</div>
</div>
<!-- End FAQ Section -->
<!-- Contact Section -->
<div class="container-fluid" id="contact">
<h4> Contact me </h4>
<div class="main-text">
<p>
Let's work together. Drop me a line. Tell me what you need. I'm here to help your business grow.
</p>
</div>
<div class="email">
<p>
<span class="glyphicon glyphicon-envelope"></span> Message me
</p>
<h2> richard.rabeau@gmail.com </h2>
</div>
<div class="phone">
<p>
<span class="glyphicon glyphicon-phone"></span> Call Me
</p>
<p> 609.668.7828 </p>
</div>
<div class="location">
<p>
<span class="glyphicon glyphicon-home"></span> Meet me
</p>
<p> Philadelphia, PA </p>
</div>
</div>
<!-- End Contact Section -->
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
Raw
style.css
.jumbotron {
background-image: url("../img/blurcity.jpg");
background-size: cover;
}
.jumbotron p {
color: white;
}
.jumbotron h1 {
color: white;
padding-top: 10px;
}
.container-fluid {
z-index: -1;
padding-left: 0;
padding-right: 0;
}
.container {
padding-top: 50px;
}
.navbar {
background-color: #C0C0C0;
border: none;
}
.nav {
float: right;
}
body {
position: relative;
background-color: #a7c5df;
color: #FFF;
}
.contact {
background-color: #FFF;
text-align: center;
font-size: 1.25em;
}
.panel-body {
background-color: #e1e1e1;
color: #000;
}
.description {
margin-top: 10px;
}
.img-responsive {
margin-top: 10px;
}
.image-column,
.skills-column,
.intro-column {
display: inline-block;
float: left;
width: 30%;
padding: 30px 20px;
}
.main-text {
clear: both;
padding-top: 30px;
}
#contact {
text-align: center;
}
.navbar-brand img {
margin-top: -10px;
margin-left: 10px;
}
#contact {
background-image: url("../img/blackdesk.jpg");
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
padding: 100px;
padding-top: 50px;
height: 100%;
}
/*typography*/
h1,
h2 {
font-family: Josefin Slab, Times, Times New Roman, serif;
font-size: 1.75em;
}
h3 {
font-family: Bitter, Times, Times New Roman, serif;
font-size: 4em;
padding-bottom: 20px;
}
h4 {
font-family: Bitter, Times, Times New Roman, serif;
font-size: 3em;
text-align: center;
}
p{
font-family: Josefin Sans, Helvetica, Arial, sans-serif;
font-size: 1.25em;
}
.jumbotron h1 {
font-size: 2.5em;
}
.navbar {
font-family: Josefin Sans, Helvetica, Arial, sans-serif;
font-size: 1.25em;
}
.panel-title {
font-family: Josefin Sans, Helvetica, Arial, sans-serif;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.panel-body {
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment