Skip to content

Instantly share code, notes, and snippets.

@RJNY

RJNY/index.html

Last active February 1, 2018 04:58
Show Gist options
  • Save RJNY/b338ed5a167fa28313b5951a82bbdeb5 to your computer and use it in GitHub Desktop.
Save RJNY/b338ed5a167fa28313b5951a82bbdeb5 to your computer and use it in GitHub Desktop.
Download ZIP
Seth Beebe
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>New Leaf Design</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script src="js/jquery.stellar.min.js"></script>
<script src="js/scripts.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Fjalla+One">
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="New Leaf Design" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.facebook.com/seth.beebe" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<div id="fb-root"></div>
<!-- navbar starts here -->
<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 class="navbar-brand">
<a href="#">New Leaf Design</a>
</div><!-- end navbar-brand -->
</div><!-- end navbar header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href='#home'>Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href='#about'>About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href='#faq'>FAQ</a></li>
</ul>
</div><!-- end navbar-collapse collapse -->
</div><!-- end container-fluid -->
</nav>
<div class="container-fluid" id="home"><!--hero images-->
<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="http://www.placehold.it/1980x1600" alt="Red maple leaf">
<div class="carousel-caption">
<h3>Seth Beebe. Web Developer.</h3>
<p>From online portfolios to e-commerce stores, trust me with all of your web development needs.</p>
</div>
</div>
<div class="item">
<img src="http://www.placehold.it/1980x1600" alt="vintage typewriter on white">
<div class="carousel-caption">
<h3>Design.</h3>
<p>Clean design allows your brand and product easily shine through.</p>
</div>
</div>
<div class="item">
<img src="http://www.placehold.it/1980x1600" alt="Desk setting with orange chair">
<div class="carousel-caption">
<h3>Functionality.</h3>
<p>A website custom built to meet all of your business needs</p>
</div>
</div>
</div><!--/hero images-->
<!-- 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>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>For my <a href="#" title="More Information" id="item1">portfolio</a> I would like to highlight several different website designs for individuals, small businesses, and larger brands. I would like a very clean and modern layout with minimalist geometric design elements.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="More Information">View details &raquo;</button>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I intend to spend a minimum of 15 hours a week on my course work, but I will strive to spend 20-25 hours a week on coursework and additional research that will aid me in my knowledge of web development.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>I am taking this course with the intent of changing my career. Whether I stay in my former company or start a freelance business is not yet decided, but I intend to learn as much as I can while in this course.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
<hr>
<div class="">
<div class="row" id="work">
<div class="header">
<h1>My Work</h1>
</div><!-- /header -->
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
<div class="col-xs-6 col-md-4 col-lg-3"><img src="http://www.placehold.it/1980x1600" class="img-responsive"></div>
</div><!-- /row -->
</div><!-- /container-fluid -->
<div class="containter">
<div class="row" id="about">
<div class="main-layout">
<div class="header">
<h1>About Me</h1>
</div><!-- end header -->
<div class="image column">
<div class="col-xs-12 col-md-4"><img src="http://www.placehold.it/1980x1600" class="img-responsive" alt="Picture of Seth Beebe">
</div><!-- end image -->
<div class="intro column">
<div class="col-xs-12 col-md-4">
<h2>Introduction</h2>
<p>Web Developer. <br> Professional Photographer.<br> Geek for hire.
</p>
</div>
</div><!-- end intro column-->
<div class="skill column">
<div class="col-xs-12 col-md-4">
<h2>My Skills</h2>
<ul id="skill-list">
<li>Professional Photographer</li>
<li>Technical Writer</li>
<li>Web Developer</li>
</ul>
</div>
</div><!-- end skill column-->
<div class="main-text">
<div class="col-xs-12 col-md-12">
<h2>My Story</h2>
<p>I am a 31 year old web development student based in the greater Burlington area of Vermont.<br>
I have always loved the creative process. Whether it's drawing, graphic design, photography, or building websites, I bring my strong design sense and an eye for composition.<br>
Let me help you realize your creative vison and bring your message to life online. Please visit my contact page to get in touch.</p>
</div>
</div><!-- /main-text -->
</div><!-- /header -->
</div><!-- /main-layout -->
</div><!-- /about -->
</div>
</div>
<div class="container-contactimg">
<div class="container">
<div class="row" id="contact">
<div class="main-layout">
<div class="col-md-4">
<h1>Contact</h1>
<p>Whether your project is big or small,
lets make something great together.
</p>
<br>
<div class="contactinfo">
<h2>Seth Beebe</h2>
<p><span class="glyphicon glyphicon-home"></span> Winooski, Vermont <br>
<span class="glyphicon glyphicon-phone"></span> 802.249.3266 <br>
<span class="glyphicon glyphicon-envelope"></span> [email protected] </p>
</div><!-- contactinfo -->
</div><!-- bootstrap formatting -->
<div class="col-md-8">
<div class="contactform">
<h1>Say Hello.</h1>
<form method='post'><input type='hidden' name='form-name' value='form 1' />
<div class="col-sm-6">
<div class="form-group">
<label for="Name">Name</label>
<input type="text" id="Name" class="form-control" placeholder="Enter your name">
</div><!-- /name -->
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="phonenumber">Phone</label>
<input type="phonenumber" class="form-control" id="phonenumber" placeholder="555-867-5309">
</div><!-- /phonenumber -->
</div>
<br>
<div class="col-sm-12">
<div class="form-group">
<label for="Email">Email address*</label>
<input type="email" id="Email" class="form-control" placeholder="Enter your email" required="required">
</div>
<label for="message">Message*</label>
<textarea id="message" style="resize:none" cols="40" rows"5" class="form-control" placeholder="Write your message here" required="required"></textarea>
<br>
<button type="submit" class="btn btn-default" id="button">Submit</button>
</div>
</form>
</div><!-- /contactform -->
</div><!-- /bootstrap formmating -->
</div><!-- /main-layout -->
</div><!-- /row -->
</div><!-- /container-fluid -->
</div>
<!-- Video -->
<div class="container">
<div class="videoWrap" id="video">
<iframe width="560" height="315" src="http://www.placehold.it/1980x1600" frameborder="0" allowfullscreen></iframe>
</div>
<div class="row">
<h2 class="learn-more">Learn More</h2>
<div class="resume-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View Resume</button>
</div>
<!-- Small modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
<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">
<embed id="modalembed" src="http://www.placehold.it/1980x1600">
</div>
</div>
</div>
</div>
</div><!-- /row -->
<div class="row" id="faq">
<div class="main-layout">
<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="glyphicon glyphicon-plus-sign"></span>
What interests you about web design?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
I've always loved graphic design and puzzles. Web design seems to be a perfect marriage of the two.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"><span class="glyphicon glyphicon-plus-sign"></span>
What makes you a good Web Designer?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
I am organized, have a keen eye for details, and have years of troubleshooting experience.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"><span class="glyphicon glyphicon-plus-sign"></span>
What type of clients do you work with?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
I love working with small to medium businesses looking to find new e-commerce solutions.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour"><span class="glyphicon glyphicon-plus-sign"></span>
Do you work with non-profits?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
Depending on my availability and the scope of the project, I would love to collaborate with local non-profit organizations.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive"><span class="glyphicon glyphicon-plus-sign"></span>
How do you approach design?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
My first concern is who will be using the site and how can I meet their needs and expectations.
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- ======Footer====== -->
<footer>
<div>&copy; New Leaf Design 2017</div>
<a class="twitter-follow-button"
href="https://twitter.com/StarkRavingSeth"
datasize="large"
data-show-count="false"
data-show-screen-name="false">
Follow</a>
<div class="fb-like"
data-href="https://www.facebook.com/seth.beebe"
data-layout="standard"
data-action="like"
data-show-faces="true">
</div>
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
</body>
</html>
Raw
scripts.js
//Facebook
$(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_US/sdk.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//Twitter
!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');
//Document Ready Scripts
$(document).ready(function(){
//Smooth Scrolling
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
if (href != undefined && href != '#') {
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
}
});
//Tool Tips
$(function () {
$('#item1').tooltip();
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
//Event Listener
$("#button").on('click', function() {
var comment = $('.message-box').val();
return false;
});
//Text area Background
$("#message").css("border", "2px solid red");
});
Raw
styles.css
/*Navigation*/
.navbar a {
font-family: "fjalla one", helvetica, arial, sans-serif;
color: #cdf0ff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: 600ms;
-webkit-transition: 600ms;
}
.navbar a:active {
color: #963449
}
.navbar-brand a {
font-family: "fjalla one", helvetica, arial, sans-serif;
color: white;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/*Form Element Styling*/
body {
background-color: #6d7f87;
color: #fff;
padding-top: 50px;
position: relative;
}
.header {
text-align: center;
margin-bottom: 35px;
}
.header h1 {
text-align: center;
}
#work {
padding-top: 50px;
}
#about {
padding-top: 50px;
padding: 100px 0;
}
.container-contactimg {
background-image: url("../img/contact.jpg");
background-attachment: fixed;
background-size: cover;
color: white;
padding: 50px 0;
}
.contactinfo {
text-align: left;
}
.contactform {
text-align: left;
}
.videoWrap{
display: flex;
align-items: center;
justify-content: center;
}
.videoWrap iframe {
width: 700px;
height: 394px;
}
#video {
padding-top: 50px;
padding-bottom: 50px;
}
.learn-more {
text-align: left;
float: left;
}
.resume-button {
float: right;
padding-top: 30px;
}
#modalembed {
height: 1050px;
width:100%;
padding: 10px;
}
.modal-content {
color: black;
}
.panel-heading {
color: #8cc0cc;
}
/*Typography*/
.header p {
font-family: rockwell, didot, "bodoni mt", serif;
font-size: 2em;
}
h1 {
font-family: "fjalla one", helvetica, arial, sans-serif;
font-size: 5em;
font-weight: 200;
}
h2 {
font-family: rockwell, didot, "bodoni mt", serif;
font-size: 3em;
font-weight: 100;
}
#contact p {
font-family: rockwell, didot, "bodoni mt", serif;
font-size: 1.5em;
}
.panel-body {
font-family: "segoe ui", helvetica, sans-serif;
font-size: 1.25em;
color: black;
}
.panel-title {
font-family: "fjalla one", helvetica, arial, sans-serif;
}
.btn-btn-default {
font-family: "fjalla one", helvetica, arial, sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment