From 6e375a2d4c1204da612f197cccdac05c6ab394aa Mon Sep 17 00:00:00 2001
From: seon-b <86736916+seon-b@users.noreply.github.com>
Date: Thu, 23 Sep 2021 20:59:31 -0400
Subject: [PATCH] The page was styled using bootstrap.

---
 css/styles.css |  38 +++++++++++++++
 index.html     | 122 ++++++++++++++++++++++++++++++++-----------------
 2 files changed, 119 insertions(+), 41 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 8b13789..3e364eb 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1 +1,39 @@
+body {
+  font-family: "Anton", sans-serif;
+}
+.cookieContainer {
+  width: auto;
+  height: 26em;
+  background-image: url("/img/milkbg.jpg");
+  background-repeat: no-repeat;
+  object-fit: cover;
+  margin-bottom: 4em;
+}
 
+.aboutUsContainer {
+  height: 18em;
+  background-color: lightgray;
+}
+
+.newButton {
+  width: 4em;
+  height: 2em;
+  position: relative;
+  left: 1px;
+}
+
+.cookieMonster {
+  width: 10em;
+  height: 10em;
+}
+
+.mainTitleStyle {
+  position: absolute;
+  left: 19em;
+  top: 2em;
+  width: 30em;
+  height: 15em;
+  background-color: black;
+  opacity: 0.75;
+  font-size: 1em;
+}
diff --git a/index.html b/index.html
index e2bedec..bf9ef53 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,87 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Cookie Store</title>
-</head>
-<body>
+  <head>
+    <title>Cookie Store</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
+      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=Nunito+Sans:wght@600&display=swap"
+      rel="stylesheet"
+    />
 
+    <link rel="stylesheet" href="/css/styles.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="cookieContainer text-center text-white img-fluid">
+        <div class="mainTitleStyle">
+          <h1 class="p-5">Cookie Store</h1>
 
-<h1>Cookie Store</h1>
+          <p class="text-center text-white">
+            Buy our awesome cookies. All proceeds go to charity!
+          </p>
+        </div>
+      </div>
 
-<p>Buy our awesome cookies. All proceeds go to charity!</p>
-
-<h2>The Cookies</h2>
-
-<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>
+      <h2 class="text-center">The Cookies</h2>
+      <div class="row">
+        <div class="col-lg-3 col-md-12">
+          <h3>Thin Mint Cookies</h3>
+          <div
+            class="buttonContainer d-flex flex-row justify-content-center mb-5"
+          >
+            <button type="button" class="btn btn-danger newButton">NEW</button>
+          </div>
+          <p>Tasty mint chocolate cookies</p>
+          <img src="img/mint.png" class="rounded-circle img-fluid w-75" />
+        </div>
+        <div class="col-lg-3 col-md-12">
+          <h3>Peanut Butter Cookies</h3>
+          <p>Yummy peanut buttery goodness!</p>
+          <img src="img/peanut.png" class="rounded-circle img-fluid w-75" />
+        </div>
+        <div class="col-lg-3 col-md-12">
+          <h3>Short Bread Cookies</h3>
+          <p>Santa's favorite classic.</p>
+          <img src="img/shortbread.png" class="rounded-circle img-fluid w-75" />
+        </div>
+        <div class="col-lg-3 col-md-12">
+          <h3>Smore's Cookies</h3>
+          <p>Camp fire favorite!</p>
+          <img src="img/smores.png" class="rounded-circle img-fluid w-75" />
+        </div>
+      </div>
+      <div class="aboutUsContainer">
+        <h2 class="text-center">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>
+        <img
+          src="/img/cmonster.png"
+          alt="cookie monster"
+          class="cookieMonster"
+        />
+      </div>
+      <div class="contactUs bg-info text-white">
+        <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>
+    </div>
+  </body>
 </html>
