CUNYTechPrep · Slaeh · Sep 16, 2021 · Sep 17, 2021
diff --git a/css/styles.css b/css/styles.css
@@ -1 +1,117 @@
+.imageBorder {
+  border-radius: 50%;
+  display: block;
+  /* margin-left: auto;
+  margin-right: auto; */
+}
 
+.milkBackground {
+  background-image: url("../img/milkbg.jpg");
+  width: 100vw;
+  height: 100vh;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.headerBox {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.headerBackground {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 450px;
+  width: 700px;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 10px;
+  color: white;
+}
+
+.headerTextBox {
+  display: flex;
+  width: 100vw;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.header {
+  color: white;
+  text-align: center;
+  font-size: 4rem;
+  font-weight: bold;
+  font-family: "Poppins", sans-serif;
+}
+
+.motto {
+  color: white;
+  text-align: center;
+  font-size: 1.5rem;
+  font-family: "Lato", sans-serif;
+}
+
+.cookieName {
+  color: black;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  font-family: "Poppins", sans-serif;
+  margin-top: 1.5rem;
+}
+
+.cookieDescription {
+  color: black;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: bold;
+  font-family: "Lato", sans-serif;
+}
+
+.aboutSection {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  background-color: lightgray;
+  margin-top: 1.5rem;
+  padding: 2rem;
+}
+
+.imageContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.aboutBox {
+  display: flex;
+  flex-direction: column;
+}
+
+.aboutHeader {
+  font-family: "Poppins", sans-serif;
+  font-weight: bold;
+  text-align: center;
+}
+
+.aboutText {
+  font-family: "Lato", sans-serif;
+  font-weight: bold;
+  text-align: center;
+}
+
+.footer {
+  display: flex;
+  font-family: "Poppins", sans-serif;
+  align-items: center;
+  flex-direction: column;
+  width: 100vw;
+  background-color: #19a0d0;
+  padding: 2rem;
+  color: white;
+}
diff --git a/index.html b/index.html
@@ -1,47 +1,114 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Cookie Store</title>
-</head>
-<body>
+  <head>
+    <link rel="stylesheet" href="./css/styles.css" />
+    <!-- CSS only -->
+    <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="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
+    <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=Lato:wght@300&family=Poppins:wght@500&display=swap" rel="stylesheet">
+    <title>Cookie Store</title>
+  </head>
+  <body>
+    <div>
+      <div class="milkBackground">
+        <div class="headerBox">
+          <div class="headerBackground">
+            <div class="headerTextBox">
+              <h1 class="header">Cookie Store</h1>
+              <p class="motto">
+                Buy our awesome cookies. All proceeds go to charity!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
+    <h2 class="cookieName">The Cookies</h2>
 
-<h1>Cookie Store</h1>
+    <div class="row">
+      <div class="col">
+        <!-- Mint cookies -->
+        <div class="container">
+          <div class="row" style="margin-top: 5rem; margin-bottom: 5rem;">
+            <div class="col">
+              <h3 class="cookieName">
+                Thin Mint Cookies <span class="badge badge-danger">New</span>
+              </h3>
+              <p class="cookieDescription">Tasty mint chocolate cookies</p>
+            </div>
+            <img class="imageBorder" src="img/mint.png" />
+          </div>
+        </div>
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
+        <!-- Peanut butter cookies -->
+        <div class="container">
+          <div class="row" style="margin-top: 5rem; margin-bottom: 5rem;">
+            <div class="col order-last">
+              <h3 class="cookieName">Peanut Butter Cookies</h3>
+              <p class="cookieDescription">Yummy peanut buttery goodness!</p>
+            </div>
+            <img class="imageBorder" src="img/peanut.png" />
+          </div>
+        </div>
 
-<h2>The Cookies</h2>
+        <!-- Shorebread cookies  -->
+        <div class="container">
+          <div class="row" style="margin-top: 5rem; margin-bottom: 5rem;">
+            <div class="col order-first">
+              <h3 class="cookieName">Short Bread Cookies</h3>
+              <p class="cookieDescription">Santa's favorite classic.</p>
+            </div>
+            <img class="imageBorder" src="img/shortbread.png" />
+          </div>
+        </div>
 
-<h3>Thin Mint Cookies</h3>
-<p>Tasty mint chocolate cookies</p>
-<img src="img/mint.png">
-
-<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
-</div>
-
-</body>
+        <!-- Smores Cookies  -->
+        <div class="container">
+          <div class="row" style="margin-top: 5rem; margin-bottom: 5rem;">
+            <div class="col order-last">
+          <h3 class="cookieName">Smore's Cookies</h3>
+          <p class="cookieDescription">Camp fire favorite!</p>
+          </div>
+          <img class="imageBorder" src="img/smores.png" />
+        </div>
+      </div>
+    </div>
+    <!-- About  -->
+    <div class="aboutSection">
+      <div class="imageContainer">
+        <img src="img/cmonster.png" />
+      </div>
+      <div class="aboutBox">
+        <h2 class="aboutHeader">About us</h2>
+        <div class="aboutText">
+          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>
+    <!-- Footer  -->
+    <div class="footer">
+      <h2 class="text-center">Contact us</h2>
+      <div class="text-center">
+        100 Broadway Avenue,<br />
+        New York, NY 10001 <br />
+        (212) 555-1234
+      </div>
+    </div>
+  </body>
 </html>