Skip to content

Instantly share code, notes, and snippets.

@itzsaga

itzsaga/custom.css

Created January 20, 2018 03:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save itzsaga/7f6836c690df4394c48bec44ca369b6a to your computer and use it in GitHub Desktop.
Save itzsaga/7f6836c690df4394c48bec44ca369b6a to your computer and use it in GitHub Desktop.
Download ZIP
The code from my Bootstrap live lecture for Flatiron School.
Raw
custom.css
.navbar {
margin-bottom: 0;
}
body {
background: #3E4649;
color: #f7f7f7;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1,
h2 {
font-weight: bold;
}
p {
font-size: 16px;
color: #cdcdcd;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Demo</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">Web Dev Shop</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Consulting</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lectus justo, molestie a mattis a, blandit quis nibh. Nulla ut tempor libero. Nullam vitae neque eu turpis gravida semper. Pellentesque eu augue neque. Aenean mattis justo maximus, suscipit odio a, egestas orci. Duis eget eros pretium, luctus nisl vitae, blandit est. Mauris ut vulputate justo, ut mattis ante. Nunc viverra dui id quam laoreet dignissim. In fringilla quam a mi condimentum tincidunt. Aliquam vel nulla aliquam, placerat ipsum non, sollicitudin elit. Sed et lacus quis enim pharetra condimentum in sagittis arcu. Aliquam arcu quam, consequat eu nisi a, malesuada porttitor mauris. Donec id lorem eu augue sodales feugiat nec quis lacus. Phasellus imperdiet auctor sodales. </p>
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lectus justo, molestie a mattis a, blandit quis nibh. Nulla ut tempor libero. Nullam vitae neque eu turpis gravida semper.</p>
</div>
<div class="col-md-4">
<h3>2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lectus justo, molestie a mattis a, blandit quis nibh. Nulla ut tempor libero. Nullam vitae neque eu turpis gravida semper.</p>
</div>
<div class="col-md-4">
<h3>3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lectus justo, molestie a mattis a, blandit quis nibh. Nulla ut tempor libero. Nullam vitae neque eu turpis gravida semper.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment