Last active
August 26, 2015 20:42
-
-
Save kingrichardiii/f3a067eba5032d3b704c to your computer and use it in GitHub Desktop.
Carousel Code
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>Richard Rabeau III</title> | |
<!-- JQuery --> | |
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> | |
<!-- Latest compiled and minified Bootstrap CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<!-- Latest compiled and minified Bootstrap JavaScript --> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<!-- Bootstrap CSS --> | |
<link href="css/bootstrap.css" rel="stylesheet"> | |
<!-- My CSS --> | |
<link href="css/normalize.css" rel="stylesheet"> | |
<link href="css/style.css" rel="main stylesheet"> | |
<!-- My Fonts --> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' 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> | |
<div class="nav"> | |
<ul> | |
<li><a href="contact.html"> Contact </a></li> | |
<li><a href="FAQ.html"> FAQ </a></li> | |
<li><a href="#"> Work </a></li> | |
<li><a href="about.html"> About </a></li> | |
<li><a href="index.html"> Home </a></li> | |
</ul> | |
</div> | |
<!-- Bootstrap Carosuel --> | |
<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/stock2.jpg" alt="Computer"> | |
<div class="carousel-caption"> | |
<h3> Web Design + Development </h3> | |
</div> | |
</div> | |
<div class="item"> | |
<img src="img/stock3.jpg" alt="Paper"> | |
<div class="carousel-caption"> | |
<h3> Illustration </h3> | |
</div> | |
</div> | |
<div class="item"> | |
<img src="img/stock1.jpg" alt="Computer Two"> | |
<div class="carousel-caption"> | |
<h3> Graphic Design </h3> | |
</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> | |
<!-- EndBootstrap Carosuel --> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<div class="row"> | |
<div class="col-md-4"> | |
<h2>Portfolio Concepts</h2> | |
<p> I took a course in web design while studying at The New School, which gave me some exposure to HTML/CSS, and an eagerness to learn more. In terms of design, I am minimalist attracted to bold colors, so I would like my portfolio site to reflect that. I also dig the flat design trend and parallax scrolling. </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>I currently work full-time as a graphic designer in the marketing department of a real estate firm. I’ll be dedicating my evenings (and slow days at work, shhh) to this course. As a somewhat recent college grad, I am hoping I am still a quick learner and haven’t yet lost my work ethic. </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 am taking this course to gain coding skills and experience, so I can transition my career from graphic design to web design and development. My goal is to find a entry-level, front-end developer job, preferably at a cool tech start-up or boutique marketing agency.</p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
</div> | |
<hr> </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
.jumbotron { | |
background-image: url("../img/blurcity.jpg"); | |
background-size: cover; | |
} | |
.jumbotron p { | |
color: white; | |
} | |
.jumbotron h1 { | |
color: white; | |
padding-top: 10px; | |
} | |
.container-fluid { | |
z-index: -1; | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.container { | |
padding-top: 50px; | |
} | |
body { | |
background-color: #4b9dd0; | |
color: #FFF; | |
} | |
.contact { | |
background-color: #FFF; | |
text-align: center; | |
font-size: 1.25em; | |
} | |
.nav ul li { | |
display: inline-block; | |
float: right; | |
} | |
.nav { | |
background-color: #6d7276; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
padding: 20px 10px 20px; | |
z-index: 1; | |
} | |
.nav ul li a { | |
text-transform: uppercase; | |
letter-spacing: 0.05em; | |
color: #FFF; | |
padding-right: 10px; | |
-webkit-transition: color 600ms; | |
} | |
.nav a:hover { | |
color: #4b9dd0; | |
text-decoration: none; | |
} | |
/*typography*/ | |
h1, | |
h2 { | |
font-family: Josefin Slab, Times, Times New Roman, serif; | |
font-size: 2em; | |
} | |
h3 { | |
font-family: Bitter, Times, Times New Roman, serif; | |
font-size: 4em; | |
} | |
p{ | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif; | |
font-size: 1.25em; | |
} | |
.jumbotron h1 { | |
font-size: 2.5em; | |
} | |
.nav { | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif; | |
font-size: 1em; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment