Skip to content

Instantly share code, notes, and snippets.

@Steph-harris

Steph-harris/index

Created June 11, 2015 22:31
Show Gist options
  • Save Steph-harris/e19ea7e439e2d89e8568 to your computer and use it in GitHub Desktop.
Save Steph-harris/e19ea7e439e2d89e8568 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stephanie Harris Web</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--Bootstrap Javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link style="text/css" href="css/bootstrap.css" rel="stylesheet">
<link style="text/css" href="css/style.css" rel="stylesheet">
<link style="text/css" href="css/about_styles.css" rel="stylesheet" >
<link rel="stylesheet" href="css/contact_styles.css" type="text/css" >
<!-- Custom styles for this template go here -->
<!-- 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>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Stephanie Harris</h1>
<p><strong> Webmaster Apprentice.</strong> Info on me and my development as a web specialist. Making the leap from guitarist to GitHub-ist.
</p>
</div>
</div>
<div class="nav">
<ul>
<li><a href="http://painter-mildred-27247.bitballoon.com">Home</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/about">About Me</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/contact">Contact Me</a></li>
<li><a href="">Work</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/faq">FAQ</a></li>
</ul>
</div>
<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/space.jpg" alt="image of black space station">
<div class="carousel-caption"><h3>"In the void of darkness, there is always beauty to be found"</h3>
<p>This is true in most fields, but especially in Web Development, where an empty screen is the start of every amazing finished product.</p>
</div>
</div>
<div class="item">
<img src="img/stormtrooper.jpg" alt="pic of Star Wars stormtrooper rising from beneath computer keyboard">
<div class="carousel-caption"><h3>"There will always be an obstacle to anything worth doing..."</h3>
<p>Building a page from scratch is a journey, filled with moments that almost beg for surrender...</p>
</div>
</div>
<div class="item">
<img src="img/water.jpg" alt="pic of dark water drops">
<div class="carousel-caption"><h3>"But there is also always help for those courageous enough to look"</h3><p>Luckily, building web pages is not a solitary act, and the greatest resource of all, the internet, is already at our fingertips.
</p>
</div>
</div>
</div><!--end of class carousel-inner-->
<!--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 #carousel-->
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>I want to learn how to make beautifully interactive websites. I've been a church musician for almost 5 years, but I'm looking to use my artistic creativity to go in a completely new direction.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Project Goals</h2>
<p>My work at church really dies down over the summer, so it is in my best interest to get as much work done during this time as possible. I would like to be done with all my assignments by the end of September so I can avoid working during the pre-Christmas crazy season. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Course Goals</h2>
<p>I want to switch careers and become an entry-level developer. I don't <strong>hate</strong> the idea of freelancing, but the entire reason I want to leave my current career is to have more stability, not <em>even more</em> uncertainty!</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
style
/*style.css*/
* {box-sizing: border-box;}
h2 {
color:purple;}
.jumbotron {
/* background-image: url("../img/purple.jpg");
background-size: contain;*/
padding: 0px;
}
.jumbotron h1 {
text-decoration: none;
}
.jumbotron p {
color:#f0f8ff;
}
/*html, body, .jumbotron {
background: url("../img/stormtrooper.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}*/
.nav {
position: fixed;
width: 100%;
top: 0;
left:65%;
z-index: 1;
}
.nav ul {
margin: 0;
}
.nav ul li {
display: inline-block;
background-color: #008080;
text-transform: uppercase;
padding: 10px 20px;
float: left;
font-size: 14px;
line-height: 1.428;
}
.nav ul li a{
letter-spacing: 0.05em;
transition: color 700ms;
-webkit-transition: color 700ms;
}
a {
color:#f0f8ff;
text-decoration: underline;
}
a:hover {
color:#FFB00F;
font-weight: bold;
text-decoration: none;
}
.jumbotron h1 {
color:#f0f8ff;
}
.row, .container {
border: 4px ridge #008080;
background-color: #330033;
}
.item h3, .item p {
background-color: #28282D;
color: #FFFFDF;
}
html,body{
height:100%;
}
.carousel,.item,.active {
height:100%;
}
.carousel-inner
{
height:100%;
}
.container-fluid {
position: fixed;
top:0;
width:100%;
height:100%;
padding-left: 0px;
padding-right: 0px;
background-position:center;
background-size:cover;
z-index: -99;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment