Skip to content

Instantly share code, notes, and snippets.

@Socratic1

Socratic1/index.html

Last active September 2, 2015 10:20
Show Gist options
  • Save Socratic1/53c0862fca8ebc990186 to your computer and use it in GitHub Desktop.
Save Socratic1/53c0862fca8ebc990186 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sam Phillips. Web Developer</title>
<meta property="og:url" content="http://purchasing-officer-coders-58830.bitballoon.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/normalize.css" rel= "stylesheet">
<!-- Custom CSS and JS -->
<link href="css/styles.css" rel="stylesheet">
<script src="js/scripts.js"></script>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster|Roboto+Condensed' rel='stylesheet' type='text/css'>
<!--[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]-->
<!-- JS code -->
<script src="js/jquery.media.js" type="text/javasript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsDR1ox0k6zWSkkCr9SsTOTW7EW1TkDKc"></script>
<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>
<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 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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
$(function () {
$('#tooltip1').tooltip()
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip2"]').tooltip();
});
</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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!--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 collapse" 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">
<a href="#">Sam Phillips. Web Developer</a>
</div>
</div> <!-- end navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div> <!-- end navbar collapse -->
</div> <!--end navbar container -->
</nav> <!-- navbar ends here-->
<!-- carousel div begins here -->
<div class="container-fluid" id="carousel">
<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/147H.jpg" alt="...">
<div class="carousel-caption">
<h1>Some stuff</h1>
<p>Some more stuff</p>
</div>
</div>
<div class="item">
<img src="img/clock.jpg" alt="...">
<div class="carousel-caption">
<h1>WOW MORE STUFF!</h1>
<p>Look here! There's more stuff!</p>
</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> <!--carousel container ends here -->
<!--Intro info container begins here -->
<div class="container" id="intro">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h3>
<a href="#" title="More Information" id="tooltip1">Portfolio Concept</a></h3>
<p>Tough to answer, not having done any real development work so far. I hope to get work in back-end development. Thus, I'd like, by the end of the course, to showcase projects I've completed and and working on that demonstrate facility in that field. I would like it to have a fun, accessible lay-out </p>
<p><button type="button" class="btn btn-default" data-toggle="tooltip2" data-placement="bottom" title="Tooltip on bottom">View details &raquo;</button></p>
</div>
<div class="col-md-4">
<h3>Project Goals</h3>
<p>My goal is to learn as much as I possibly can, in the hopes of finding a job after, or not too long after, completing this course. I am able to work full-time on this course, so any recommendations as to how I can make the most of that time would be greatly appreciated. I want, at the very least, to complete all of the assigned projects by their due-dates; but hopefully, to go beyond those requirements and take advantage of any resource you might recommend to me. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Course Goals</h3>
<p>I'm currently redirecting from a Masters in Philosophy, after realizing that route wasn't the best for me. I began tinkering a bit with development after having an idea for a social media site, and was surprised to find the technical side of web development very enjoyable. I decided, if I could do this professionally, I think I'd be pretty happy with my life. My hope now is to get an entry level developer position; my most important requirement for a job is that it provides as many opportunities to learn and grow as possible. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
</div> <!-- intro info container ends here -->
<!-- ABOUT container begins here -->
<div class="container-fluid" id="about">
<div class="header about-header row">
<h2 class="more-information">
More Information
</h2>
<button type="button" class="btn btn-primary modal-button" data-toggle="modal" data-target=".bs-example-modal-lg">Click here to see my CV</button>
</div>
<div class="container" id="about-container">
<div class="about-image">
<img src="img/me.jpg" alt="me"><!-- The only photo of myself I have on my computer, will find another -->
</div>
<div class="about-intro about-column">
<!-- <h3>Introduction</h3> -->
<h3>Some introductory stuff</h3>
</div>
<div class="about-skills about-column">
<h4>My Skills</h4>
<ul id="about-skill-list">
<li>an item in a list</li>
<li>another item</li>
</ul>
</div>
<div class="about-main-text">
<h4> More about me.</h4>
<p>Gastropub VHS Austin biodiesel pour-over Marfa. Bespoke asymmetrical raw denim skateboard, polaroid occupy McSweeney's cronut roof party food truck flannel cornhole cred. 90's post-ironic Portland Carles roof party, Intelligentsia squid viral lomo PBR street art cold-pressed migas. Butcher brunch migas keytar. You probably haven't heard of them Echo Park vegan bicycle rights whatever tote bag VHS locavore, Shoreditch artisan Tumblr paleo craft beer mlkshk. Asymmetrical cliche skateboard Tumblr. Health goth McSweeney's semiotics Bushwick raw denim ethical.</p>
</div><!-- end container -->
</div>
<div class="about-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TLV4_xaYynY" frameborder="0" allowfullscreen></iframe>
</div>
<div class="row">
<table class="services col-lg-6 col-lg-offset-3">
<tr class="my-row">
<th>Services</th>
<th>Service 1</th>
<th>Service 2</th>
</tr>
<tr class="my-row">
<td>Feature 1</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 2</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 3</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 4</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 5</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
</table>
</div>
</div> <!-- ABOUT container ends here -->
<!-- CONTACT container begins here -->
<div class="container-fluid" id="contact">
<div class="contact-header">
<h2>Contact Me</h2>
</div>
<div class="container" id="contact-container">
<div class="contact-intro contact-column">
<p>Want to contact me?</p>
<p id="contact-sentence-2">Feel free!</p>
<p id="contact-sentence-3">Drop me a line if...</p>
</div>
<div class="row">
<div class="contact-info contact-column col-lg-6 col-md-6">
<div class="telephone">
<p>Give me a call at: </p>
<h3><span class="glyphicon glyphicon-earphone"></span> Telephone</h3>
</div>
<div class="email">
<p>Or contact me by email: </p>
<h3><span class="glyphicon glyphicon-envelope"></span> Email</h3>
</div>
<div class="address">
<p>Or, prefer to do things the good ol' fashioned way, write to me at:
<h3><span class="glyphicon glyphicon-pencil"></span> Address</h3>
</div>
<div class="pigeon">
<p>(I'm afraid I'm not currently accepting mail by carrier pigeon, too much mess.)</p>
</div>
<div class="thanks">
<p>Thanks for contacting me.</p>
</div>
</div>
<div class="contact-image">
<img src="img/easter-island-statues-crop.jpg" class="visible-lg" alt="easter island statues">
</div>
<div class="contact-form col-lg-6 col-md-5">
<form>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" class="form-control" id="name">
<label for="phone-number">Phone Number</label>
<input type='text' class="form-control" id="phone-number" minlength=7>
<label for="email">Email address*</label>
<input type="email" class="form-control" id="email" required="required">
<label for="contact-message">Your message here</label>
<textarea style="resize:none" class="form-control message-box" id="contact-message" cols="120" rows="5" placeholder="Your message here" maxlength=300></textarea>
<button type="submit" class="btn btn-default contact-button" id="message-submit">Send</button>
<h6 id="character-count"></h6>
<p id="visible-comment"></p>
</div>
</form>
</div>
<div class="map">
<div id="map-canvas" style="height: 410px; width="600px"></div>
<!-- <iframe
width="600"
height="410"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDsDR1ox0k6zWSkkCr9SsTOTW7EW1TkDKc&q=Tiensesteenweg+281,+3010+Kessel-Lo,+Belgium">
</iframe> -->
</div>
</div>
</div><!-- end container -->
</div> <!--CONTACT container ends here -->
<!-- WORK container begins here -->
<div class="container-fluid" id="work">
<div class="container-fluid" id="work-parallax" data-stellar-ratio='0.5'>
<div class="work-header">
<h2>My Work</h2>
</div>
<div class="container" id="work-container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id"dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="img/kittens.jpg" alt="kitten">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownManu1">
<li><a href="#Work1">Project 1</a></li>
<li><a href="#Work2">Project 2</a></li>
</ul>
</div>
<div class="work-image" id="0-work-title"></div>
<div class="work-image" id="1-work-title"></div>
<div class="work-image" id="2-work-title"></div>
<div class="work-image" id="3-work-title"></div>
</div>
</div>
<div class="container-fluid" id="Work1" data-stellar-ratio='0.5'>
</div>
<div class="container-fluid" id="Work2" data-stellar-ration='0.5'>
</div>
</div>
<!-- WORK container ends here -->
<!--FAQ container begins here -->
<div class="container-fluid" id="faq">
<div class="faq-header">
<h2>Frequently Asked Questions</h2>
</div>
<div class="container" id="faq-container">
<div class="panel" id="accordion">
<div class="panel panel-default">
<div class="panel-heading panel-heading-1">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
How did I decide to become a web developer?
</a>
</h3>
</div>
<div id="collapseOne" class="pannel-collapse collapse">
<div class="panel-body">
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-heading-2">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
What are my career goals?
</a>
</h3>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-heading-3">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
What is my experience?
</a>
</h3>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
</div>
</div>
</div>
</div>
</div> <!-- FAQ container ends here -->
<footer>
<div class="footer">
<div class="copyright">
<h6>&copy; Samuel R. Phillips 2015</h6>
</div>
<div class="fb-like"
data-href="http://purchasing-officer-coders-58830.bitballoon.com/"
data-layout="button_count"
data-action="like"
data-show-faces="true"
data-share="true">
</div>
<div class="twitter">
<a href="https://twitter.com/SRPhillips1844" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"> Follow @SRPhillips1844</a>
</div>
</div>
</footer>
<!-- CV Modal -->
<div class="modal fade bs-example-modal-lg" tabinde="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">CV</h4>
<button type="button" class="close CV-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<iframe id="CV-modalframe" src="img/evalotta_lamm.pdf#view=fitH"></iframe>
</div>
</div>
</div>
</div> <!-- CV modal ends here -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment