Created
June 13, 2015 18:10
-
-
Save Steph-harris/305debd6ed52ce9b9823 to your computer and use it in GitHub Desktop.
Ex. 8 (carousel)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Stephanie Harris Web</title> | |
<!-- Bootstrap core CSS --> | |
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | |
<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'> | |
<!-- Custom styles for this template go here --> | |
<link rel="stylesheet" style="text/css" href="css/style.css" > | |
<link rel="stylesheet" type="text/css" href="css/contact_styles.css"> | |
<!--<link rel="stylesheet" type="text/css" href="css/normalize.css"--> | |
<link rel="stylesheet" type="text/css" href="css/about_styles.css"> | |
<!--jQuery for Bootstrap--> | |
<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> | |
<!-- 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> | |
<!-- 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 »</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 »</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 »</a></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--> | |
<hr> | |
</div> <!-- /container --> | |
<!-- | |
================================================== --> | |
<!-- Can place script tags with JavaScript files here --> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*style.css*/ | |
* {box-sizing: border-box;} | |
h2 { | |
color:purple;} | |
.jumbotron { | |
/* background-image: url("../img/purple.jpg"); | |
background-size: contain;*/ | |
padding: 0px; | |
background-color: transparent; | |
color: #FFFFDF; | |
} | |
.jumbotron .container { | |
margin-top: 42px; | |
} | |
.jumbotron h1 { | |
text-decoration: none; | |
} | |
/*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:#FFFFDF; | |
text-decoration: underline; | |
} | |
a:hover { | |
color:#FFB00F; | |
font-weight: bold; | |
text-decoration: none; | |
} | |
.row, .container { | |
border: 4px ridge #008080; | |
background-color: #330033; | |
z-index: 1; | |
} | |
.row { | |
width: 80%; | |
margin-left: 10%; | |
margin-top: 22%; | |
} | |
.row h2 { | |
color: #FFFFDF; | |
} | |
.row p { | |
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif; | |
font-size: 1em; | |
font-weight: 500; | |
-webkit-margin-before: 0; | |
} | |
.btn-default { | |
position: relative; | |
left: 35%; | |
} | |
.item h3, .item p { | |
background-color: #28282D; | |
color: #FFFFDF; | |
} | |
html,body{ | |
height:100%; | |
} | |
.carousel,.item,.active { | |
height:100%; | |
} | |
.carousel-indicators { | |
top: 20px; | |
} | |
.carousel-inner | |
{ | |
height:106%; | |
} | |
/*.carousel-control { | |
top:50%; | |
width:20%; | |
}*/ | |
.carousel-caption { | |
top: 22%; | |
} | |
.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