Skip to content

Instantly share code, notes, and snippets.

@kingrichardiii

kingrichardiii/index.html

Last active September 15, 2015 20:30
Show Gist options
  • Save kingrichardiii/1cc990e47dc61eb96e5d to your computer and use it in GitHub Desktop.
Save kingrichardiii/1cc990e47dc61eb96e5d to your computer and use it in GitHub Desktop.
Download ZIP
Module 4: Lesson 18
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">
<link href="js/bootstrap.js">
<!-- JQuery Meida Script -->
<script src="js/jquery.media.js" type="text/javascript"></script>
<!-- Stellar Paralex Scrolling Script -->
<script src="jquery.stellar.min.js" type="text/javascript"></script>
<!-- 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 -->
<!-- JQuery for Tooltops -->
<script>
$(function () {
$('#item1').tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- 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="image" id="0"></div>
<div class="image" id="1"></div>
<div class="image" id="2"></div>
<div class="image" id="3"></div>
<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>
<button type="button" class="btn btn-info" data-toggle="tooltip" data=placement="top" title="Click to See More Work"> View More </button>
</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>
<button type="button" class="btn btn-info" data-toggle="tooltip" data=placement="top" title="Click to See More Work"> View More </button>
</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> <a href="#" title="Learning to Code via CareerFoundry" id="item1"> Coming soon... </a> 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>
<button type="button" class="btn btn-info" data-toggle="tooltip" data=placement="top" title="Click to See More Work"> View More </button>
</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>
<div class="row" id="learn-more">
<h2 class="learn-more"> Learn More </h2>
<div class="modal-button">
<button class="btn btn-primary modal_button" data-toggle="modal" data-target=".bs-example-modal-lg">Resume</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" and data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<iframe id="modal-frame" src="src/ResumeRichardIII.pdf"></iframe>
</div>
</div>
</div>
</div>
</div>
</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 the timeframe & pricing? <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">
<table>
<tr class="my-row">
<th>Service </th>
<th>Time Frame</th>
<th>Pricing</th>
</tr>
<tr class="my-row">
<td>Graphic Design</td>
<td>1-2 weeks</td>
<td>Upon Request</td>
</tr>
<tr class="my-row">
<td>Web Design</td>
<td>3-12 weeks</td>
<td>Upon Request</td>
</tr>
<tr class="my-row">
<td>Copywriting</td>
<td>1-2 weeks</td>
<td>Upon Request</td>
</tr>
<tr class="my-row">
<td>Illustration</td>
<td>1-2 weeks</td>
<td>Upon Request</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- End Accordian -->
</div>
<!-- End FAQ Section -->
<!-- Contact Section -->
<div class="container-fluid" id="contact">
<script src="js/scripts.js"></script>
<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>
<p id="char-count"></p>
<p id="visible-comment"></p>
<button type="submit" class="btn btn-info" id="submitbutton">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> &copy; 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>
Raw
script.js
var myWork = [ { title: "Illustration", pic: "img/flamingo.jpg" }, { title: "Web Design", pic: "img/webmockup.jpg" },
{ title: "Graphic Design", pic: "img/bookletsm.jpg" },
{ title: "Misc", pic: "img/deerlights.jpg" }
];
$(document).ready(function() {
$(".message-box").css("background-color", "#A6B0B9");
$("#submitbutton").on("click", function() {
console.log("clicked");
$(".message-box").val();
console.log(comment);
var comment = $(".message-box").val();
$("#visible-comment").html(comment);
return false;
});
$(".message-box").on("keyup", function() {
console.log("keyup happened");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if(charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "white");
};
});
var rows = $(".my-row");
for(var i=0; i<rows.length; ++i) {
if (i%2===0) {
$(rows[i]).css("background-color", "#A6B0B9");
};
};
for(var i=0; i<myWork.length; ++i) {
$("#" + i ).css("background-image", "url("+ myWork[i].pic +")" );
};
$(".image").mouseenter( function() {
console.log(this);
$(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myWork[this.id].title + "</p>");
}).mouseleave( function() {
$("p.info").html("");
});
}); //ENDS HERE
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment