Skip to content

Instantly share code, notes, and snippets.

@J-Conley

J-Conley/index.html

Last active August 29, 2017 04:09
Show Gist options
  • Save J-Conley/94255b04292287b58892b75fdc5e35c0 to your computer and use it in GitHub Desktop.
Save J-Conley/94255b04292287b58892b75fdc5e35c0 to your computer and use it in GitHub Desktop.
Download ZIP
Single page website
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>Hello World!</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="../css/styles.css" />
<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>
<!-- 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]-->
<script src="jquery.stellar.min.js"></script>
<script>$.stellar()</script>
</head>
<body data-spy="scroll" data-target=".navbar">
<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_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Index -->
<div class="container" id="index">
<!--- navbar starts here -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid anchor" id="process">
<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="projectName navbar-brand">
<a href="#">Jarryd Conley</a>
</div><!--end projectName-->
</div><!--end navbar header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#index">Home</a></li>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#contact">Contact Me</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div><!--nav-->
</div><!-- end nav container-->
</nav><!-- end navbar -->
</div>
<!--Carousel-->
<div class="container-fluid">
<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/hero-header.png" alt="PC Desk">
<div class="carousel-caption">
The Only Choice For Professional Websites
</div>
</div>
<div class="item">
<img src="../img/typewriter.png" alt="Typewriter">
<div class="carousel-caption">
Best Websites
</div>
</div>
<div class="item">
<img src="../img/desk.png" alt="Desk">
<div class="carousel-caption">
Best Results
</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>
<!--End of Carousel-->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4" id="portfolioconcept">
<h2>Portfolio Concept</h2>
<p>I have taken a graphic and web design course in high school and have created a website using Dreamweaver. I have completed many graphic design projects using the Adobe Suite. </p>
<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Click to learn more">View details &raquo;</button></p>
</div><!-- /col -->
<div class="col-md-4" id="projectgoals">
<h2>Project Goals</h2>
<p>I plan on four to six hours a day on my work. If I am struggling with a concept I am prepared to put in the extra time to understand difficult concepts. </p>
<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Click to learn more">View details &raquo;</button></p>
</div><!-- /col -->
<div class="col-md-4" id="coursegoals">
<h2>Course Goals</h2>
<p>I am looking to start a new career as a web developer. When the couse is complete I would like to get hired as an entry level developer. When I get more experience I would be interested in freelance work.</p>
<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Click to learn more">View details &raquo;</button></p>
</div><!-- /col -->
</div><!-- /row -->
<!--Work-->
<div class="container">
<h3>Work</h3>
<div class="row" id="work">
<div class="col-md-3 col-xs-6"><img src="../img/home.PNG" alt="Home" class="img-responsive"></div>
<div class="col-md-3 col-xs-6"><img src="../img/aboutme.PNG" alt="About Me" class="img-responsive"></div>
<div class="col-md-3 col-xs-6"><img src="../img/contact.PNG" alt="Contact" class="img-responsive"></div>
<div class="col-md-3 col-xs-6"><img src="../img/FAQ.PNG" alt="FAQ" class="img-responsive"></div>
</div><!-- /row -->
</div><!-- /container -->
</div> <!-- /container -->
</div>
<!-- About -->
<div class="container" id="aboutme">
<div class="about">
<div class="header">
<h1>About Me</h1>
</div><!-- ends header -->
<div class="col-md-4">
<div class="image">
<img src="../img/webdev.jpg" alt="Web Developer">
</div><!-- end image -->
<div class="into column">
<h2>Introduction</h2>
<p> My name is <a href="#" title="Web Developer" id="item1">Jarryd Conley</a>.
</p>
</div><!-- end intro -->
<div class="skill column">
<h3>My Skills</h3>
<div class="row" id="skills">
<div class="col-md-4">Basic knowledge on use of Dreamweaver</div>
<div class="col-md-4">Basic knowledge of use of design programs such as Photoshop, and Illustrator</div>
</div>
</div><!-- ends skill -->
</div><!--ends col-md-4-->
<div class="main-text">
<h4>More About Me</h4>
<p>When I was in high school I was trying to take as many electives as I could in order to find a career choice that I was interested in. I eventually took a couple computer related classes and decided that that was the path I wanted to take. I was particularly interested in design, so I took a graphic/web design course when I was a senior.
</p>
</div><!-- ends main-text -->
</div><!-- ends container -->
</div>
<!-- Contact -->
<div class="container" id="contact">
<!--Contact Info-->
<h1>Contact</h1>
<div data-stellar-background-ratio="1">
<div class="col-lg-4" id="contact-info">
<div class="container" id="email">
<h2>Email</h2>
<p>conley.jarryd97@gmail.com</p>
</div><!-- /container -->
<div class="container" id="address">
<h3>Address</h3>
<p>409 West Washington St.</p>
<div class="image">
<img src="../img/house.PNG" alt="House">
</div><!-- /image-->
</div><!-- /container -->
<div class="container" id="phone">
<h4>Phone Number</h4>
<p>1815-726-6181</p>
</div><!-- /container -->
</div>
</div>
<!--Form-->
<div class="col-lg-8 col-md-8">
<form method='post'><input type='hidden' name='form-name' value='form 1' />
<div class="form-control">
<label for="Name">*Name</label>
<input type="text" id="Name" placeholder="Your name here">
</div><!--end form-group text-->
<div class="form-control">
<label for="Email">*Email Address</label>
<input required="required" type="email" id="Email" placeholder="Your email here">
</div><!--end form-group email-->
<label for="Message">*Your Message Here</label>
<textarea required="required" style="resize:none" cols="40" rows="5" placeholder="Your message here" class="form-control" id="Message" minlength="20"></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- FAQ -->
<!--Modal-->
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Resume</button>
</div><!--modal button-->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialogue" aria-labeledby="myLargeModelLabel" aria-hidden="true">
<div class="modal-dialogue 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="JarrydConleyResume.docx">
</div>
</div>
</div>
</div>
<div class="container" id="faq">
<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?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
I decided to become a web developer because I have always been interested in more artistic careers. I grew an interest in computers when I was in high school and I took a basic computer programming class when I was a senior. That was when I decided to focus on web design.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What is your design process?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
My design process starts with deciding the target audience for the particular website I am working on. Then I will study certain visual trends that will attract the target demographic. I will create a functional website with the design trends that appeals to the demographic that the website is being designed for.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Who are your clients?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Everyone that contacts me.
</div>
</div>
</div>
</div>
</div>
</div><!-- /container -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.gooleapis/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
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;
});
</script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#[item1]').tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- Can place script tags with JavaScript files here -->
<script src='http://d33wubrfki0l68.cloudfront.net/bundles/adc83b19e793491b1c6ea0fd8b46cd9f32e592fc.js'></script>
<footer>&copy Jarryd Conley
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="large">Tweet</a>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="10px" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<div class="embed-responsive embed-responisve-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/Pwrwf_8H25Y"></iframe>
</div>
</footer>
</body>
</html>
Raw
styles.css
/**** Index ****/
body {
position: relative;
}
.projectName {
text-transform: uppercase;
}
.projectName a {
color: #0000ff;
}
.anchor {
padding-top: 1em;
}
h3{
text-align: center;
}
/*.nav ul li {
display: inline-block;
}
.nav {
background-color: #00ff00;
position: fixed;
width: 100%;
height: 10%;
top: 0;
padding: 20px 10px 20px;
float: right;
}
.nav ul li a {
font-color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav a {
transition: color 600ms;
}*/
.carousel {
padding-top: 1em;
}
.carousel-caption {
color: #000000;
}
.col-md-4 {
margin: 10em;
}
.footer a: active {
color:#0000ff;
}
/**** Contact Page ****/
*{ box-sizing: border-box; }
h1 {
text-align: center;
}
.col-lg-4 h2, h3, h4, p {
font-family: Trebuchet MS, Verdana, Tahoma, sans-serif;
color: #0000ff;
font-size: 2em;
}
.col-lg-4 p {
font-size: 1em;
}
body {
padding-top: 5%;
background-color: #000066;
}
#contact{
background-image: url("../img/images.jpg");
background-attachment: fixed;
background-size: cover;
color: white;
padding: 50px;
padding-top: 0px;
height: 400px;
}
.form {
float: right;
}
.col-lg-4 {
float: left;
}
/****About Me Page ****/
.about {
width: 80%;
margin: 0 auto;
}
.header h1 {
text-align: center;
margin-bottom: 2em;
}
.selector {
position: relative;
}
.image {
float: right;
width: 100%;
}
.intro-column {
width: 30%;
display: inline-block;
float: left;
padding: 0 1em;
}
.main-text {
clear: both;
padding-top: 4em;
padding: top right bottom left;
}
.skill-column {
margin-left: 3em;
}
/*Typography*/
h1,
h2,
h3 ,
.intro p {
font-family: Futura, Helvetica, Arial, sans-serif;
font-size: 3em;
font-weight: 100;
-webkit-margin-before: 1em;
}
p,
li {
font-family: Georgia, Times New Roman, serif;
}
.skills-column h3 {
text-align: center;
text-transform: uppercase;
background-color: #5ad4c2;
color: #fff;
}
body {
padding-top: 10%;
background-color: #fffeea;
color: #34495e;
}
/*FAQ Styles*/
*{ box-sizing: border-box; }
head {
text-align: left;
float: left;
}
.modal-button {
float: right;
padding: 1em;
}
#modalembed {
height: 31em;
width: 100%;
padding: 1em;
}
h1 {
text-align: center;
color: 001100;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment