Skip to content

Bootstrap_assignment #168

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

Bootstrap_assignment #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bfb2a98
Add files via upload
KaraThrash Jul 13, 2017
f0555be
Update README.md
KaraThrash Jul 13, 2017
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
11 changes: 5 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
assignment_bootstrap_sprint
===========================

Pick yourself up!

[A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com)
Dan Donato

# demo_bootstrap
Smile!
two
141 changes: 141 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!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">
<title>Bootstrap Demo</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<div class="container">

<div class="row">
<div class="col-xs-2 col-xs-offset-1 eyebrow big-block"></div>
<div class="col-xs-2 col-xs-offset-6 eyebrow big-block"></div>
</div>

<!-- Eyes -->
<div class="row">

<!-- Left eye -->
<div class="col-xs-2 col-xs-offset-1 eye-wrapper">

<!-- Left eye top piece -->
<div class="row">
<div class="col-xs-12 eye small-block">
</div>
</div>

<!-- Left eye pieces -->
<div class="row">

<!-- Left eye middle left piece -->
<div class="col-xs-4 eye small-block">
</div>

<!-- Left eye middle right piece -->
<div class="col-xs-4 col-xs-offset-4 eye small-block">
</div>

</div>

<!-- Left eye bottom piece -->
<div class="row">
<div class="col-xs-12 eye small-block">
</div>
</div>

</div>


<!-- Right eye -->
<div class="col-xs-2 col-xs-offset-6 eye-wrapper">

<!-- Right eye top piece -->
<div class="row">
<div class="col-xs-12 eye small-block">
</div>
</div>

<!-- Right eye pieces -->
<div class="row">

<!-- Right eye middle left piece -->
<div class="col-xs-4 eye small-block">
</div>

<!-- Right eye middle right piece -->
<div class="col-xs-4 col-xs-offset-4 eye small-block">
</div>

</div>

<!-- Right eye bottom piece -->
<div class="row">
<div class="col-xs-12 eye small-block">
</div>
</div>

</div>
</div> <!-- end eyes -->


<!-- Nose -->
<div class="row">
<div class="col-xs-2 col-xs-offset-5 btn btn-primary nose">
HONK
</div>
</div>


<!-- Mouth Corners -->
<div class="row">

<!-- Left mouth corner -->
<div class="col-xs-2 col-xs-offset-1 mouth big-block"></div>

<!-- Right mouth corner -->
<div class="col-xs-2 col-xs-offset-6 mouth big-block"></div>

</div>


<!-- Mouth -->
<div class="row">
<div class="col-xs-8 col-xs-offset-2 big-block mouth"></div>
</div>

</div>











<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
27 changes: 27 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.eyebrow{
background-color: #aaa;
}

.eye{
background-color: blue;
}

.nose{
font-size: 28px;
}

.mouth{
background-color: red;
}

.big-block{
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
}

.small-block{
height: 15px;
margin-top: 2px;
margin-bottom: 2px;
}