diff --git a/css/styles.css b/css/styles.css
index 8b13789..ca64955 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,21 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
+
+.bannner{
+	height: 1000px;
+	border: 1px solid green;
+}
+
+h1{
+	margin: 100px 0 0 0;
+	color: white;
+	font-size: 70px;
+}
+
+.transbox {
+  margin: 3px;
+  background-color: #ffffff;
+  border: 1px solid black;
+  opacity: 0.6;
+  filter: alpha(opacity=60); /* For IE8 and earlier */
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e2bedec..cd711ce 100644
--- a/index.html
+++ b/index.html
@@ -2,46 +2,107 @@
 <html>
 <head>
   <title>Cookie Store</title>
+  <!-- Latest compiled and minified CSS -->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+	<!-- Optional theme -->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+	<!-- Latest compiled and minified JavaScript -->
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+	<link rel="stylesheet" type="text/css" href="css/styles.css">
+
+
 </head>
+
+
+
+
+	
+
+
+<div class = "container-fluid">
 <body>
+	<div class = "row text-center" 
+		style="background:transparent url('img/milkbg.jpg') no-repeat center center /cover; 
+				height: 400px;">
+      <div class="col-lg-12">
 
+	<div class = "col-sm-12" 
+		style = "margin: 60px 0 0 0;
+				  background-color: black;
+				  border: 1px solid black;
+				  height: 300px;
+				  opacity: 0.5;
+				  position: center;">
+	<h1>Cookie Store</h1>
 
-<h1>Cookie Store</h1>
+	<p style = "font-size: 20px; color: white; ">Buy our awesome cookies. All proceeds go to charity!</p>
+	</div>
+	</div>
+	</div>
+	<div class = "row text-center">
+	<div class = "col-sm-12">
+	</div>
+	<h2>The Cookies</h2>
+	</div>
+	</div>
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+	</div>
+	<div class = "row text-center" id = "products">
 
-<h2>The Cookies</h2>
+		<div class = "col-md-3">
+			<h3>Thin Mint Cookies</h3>
+			<img src = "img/"
+			<p>Tasty mint chocolate cookies</p>
+			<img class = "img-circle" src="img/mint.png">
+		</div>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+		<div class = "col-md-3">
+			<h3>Peanut Butter Cookies</h3>
+			<p>Yummy peanut buttery goodness!</p>
+			<img class = "img-circle" src="img/peanut.png">
+		</div>
 
-<h3>Peanut Butter Cookies</h3>
-<p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
+		<div class = "col-md-3">
+			<h3>Short Bread Cookies</h3>
+			<p>Santa's favorite classic.</p>
+			<img class = "img-circle" src="img/shortbread.png">
+		</div>
 
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
+		<div class = "col-md-3">
+			<h3>Smore's Cookies</h3>
+			<p>Camp fire favorite!</p>
+			<img class = "img-circle" src="img/smores.png">
+		</div>
 
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
+	</div>
 
-<h2>About us</h2>
-<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
-<h2>Contact us</h2>
-<div>
-  100 Broadway Avenue,<br>
-  New York, NY 10001 <br>
-  (212) 555-1234
+<div class = "row text-center" style = "background-color: lightgrey; margin: 10px 0 0 0;">
+	<div class = "col-sm-12" id = "about-us" >
+	<h2>About us</h2>
+	<div class = "col-md-3"><img src = "img/cmonster.png" height = "200px" width = "200px">
+	</div>
+	<div class = "col-md-9">
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+	</div>
+	<div class = "col-sm-12" id = "contact-us" style = "background-color: lightblue;">
+	<h2>Contact us</h2>
+	<div>
+	  100 Broadway Avenue,<br>
+	  New York, NY 10001 <br>
+	  (212) 555-1234
+	</div>
+	</div>
+	</div>
+</div>
 </div>
-
 </body>
 </html>
