Skip to content

Instantly share code, notes, and snippets.

@andrefe90

andrefe90/index.html

Created October 12, 2015 09:48
Show Gist options
  • Save andrefe90/761d9030e87d97d34188 to your computer and use it in GitHub Desktop.
Save andrefe90/761d9030e87d97d34188 to your computer and use it in GitHub Desktop.
Download ZIP
Image carousel
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<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>
<!-- Custom styles for this template go here -->
<link href="css/styles.css" rel="stylesheet">
<!-- 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">
<a href="#">Home</a>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--div class="jumbotron"-->
<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/portfolioheroimage_edited.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3_edited.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</p>
</div>
</div>
<div class="item">
<img src="img/lesson8-portfolioheroimage2.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</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 class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>One of the websites that I would like to have in my concept is a site similar to www.heuteinhamburg.de. Just something where you can list events, parties, projects and the like while giving everything a simple, intuitive and novel look that stays in your mind and that is not readily forgotten after the user has left the website</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 course officially runs for 6 months but i want to try to do a lot of work during july and august as I am basically free then. From september on, I will either continue to study or work. Depending on which it will be i might have to go a bit slower then.</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 am not changing careers, because I dont even have one yet. I would like to build something own and me and my friends already had some nice ideas, but its just impossible to do anything today without knowing how to write at least some code. I would also find it extremely helpful to be able to earn some extra money as a freelancer all the while doing something I (probabyl) like and which will be helpful for me. So in that sense I am trying to enhance my skill set. And in the future, when I have succesfully finished this course I might even go further and start a mobile developing course.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
</div> <!--container-fluid-->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
/* Start Nav Bar */
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
float: right;
z-index: 1;
}
.nav a {
color: white;
text-transform: uppercase;
padding: 100px 10px 20px;
top: 0;
transition: color 600ms;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav ul li {
display: inline-block;
float: right;
}
.nav ul li a {
color: white;
text-transform: uppercase;
padding: 10px 10px 10px;
top: 0;
}
/* End Nav Bar */
.carousel {
height: 100%;
}
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
/* fonts */
h1,
p {
color: black;
}
/* End fonts*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment