Skip to content

Instantly share code, notes, and snippets.

@mcruz590

mcruz590/Bolt Network (CSS)

Created April 23, 2016 19:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mcruz590/86361cf8f1f5b3a95f69ba59e94d5856 to your computer and use it in GitHub Desktop.
Save mcruz590/86361cf8f1f5b3a95f69ba59e94d5856 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Bolt Network (CSS)
html, body {
font-family: "Oxygen", sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
}
.container {
max-width: 970px;
}
.jumbotron {
background-color: black;
margin-bottom: 0;
}
.jumbotron .btn {
color: #0032D7;
border: 1px solid #0032D7;
background-color: black;
}
.jumbotron li {
list-style-type: none;
display: inline;
margin: 24px;
color: white;
}
.main {
background-color: black;
height: 250px;
text-align: center;
color: white;
}
.main h1 {
margin-top: 0;
margin-bottom: 24px;
}
.main .btn {
color: #0032D7;
border: 1px solid #0032D7;
background-color: black;
margin-left: 50px;
}
.main .form-inline {
margin-top: 60px;
text-align: center;
width: 100%;
margin-right: 24px;
}
.supporting {
background-image: url(diagmonds_@2X.png);
background-size: 141px 142px;
}
.supporting .container {
text-align: center;
color: white;
}
.supporting h1 {
margin: 23px;
margin-bottom: 24px;
color: #0032D7;
}
.supporting p {
margin-bottom: 24px;
}
.feature {
height: 300px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/bolt-network/feature.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.feature .container {
text-align: center;
color: white;
}
.feature h1 {
margin: 30px;
margin-top: 100px;
color: #0032D7;
}
.footer {
display: inline-block;
text-align: center;
background-color: black;
color: white;
height: 200px;
width: 100%;
}
.footer h3 {
color: #0032D7;
text-align: center;
}
.footer li {
list-style-type: none;
text-align: center;
}
Raw
Bolt Network (HTML)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="header">
<div class="row">
<div class="col-md-4">
<img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg"/>
</div>
</div>
<div class="pull-right">
<ul>
<li> Login </li>
<li class="btn btn-default" a href="#"> Sign Up </li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
<h1> Watch your favorite movies, instantly.</h1>
<p class="btn btn-default" a href="#"> Learn More
</p>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Browse the collection">
</div>
<button type="submit" class="btn btn-submit">Search</button>
</form>
</div>
<div class="supporting">
<div class="container">
<h1> A world of movies at your fingertips. </h1>
<p> Choose from the latest titles, with new moves added everday.</p>
<div class="row">
<div class="col-md-8">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-avengers.jpg" class="thumbnail"/></a>
</div>
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/harry-potter.jpg" class="thumbnail"/></a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/frozen.jpg" class="thumbnail"/></a>
</div>
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/iron-man.jpg" class="thumbnail"/></a>
</div>
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/transformers.jpg" class="thumbnail"></a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/lord-of-the-rings.jpg" class="thumbnail"/></a>
</div>
<div class="col-md-8">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/skyfall.jpg"class="thumbnail"/></a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-dark-knight.jpg"class="thumbnail"/></a>
</div>
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/pirates-of-the-caribbean.jpg"class="thumbnail"/></a>
</div>
<div class="col-md-4">
<a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/toy-story-3.jpg"class="thumbnail"/></a>
</div>
</div>
</div>
</div>
<div class="feature">
<div class="container">
<h1> Available everywhere </h1>
<p> Start watching on one device, and pick up where you left off on another device. </p>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3> Bolt </h3>
<li> Careers </li>
<li> Terms </li>
<li> Help </li>
</div>
<div class="col-md-3">
<h3> More Bolt </h3>
<li> Gift Cards </li>
<li> Trailers </li>
</div>
<div class="col-md-3">
<h3> News </h3>
<li> Blog </li>
<li> Twitter </li>
<li> YouTube </li>
<li> Google+ </li>
<li> Facebook </li>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment