diff --git a/README.md b/README.md
index 10a92bc..9709ded 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Bootstrap lab
+# Bootstrap lab BUT MY VERSION
 
 
 ## Project 1: Build a responsive cookie store web page
diff --git a/css/styles.css b/css/styles.css
index 8b13789..0fac9bc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,36 @@
+img {
+    border-radius: 50%;
+    justify-content: space-between;
+    display: flex;
+    white-space: normal;
+    
+  }
+.background{
+    background-size: 800px 600px;
+}
+  
+  
+  * {
+    box-sizing: border-box;
+    text-align: center;
+  }
+  
+  .col {
+    float: right;
+    width: 66.66%;
+    padding: 5px;
+  }
+  /* Clearfix (clear floats) */
+  .row row-cols-4::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+  
+  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
+  
+  @media (min-width: 576px) { 
+    .col {
+      width: 100%;
+    } }
 
diff --git a/index.html b/index.html
index e2bedec..85a696a 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,93 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="css/styles.css"  />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
   <title>Cookie Store</title>
 </head>
-<body>
+<style>
+  
 
+</style>
+<body>
 
+<div class ="background" style="background-image: url('img/milkbg.jpg');" width=300 height=500>
 <h1>Cookie Store</h1>
 
 <p>Buy our awesome cookies. All proceeds go to charity!</p>
-
+</div>
 <h2>The Cookies</h2>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
+<div class="container">
+  <div class="row row-cols-4">
+    
+    <li>
+    <div class="col">
+      <h3>Thin Mint Cookies</h3>
+      <p>Tasty mint chocolate cookies</p>
+      <a>
+      <img src="img/mint.png" class= "img-fluid"/>
+    </a>
+    </div>
+  </li>
 
-<h3>Peanut Butter Cookies</h3>
+  <li>
+    <div class="col">
+      <h3>Peanut Butter Cookies</h3>
 <p>Yummy peanut buttery goodness!</p>
-<img src="img/peanut.png">
-
-<h3>Short Bread Cookies</h3>
-<p>Santa's favorite classic.</p>
-<img src="img/shortbread.png">
-
-<h3>Smore's Cookies</h3>
-<p>Camp fire favorite!</p>
-<img src="img/smores.png">
-
-<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
+<a>
+<img src="img/peanut.png"class= "img-fluid"/>
+</a>
+    </div>
+  </li>
+  <li>
+    <div class="col">
+      <h3>Short Bread Cookies</h3>
+      <p>Santa's favorite classic.</p>
+      <a>
+      <img src="img/shortbread.png" class= "img-fluid"/>
+    </a>
+    </div>
+  </li>
+  <li>
+    <div class="col">
+      <h3>Smore's Cookies</h3>
+      <p>Camp fire favorite!</p>
+      <a>
+      <img src="img/smores.png" class= "img-fluid"/>
+    </a>
+    </div>
+  </li>
+
+  </div>
 </div>
 
+
+  <div class="row" style="background-color: gray;">
+    
+    <div class="col-6"><img src="img/cmonster.png" class= "img-fluid"/></div>
+    <div class="col-6"> <h2>About us</h2> 
+      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="row" style="background-color: #007bff;">
+      <div class="col-12"> <h2>Contact us</h2>
+        100 Broadway Avenue,<br>
+        New York, NY 10001 <br>
+        (212) 555-1234</div>
+      </div>
+  </div>
+</div>
+
+
+
+
 </body>
 </html>
