Skip to content

completed jumbotron reproduction #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AshMcD wants to merge 1 commit into
base: master
Choose a base branch
from
Open

completed jumbotron reproduction #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ assignment_bootstrap_sprint

Pick yourself up!

Ashley McDonnell

[A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com)
105 changes: 105 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Jumbotron!</title>

<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="jumbo-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#">Project</a>

</div>

<form class="navbar-form navbar-right" role="login">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>

</div>

</nav>

<div class="jumbotron">
<div class="container">
<h1>Hello World!</h1>
<p>This is a template for a simple marketing or informational website.
It includes a large callout called a jumbotron and three supporting
pieces of content. Use it as a starting point to create something
more unique.</p>
<button type="button" class="btn btn-primary btn-lg" name="btn-learn">Learn More</button>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Heading1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut </p>
<p>
<a class="btn btn-default" href="#">View details</a>
</p>
</div>

<div class="col-md-4">
<h2>Heading2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation</p>
<p>
<a class="btn btn-default" href="#">View details</a>
</p>
</div>

<div class="col-md-4">
<h2>Heading3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut </p>
<p>
<a class="btn btn-default" href="#">View details</a>
</p>
</div>

</div>

</div>
<hr>
<div class="container">


<footer>2017 Ashley McDonnell</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
body {
padding-top: 50px;
padding-bottom: 20px;
}