Skip to content

Melissa Manousos Bootstrap Jumbotron Assignment #176

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
mmanousos wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Melissa Manousos Bootstrap Jumbotron Assignment #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6ae4974
Adds name
mmanousos Aug 5, 2017
18c4a7b
adds head elements for bootstrap
mmanousos Aug 5, 2017
3e1757a
adds semantic html components
mmanousos Aug 5, 2017
962220d
adds bootstrap classes for jumbotron
mmanousos Aug 5, 2017
11f3c90
adds bootstrap classes for content sections
mmanousos Aug 5, 2017
f6d54c8
cleans up html for footer
mmanousos Aug 5, 2017
99ada2e
adds bootstrap html
mmanousos Aug 6, 2017
cec91ea
adds bootstrap classes for footer
mmanousos Aug 6, 2017
fb738d1
styles padding throughout
mmanousos Aug 6, 2017
78c1565
attempts to correct extra padding on jumbotron
mmanousos Aug 6, 2017
8a10585
adds changes
mmanousos Nov 13, 2019
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
@@ -1,6 +1,8 @@
assignment_bootstrap_sprint
===========================

Melissa Manousos

Pick yourself up!

[A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com)
107 changes: 107 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<doctype!html lang="en">
<meta charset="utf-8">

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
<!--fixed navbar -->
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Project Name and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar">


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

</div>
</div>
</nav>
<!--end fixed navbar-->



<main>
<section class="jumbotron">
<div class="jumbo container">
<!-- <div class="row">
<div class="col-xs-12"> -->
<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.

<!-- primary button -->
<!-- <div> -->
<p><button type="button" class="btn btn-primary btn-lg">Learn more »
</button>
<!-- </div> -->
</div>
<!-- </div>
</div> -->

</section>
<section class="body-content">
<div class="container">
<div class="row">

<div class="col col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

<div class="details-button">
<button class="btn btn-default" type="submit">View Details »</button>
</div>
</div>

<div class="col col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

<div class="details-button">
<button class="btn btn-default" type="submit">View Details »</button>
</div>
</div>

<div class="col col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

<div class="details-button">
<button class="btn btn-default" type="submit">View Details »</button>
</div>
</div>

</div>
</div>
</section>
</main>
</body>
<footer class="container footer">
<div class="row">
<div class="col-lg-12">
<p>&copy; 2017 Company, Inc.
</div>
</div>
</footer>
</html>
17 changes: 17 additions & 0 deletions style.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
$padding: 50px;

.body-content,
.footer {
padding-bottom: $padding/2;
}

.jumbo {
padding-top: $padding;
padding-bottom: $padding*.4;
/** Reduce bottom padding at smaller sizes **/
@media only screen and (max-width : 750px) {
padding-bottom: $padding/2;
}
}


.footer {
border-top: solid 1px #eee;
padding-top: $padding*.4;
}