Skip to content

Instantly share code, notes, and snippets.

@highsmithcodes

highsmithcodes/St.Ofle.markdown

Created June 10, 2016 00:12
Show Gist options
  • Save highsmithcodes/c514a8d773d7bed81d689fab58d4c778 to your computer and use it in GitHub Desktop.
Save highsmithcodes/c514a8d773d7bed81d689fab58d4c778 to your computer and use it in GitHub Desktop.
Download ZIP
St.Ofle
Raw
index.html
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</script>
</script>
</head>
<body>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!--Brand/Logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"></a>
</div>
<!--Top Nav Menu-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li><a href="#mycarousel">Home</a></li>
<li><a href="#section2">Info</a></li>
<li><a href="#section4">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!---Jumbotron --->
<div id="mycarousel" class="carousel-slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://images.unsplash.com/photo-1414058862086-136de6c98e99?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=07b0dfa340fe81f3d179b3eb2ec16fee">
</div>
</div>
<div id="section2" class="container-fluid bg-1 text-center">
<h3>Richard St.Ofle</h3>
<img class="profile-pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRycZbMcGaiTy27Bt3j7A0XKGBhkt2fkI_8Be-1KuqhoUw-cIMf">
<br>
<div class="row">
<div class="col-lg-12">
<p class="intro" align="">Growing up in the dark and lonely woods of Northern California, I was so cold and unsatisfied that I ran away to Paris at 18. Living and working illegally, I spent four frigid years writing next to a space heater. This period culminated in the publishing of my first novel, No Wolf, (the waygoing compromise). A graduate of UC Berkeley’s prestigious rhetoric program and USC’s acclaimed MFA in screenwriting, I write high-concept films about impossible ethical choices, and occasionally develop the heists, films noirs, and capers my son pitches me at bedtime. </p>
<!-- <div class="col-sm-4">
<h2>I am a writer</h2>
<p align="justify">.</p>
</div>
<div class="col-sm-4">
<h2>Studied at USC and UC Berkeley</h2>
<p align="justify"></p>
</div>
<div class="col-sm-4">
<h2>Awards & Recognitions</h2>
<p align="justify"></p>
</div>
</div>
</div> -->
<hr>
<!--Vertical Timeline--->
<div class="row">
<div class "col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-date">Losing Cooper</h4>
<h4 class="timeline-subheading">(Drama)</h4>
</div>
<div class="timeline-body">
<p>In 1971, DB Cooper hijacked an airplane and disappeared forever. In 2015, while on Cooper’s trail, an FBI agent goes missing. In an effort to find his partner, hard boiled FBI man Aldrich Forest stumbles on to the trail of the notorious airplane hijacker and after discovering his motives, must wrestle with turning him in. </p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-date">The Doorman</h4>
<h4 class="timeline-subheading">(Thriller)</h4>
</div>
<div class="timeline-body">
<p class="timeline-body">After his brother’s mysterious death, a sleep deprived film score composer, begins to suspect the doorman of his upscale NYC building. But will a lack of sleep and propensity to mix reality with the horror films he’s scoring throw him too far off track?</p>
</div>
</div>
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-date">Is It Really A Wonderful Life?</h4>
<h4 class="timeline-subheading">(Fantasy/Drama)</h4>
</div>
<div class="timeline-body">
<p>Mario is a film student who finds himself working a festival celebrating his most hated film of all time: ‘It’s a Wonderful Life’. As the film plays, Mario goes berserk, cuts the cable to the jumbotron, accidentally electrocuting himself into the film. His only chance to get out is to break the narrative and fix what he finds most abhorrent about the film: get George Bailey out of Bedford Falls. </p>
</div>
</div>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-date">The IROC-Z</h4>
<h4 class="timeline-subheading">(Drama)</h4>
</div>
<div class="timeline-body">
<p class="timeline-body">It’s 1988 in small-town Alaska. It’s cold as shit.
After another terrible report card, Sam Fritz, a heavy metal loving teenager with a sensitive soul, is forced by his asshole stepdad to join the army, but Sam’s going to try to steal his stepdad’s car to get out of town.
</p>
</div>
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-date">In the Pines</h4>
<h4 class="timeline-subheading">(TV Drama Pilot)</h4>
</div>
<div class="timeline-body">
<p>In a small Northern California town, that lives and breathes to the rhythm of the weekly dirt-track autoraces, an abused boy runs away and turns up at the house of disgraced ex-sheriff John Fierro. To help the boy, Fierro must first clear his name.</p>
</div>
</div>
</div>
</li>
</div>
</section>
</li>
<hr>
<!--Contact Information --->
<div id="section4" class="container-fluid bg-3 text-center">
<h3 class="margin">Contact</h3>
<h3 class="section-subheading text-muted">Send me an email for business purposes only!</h3><br>
<div class="row">
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-5">
<p><span class="glyphicon glyphicon-map-marker"></span>Los Angeles, CA</p>
<p><span class="glyphicon glyphicon-phone"></span>(818) 693-4359</p>
<p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Type your message here" rows="6"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit"><span class="glyphicon glyphicon-send"></span>Send</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--- Footer--->
<footer>
<div class="container">
<div class="row">
<span class="copyright"></span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li>
<a href="#"></a>
</li>
</footer>
</body>
</html>
Raw
script.js
$(document).ready(function() {
// Add scrollspy to <body>
//Closes Nav Bar when user selects a link
$('.nav a').on('click', function() {
$('.navbar-toggle').click()
});
$('body').scrollspy({
target: ".navbar",
offset: 50
});
// Add smooth scrolling on all links inside the navbar
$("#mainNavBar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 300, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Raw
style.css
.intro {
font-variant: none;
font-style: Montserrat, sans-serif;
font-size: 14px;
font-size: 16px;
letter-spacing: 2px;
padding: 0px 15px;
font-variant: small-caps;
}
/*Brand Logo*/
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: white;
}
.navbar-brand {
padding: 15px 15px;
letter-spacing: 5px;
font-family: Montserrat;
font-size: 20px;
font-weight: 50px;
text-transform: uppercase;
color: white !important;
}
/*Top Nav Bar*/
container-fluid {
-webkit-transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
background-color: #212121;
opacity: 0.4;
}
.container-fluid:hover {
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 1.0;
filter: alpha(opacity=100);
}
/*Nagivation Lists */
li {
letter-spacing: 2px;
padding: 0px 15px;
font-variant: small-caps;
}
ul.nav a:hover {
color: black !important;
}
/*Navigation Glyphicon Icons */
.glyphicon-home,
.glyphicon-info-sign,
.glyphicon-envelope .glyphicon-file,
:before {
margin-right: 5px;
}
/*Showcase Glyphicon Icons*/
body {
overflow-x: hidden;
}
img {
width: 100%;
height: 100%;
margin: auto;
position: relative;
display: block;
}
.carousel-caption {
margin-bottom: 25px;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 50px;
letter-spacing: 4px;
}
.subtitle {
margin-bottom: 25px;
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 22px;
font-style: italic;
line-height: 22px;
}
/*Profile Image of the Client */
.profile-pic {
border: 2px solid #9e9d24;
width: 200px;
height: 200px;
border-radius: 50%;
}
h3 {
font-family: 'UnifrakturMaguntia', cursive;
font-size: 50px;
}
h2 {
font-style: Montserrat, sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
}
.work-heading {
font-style: bold;
}
.section-subheading {
margin-bottom: 75px;
text-transform: none;
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: 400;
}
.timeline>li .timeline-panel {
float: right;
position: relative;
width: 100%;
padding: 0 20px 0 100px;
text-align: left;
}
.bg-4 {
background-color: #2f2f2f;
}
.footer-text {
color: grey;
}
.facebook {
background: #3b5998;
color: #FFFFFF;
}
.linkedin {
background: #0077b5;
color: #FFFFFF;
}
.timeline-date {
font-variant: none;
font-weight: bold;
font-family: Helvetica;
font-size: 16px;
letter-spacing: 1px;
}
.timeline-subheading {
font-variant: none;
font-weight: bold;
font-family: Helvetica;
font-size: 16px;
letter-spacing: 1px;
}
.timeline-body {
font-style: Montserrat, sans-serif;
font-size: 13px;
font-variant: none;
}
.timeline {
position: relative;
padding: 0;
list-style: none;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 40px;
width: 2px;
margin-left: -1.5px;
background-color: #f1f1f1;
}
.timeline>li {
position: relative;
margin-bottom: 50px;
min-height: 50px;
}
.timeline>li:before,
.timeline>li:after {
content: " ";
display: table;
}
.timeline>li:after {
clear: both;
}
.timeline>li .timeline-panel {
float: right;
position: relative;
width: 100%;
padding: 0 20px 0 100px;
text-align: left;
}
.timeline>li .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 10px;
border-left-width: 0;
}
.timeline>li .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline>li.timeline-inverted>.timeline-panel {
float: right;
padding: 0 20px 0 100px;
text-align: left;
}
.timeline>li.timeline-inverted>.timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.timeline>li.timeline-inverted>.timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.timeline>li:last-child {
margin-bottom: 0;
}
.timeline .timeline-heading h4 {
margin-top: 0;
color: inherit;
}
.timeline .timeline-heading h4.subheading {
text-transform: none;
}
.timeline .timeline-body>p,
.timeline .timeline-body>ul {
margin-bottom: 0;
}
@media(min-width:768px) {
.timeline:before {
left: 50%;
}
.timeline>li {
margin-bottom: 100px;
min-height: 100px;
}
.timeline>li .timeline-panel {
float: left;
width: 41%;
padding: 0 20px 20px 30px;
text-align: right;
}
.timeline>li .timeline-image {
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
}
.timeline>li .timeline-image h4 {
margin-top: 16px;
font-size: 13px;
line-height: 18px;
}
.timeline>li.timeline-inverted>.timeline-panel {
float: right;
padding: 0 30px 20px 20px;
text-align: left;
}
}
@media(min-width:992px) {
.timeline>li {
min-height: 150px;
}
.timeline>li .timeline-panel {
padding: 0 20px 20px;
}
.timeline>li .timeline-image {
width: 150px;
height: 150px;
margin-left: -75px;
}
.timeline>li .timeline-image h4 {
margin-top: 30px;
font-size: 18px;
line-height: 26px;
}
.timeline>li.timeline-inverted>.timeline-panel {
padding: 0 20px 20px;
}
}
@media(min-width:1200px) {
.timeline>li {
min-height: 170px;
}
.timeline>li .timeline-panel {
padding: 0 20px 20px 100px;
}
.timeline>li .timeline-image {
width: 170px;
height: 170px;
margin-left: -85px;
}
.timeline>li .timeline-image h4 {
margin-top: 40px;
}
.timeline>li.timeline-inverted>.timeline-panel {
padding: 0 100px 20px 20px;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment