yukeehan · May 23, 2018 19:46
diff --git a/gallery.css b/gallery.css
 body{
 	padding-top: 70px;
 }
 .jumbotron{
 	color: #2c3e50;
 	background: #ecf0f1;
 }
 .navbar-inverse{
 	background: #2c3e50;
 }
 .navbar-inverse .navbar-brand{
 	color: white;
 }
diff --git a/gallery.html b/gallery.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>photo gallery</title>
 </head>
 <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="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 <link rel="stylesheet" type="text/css" href="gallery.css">
 <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="#collapsegallerynav" 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="#"><i class="far fa-image"></i> IMGS</a>
 		    </div>

 		    <div class="collapse navbar-collapse" id="collapsegallerynav">
 		      <ul class="nav navbar-nav">
 		      	<li><a href="#">About</a></li>
 		      	<li><a href="#">Contact</a></li>
 		      </ul>
 		      <ul class="nav navbar-nav navbar-right">
 		      	<li><a href="#">Sign Up</a></li>
 		      	<li><a href="#">Login</a></li>
 		      </ul>
 		    </div><!-- /.navbar-collapse -->
 		</div>
 	</nav>

    <div class="container">
    	<div class="jumbotron">
 			<h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
 			<p>A bunch of beautiful images that I didn't take</p>
 	    </div>
 	    <div class="row">
 			<div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="http://i.imgur.com/qK42fUu.jpg"></div>
            </div>
 			<div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
            </div>
 	    </div>
 	    <div class="row">
 			<div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9"></div>
            </div>
 			<div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
            </div>
 	    </div>
 	    <div class="row">
 			<div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
            </div>
 			<div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12">
                <div class="thumbnail"><img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
            </div>
 	    </div>
    </div>

 <!-- should before bootstrap!!! -->
 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 	
 </body>
 </html>
	body{
	padding-top: 70px;
	}
	.jumbotron{
	color: #2c3e50;
	background: #ecf0f1;
	}
	.navbar-inverse{
	background: #2c3e50;
	}
	.navbar-inverse .navbar-brand{
	color: white;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>photo gallery</title>
	</head>
	<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="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="gallery.css">
	<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="#collapsegallerynav" 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="#"><i class="far fa-image"></i> IMGS</a>
	</div>

	<div class="collapse navbar-collapse" id="collapsegallerynav">
	<ul class="nav navbar-nav">
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	<ul class="nav navbar-nav navbar-right">
	<li><a href="#">Sign Up</a></li>
	<li><a href="#">Login</a></li>
	</ul>
	</div><!-- /.navbar-collapse -->
	</div>
	</nav>

	<div class="container">
	<div class="jumbotron">
	<h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
	<p>A bunch of beautiful images that I didn't take</p>
	</div>
	<div class="row">
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="http://i.imgur.com/qK42fUu.jpg"></div>
	</div>
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
	</div>
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
	</div>
	</div>
	<div class="row">
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9"></div>
	</div>
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
	</div>
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
	</div>
	</div>
	<div class="row">
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
	</div>
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
	</div>
	<div class="col-lg-4 col-sm-6 col-xs-12">
	<div class="thumbnail"><img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450"></div>
	</div>
	</div>
	</div>

	<!-- should before bootstrap!!! -->
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


	</body>
	</html>