CodeupClassroom · joshua-stephen-mullins · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,126 @@
+html, body {
+    font-family: 'Chivo', sans-serif;
+    color: #e7b17d;
+}
+
+body {
+    background-color: #551E19;
+    background-image: url("../images/fireplace.webp");
+    /*background-size: 100%;*/
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+}
+
+.headerFont {
+    font-family: 'MuseoModerno', sans-serif;
+}
+
+.navbar-brand img {
+    width: 20%;
+    height: 20%;
+    margin: 0;
+    padding: 0;
+}
+
+.navbar {
+    background-color: #551e19;
+}
+
+#search-Coffee {
+    background-color: #99592b;
+    color: #551e19;
+    border-color: black;
+    margin-right: 10px;
+}
+
+.coffees-container {
+    margin-top: 6em;
+}
+
+#roast-selection {
+    background-color: #99592b;
+    border-color: black;
+    color: #e7b17d;
+    width: 50%;
+    height: 3em;
+}
+
+.new-roast-selection-label, #new-roast-selection, #new-coffee-name {
+    background-color: #99592b;
+    border-color: black;
+    color: #e7b17d;
+}
+
+.coffeeCard {
+    margin: 5px;
+    background-color: #551E19;
+    text-align: center;
+}
+
+.coffeeCard img {
+    width: 100%;
+    height: 70%;
+    border-radius: 2%;
+}
+
+.add-button {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    z-index: 1030;
+}
+
+.cigar-pairing-box {
+    position: fixed;
+    right: 10em;
+    /*bottom: 2em;*/
+    /*z-index: 1030;*/
+}
+
+.cigar-pairing-box, .roast-pairing-list li, .cigar-pairing-list li {
+    background-color: #551e19;
+    color: #e7b17d;
+    border-radius: 2%;
+}
+
+.offcanvas-body, .offcanvas-header {
+    background-color: #551e19;
+    border-color: black;
+    color: #e7b17d;
+}
+
+.pairing-card{
+    width: 36%;
+    height: 20%;
+    margin-top: 30em;
+    margin-right: -9em;
+    border-radius: 2%;
+    font-size: 15px;
+}
+
+.roast-info{
+    font-size: 15px;
+    width: 38%;
+    position: fixed;
+    right: 0em;
+    top: 3em;
+    z-index: 4;
+    margin-top: 7em;
+    padding-bottom: 0;
+    border-radius: 2%;
+}
+
+.roast-header{
+    background-color: #551e19;
+    border-color: black;
+    color: #e7b17d;
+}
+
+.add-card{
+    background-color: #99592b;
+}
+
+.coffee-bean-btn {
+    border: thick black;
+}
diff --git a/images/OldPaperBackground.webp b/images/OldPaperBackground.webp
diff --git a/images/american.webp b/images/american.webp
diff --git a/images/breakfast.jpeg b/images/breakfast.jpeg
diff --git a/images/cinnamon-beans.jpg b/images/cinnamon-beans.jpg
diff --git a/images/cinnamon.jpeg b/images/cinnamon.jpeg
diff --git a/images/city.jpeg b/images/city.jpeg
diff --git a/images/coffee-images-all.jpeg b/images/coffee-images-all.jpeg
diff --git a/images/coffeebean.png b/images/coffeebean.png
diff --git a/images/continental.jpeg b/images/continental.jpeg
diff --git a/images/destinguished-gentleman-high-resolution-color-logo.png b/images/destinguished-gentleman-high-resolution-color-logo.png
diff --git a/...estinguished-gentleman-high-resolution-logo-color-on-transparent-background.png b/...estinguished-gentleman-high-resolution-logo-color-on-transparent-background.png
diff --git a/images/espresso-beans.jpg b/images/espresso-beans.jpg
diff --git a/images/espresso.jpeg b/images/espresso.jpeg
diff --git a/images/european.jpeg b/images/european.jpeg
diff --git a/images/fireplace.webp b/images/fireplace.webp
diff --git a/images/french.jpeg b/images/french.jpeg
diff --git a/images/half-city.jpeg b/images/half-city.jpeg
diff --git a/images/hear-espresso-beans.jpg b/images/hear-espresso-beans.jpg
diff --git a/images/high.jpeg b/images/high.jpeg
diff --git a/images/insert-coffee.webp b/images/insert-coffee.webp
diff --git a/images/italian.webp b/images/italian.webp
diff --git a/images/light-city.jpeg b/images/light-city.jpeg
diff --git a/images/new-orleans.jpeg b/images/new-orleans.jpeg
diff --git a/images/roasting-type.jpeg b/images/roasting-type.jpeg
diff --git a/images/vienesse.jpeg b/images/vienesse.jpeg
diff --git a/index.html b/index.html
@@ -3,32 +3,129 @@
 <head>
     <meta charset="UTF-8">
     <title></title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <h1>Coffee!</h1>
 
