Last active
September 1, 2015 20:50
-
-
Save kingrichardiii/86bc2448dd7fc8fdbeeb to your computer and use it in GitHub Desktop.
Module 3: Lesson 12
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> | |
<!-- Facebook Button JavaScript for Footer --> | |
<div id="fb-root"></div> | |
<script>(function(d, s, id) { | |
var js, fjs = d.getElementsByTagName(s)[0]; | |
if (d.getElementById(id)) return; | |
js = d.createElement(s); js.id = id; | |
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4"; | |
fjs.parentNode.insertBefore(js, fjs); | |
}(document, 'script', 'facebook-jssdk'));</script> | |
<!-- Navbar --> | |
<nav 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/rrthirdlogo.png" alt="rrlogo"> | |
</a> | |
</div> | |
<div class="navbar-collapse collapse"> | |
<ul class="nav navbar-nav"> | |
<li><a href="#top"><strong> Home </strong></a></li> | |
<li><a href="#about"><strong> About </strong></a></li> | |
<li><a href="#work"><strong> Work </strong></a></li> | |
<li><a href="#FAQ"><strong> FAQ </strong></a></li> | |
<li><a href="#contact"><strong> Contact </strong></a></li> | |
</ul> | |
</div> <!--Navbar Collapse Ends --> | |
</div> <!-- Container Fluid Ends --> | |
</nav> <!-- 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 --> | |
<!-- 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-fluid" id="work"> | |
<h4> Work </h4> | |
<div class="row" id="projects"> | |
<div class="col-xs-6 col-md-4"> | |
<img src="img/bookletsm.jpg" alt="booklet" class="img-responsive"> | |
<h2 class="description"> Graphic Design </h2> | |
<p> Digital may be king, but print still has a sense of permanence. From business cards to brochures and displays, I design printed materials and marketing collateral that makes a lasting impression. </p> | |
</div> | |
<div class="col-xs-6 col-md-4"> | |
<img src="img/flamingo.jpg" alt="lifeguard" class="img-responsive"> | |
<h2 class="description"> Illustrations </h2> | |
<p> When it comes to differentiating your brand, it’s tough to beat custom illustration. From infographics to conceptual drawings, I provide designs that appeal to your audience. </p> | |
</div> | |
<div class="col-xs-6 col-md-4"> | |
<img src="img/webmockup.jpg" alt="laptop" class="img-responsive"> | |
<h2 class="description"> Web Design </h2> | |
<p> Coming soon... I create websites that enable clients to establish their brand presence online while making use of the latest technologies to ensure their website delivers results. </p> | |
</div> | |
</div> | |
</div> | |
<!-- End Work Section --> | |
<!-- FAQ Section --> | |
<div class="container" id="FAQ"> | |
<h4> FAQ </h4> | |
<div class="video"> | |
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe> | |
</div> | |
<!-- Accordian Begins --> | |
<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 create content for the web 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 days. | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- End Accordian --> | |
</div> | |
<!-- End FAQ Section --> | |
<!-- Contact Section --> | |
<div class="container-fluid" id="contact"> | |
<div class="contact_main"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-4 col-xs-12 contactbox"> | |
<div class="contactInfo"> | |
<h2>Contact Me</h2> | |
<p>Let's work together. Drop me a line. Tell me what you need. I'm here to help your business grow.</p> | |
<div class="email"> | |
<p> | |
<span class="glyphicon glyphicon-envelope"></span> richard.rabeau@gmail.com | |
</p> | |
</div> | |
<div class="phone"> | |
<p> | |
<span class="glyphicon glyphicon-phone"></span> 609.668.7828 | |
</p> | |
</div> | |
<div class="location"> | |
<p> | |
<span class="glyphicon glyphicon-home"></span> Philadelphia, PA | |
</p> | |
</div> | |
</div> | |
</div> | |
<div class="col-md-8 col-xs-12"> | |
<form> | |
<div class="form-group"> | |
<label class="label" for="name">Name:</label> | |
<input type="textBox" class="form-control" id="name" placeholder="Your name" title="Enter your name here" minlength="20"> | |
</div> | |
<div class="form-group"> | |
<label class="label" for="email">Email(*):</label> | |
<input type="email" class="form-control" id="email" placeholder="Your email address" required="required" title="Enter your email address here" minlength="20"> | |
</div> | |
<div class="form-group"> | |
<label class="label" for="tel">Phone:</label> | |
<input type="tel" class="form-control" id="tel" placeholder="Your telephone number" title="Enter your telephone number here" minlength="10"> | |
</div> | |
<label class="label" id="message_label" for="message">Your Massage(*):</label> | |
<textarea class="message-box" id="message" style="resize:none" cols="40" rows="5" placeholder="Enter your message here" required="required" title="Leave your message here" minlenght="20"></textarea> | |
<button type="submit" class="btn btn-info" id="btn_form">Submit</button> | |
</form> | |
</div> | |
</div> <!-- /row --> | |
</div> <!-- /container --> | |
</div> <!-- /contact_main --> | |
</div> <!-- End Contact Section --> | |
<!-- Can place script tags with JavaScript files here --> | |
<!--footer --> | |
<!--footer --> | |
<footer> | |
<div class="copyright"> | |
<p> © Richard Rabeau III 2015 </p> | |
</div> | |
<div class="socialmedia"> | |
<div class="twitter-icon"> | |
<a href="https://twitter.com/richeze" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @richeze</a> | |
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | |
</div> | |
<div class="fb-like" data-href="https://www.facebook.com/richard.rabeau.7" data-layout="button" data-action="like" data-show-faces="false" data-share="false"> | |
</div> | |
</div> | |
</footer> | |
<!-- End footer --> | |
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container-fluid { | |
z-index: -1; | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.container { | |
padding-top: 50px; | |
} | |
.navbar { | |
background-color: #C0C0C0; | |
border: none; | |
color: black:!important; | |
} | |
.nav { | |
float: right; | |
} | |
.navbar-fixed-top .active a { | |
background-color: #6d7276!important; | |
} | |
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: auto; | |
} | |
.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: auto; | |
margin-left: 10px; | |
} | |
.row { | |
padding-left: 100px; | |
padding-right: 100px; | |
margin-bottom: 30px; | |
} | |
#work { | |
background-color: #e1e1e1; | |
color: #6d7276; | |
} | |
#FAQ { | |
margin-bottom: 50px; | |
} | |
#about { | |
margin-bottom: 50px; | |
} | |
#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%; | |
} | |
.glyphicon-plus { | |
color:#6d7267; | |
} | |
.socialmedia { | |
display: inline-block; | |
float: right; | |
padding-top: 10px; | |
padding-right: 10px; | |
} | |
.copyright { | |
display: inline-block; | |
float: left; | |
padding-left: 10px; | |
} | |
.video { | |
text-align: center; | |
} | |
/* Form */ | |
.form-group { | |
margin-top: 20px; | |
margin-bottom: 20px; | |
padding-left: 10%; | |
padding-right: 10%; | |
} | |
.form-control { | |
width: 100%; | |
} | |
.message-box { | |
width: 80%; | |
margin-bottom: 10px; | |
margin-left: 10%; | |
margin-right: 10%; | |
} | |
.label { | |
color: white; | |
font-family: Josefin Slab, serif; | |
font-size: 18px; | |
} | |
.contactInfo { | |
margin: 10px; | |
} | |
/*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; | |
} | |
.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