-    <form>
-        <label for="roast-selection"></label>
-        <select id="roast-selection">
-            <option>light</option>
-            <option>medium</option>
-            <option>dark</option>
-        </select>
-        <input id="submit" type="submit" />
-    </form>
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+    <!-- Bootstrap CSS only ------------------------------------------->
+    <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=Chivo:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=MuseoModerno:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+          rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+<div class="col-12 d-flex justify-content-center">
+    <h1>Distinguished Gentleman's Coffee</h1>
+</div>
+<nav class="navbar fixed-top p-0">
+    <div class="navbarColor container-fluid flex-nowrap">
+        <!--------------------------------- Nav Bar Title ------------------------------------>
+        <a class="navbar-brand" href="#"><img
+                src="images/destinguished-gentleman-high-resolution-logo-color-on-transparent-background.png"
+                alt="DGC Logo"></a>
+        <div class="d-flex" style="margin-top: 1em">
+            <div class="input-group mb-3" style="width: 15em; height: 3em;">
+                <input id="search-Coffee" type="text" class="form-control" placeholder="Find Your Demitasse"
+                       aria-label="Recipient's username" aria-describedby="button-addon2">
+            </div>
+            <label for="roast-selection"></label>
+            <select id="roast-selection" class="form-select" aria-label="Default select example">
+                <option id="submit-all">All</option>
+                <option id="submit-light">Light</option>
+                <option id="submit-medium">Medium</option>
+                <option id="submit-dark">Dark</option>
+            </select>
+        </div>
+        <!------------------------------ Open Menu Title ------------------------------------->
+        <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
+             aria-labelledby="offcanvasDarkNavbarLabel">
+            <div class="offcanvas-header">
+                <h2 class="offcanvas-title headerFont" id="offcanvasDarkNavbarLabel"> Welcome, how may we assist, good sir? </h2>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
+                        aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body">
+                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+                    <!---------------------- First Item in Open Menu ------------------------->
+                    <li class="nav-item">
+                        <a>
+                            <div class="card add-card">
+                                <div class="card-body">
+                                    <form name="searchForm">
+                                        <label class="new-roast-selection-label" for="new-roast-selection"> Be Distinguished. Add to
+                                            the Collection. </label>
+                                        <select id="new-roast-selection" class="form-select m-1"
+                                                aria-label="Default select example">
+                                            <option id="new-submit-light">light</option>
+                                            <option id="new-submit-medium">medium</option>
+                                            <option id="new-submit-dark">dark</option>
+                                        </select>
+                                        <!--                    <input id="new-coffee-name" type="text"-->
+                                        <!--                           name="search" placeholder="New Coffee Name...">-->
+                                        <div class="input-group mb-3">
+                                            <input id="new-coffee-name" type="text" class="form-control m-1"
+                                                   placeholder="" aria-label="Recipient's username"
+                                                   aria-describedby="button-addon2">
+                                            <button class="btn btn-outline-secondary m-1 rounded-circle border-dark border border-3" type="button"
+                                                    id="add-coffee-button"><img src="images/coffeebean.png" alt="Coffee Bean">
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</nav>
+<!------------------------------------ Nav Bar End ------------------------------------------->
+<!--------------------------------- Container ------------------------------------------->
+<div class="container-fluid row">
 
-    <script src="main.js"></script>
+    <div class="row col-8">
+        <!-------- Container for the function that renders coffee cards ------------->
+        <div class="d-flex flex-wrap coffees-container" id="coffees"></div>
+    </div>
+    <!-- Container that holds -->
+    <!------------------------------------ Cigar Pairing Card ------------------------------------------->
+    <div class="row  justify-content-end col-4">
+        <div class="roast-info">
+            <div class="card-header roast-header justify-content-center d-flex headerFont">
+                Know Your Roasts
+            </div>
+            <ul class="list-group list-group-flush roast-pairing-list">
+                <li class="list-group-item"> Light Roast: Light brown in color, this roast is generally preferred for milder coffee varieties. There will be no oil on the surface of these beans because they are not roasted long enough for the oils to break through to the surface.</li>
+                <li class="list-group-item"> Medium Roast: This roast is medium brown in color with a stronger flavor and a non-oily surface. It’s often referred to as the American roast because it is generally preferred in the United States.</li>
+                <li class="list-group-item"> Dark Roast: This roast produces shiny black beans with an oily surface and a pronounced bitterness. The darker the roast, the less acidity will be found in the coffee beverage.  Dark roast coffees run from slightly dark to charred, and the names are often used interchangeably — be sure to check your beans before you buy them!</li>
+            </ul>
+        </div>
+        <div class="card cigar-pairing-box d-flex align-items-center pairing-card">
+            <div class="card-header headerFont">
+                Know Your Pairing
+            </div>
+            <ul class="list-group list-group-flush cigar-pairing-list">
+                <li class="list-group-item"> Mild Cigar: Paired best with a Light Roast.</li>
+                <li class="list-group-item"> Medium to Full Body Cigar: Paired best with a Medium Roast</li>
+                <li class="list-group-item"> Rich Full Body Cigar: Paired best with a Dark Roast</li>
+            </ul>
+        </div>
+    </div>
+</div>
+<!----------------------------- Button for the add feature --------------------------------------->
+<div>
+    <button class="navbar-toggler rounded-circle border-dark border border-3 btn-lg add-button coffee-bean-btn" type="button" data-bs-toggle="offcanvas"
+            data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar"
+            style="background-color: chocolate; margin: 2em;">
+        <span class="navbar-toggler-icon" style=" margin: 2.5em"><img src="images/coffeebean.png"></span>
+    </button>
+</div>
+<!-- Bootstrap JavaScript Bundle with Popper ----------------------->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+        crossorigin="anonymous"></script>
+<script src="js/main.js"></script>
 </body>
 </html>