CodeYourFuture · hayatu4islam · Dec 29, 2022 · Dec 29, 2022 · Dec 29, 2022 · Dec 29, 2022
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,80 @@
 /* Add your CSS here */
 
+
+#cactus-shop {
+    width: 100%;
+    align-items: center;
+}
+
+h1 {
+    font-size: 25px;
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+}
+
+h2 {
+    font-size: 15px;
+    text-align: center;
+}
+#explore {
+    color: white;
+
+}
+
+#welcome {
+    font-size: medium;
+}
+
+.nav-bar {
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+    grid-template-rows: auto;
+    vertical-align: middle;
+
+}
+
+#user-icon {
+    width: 15px;
+    margin-right: 8px;
+}
+#order-online {
+    background-color: black;
+    color: white;
+}
+
+.heading {
+    margin-top: 30px;   
+}
+
+.item {
+    width: auto;
+    height: 30px;
+    align-content: center;
+    margin: 10px;
+}
+
+.clickable {
+    background-color: black;
+    border: 3px solid black;
+    padding: 3px;
+    width: 150px;
+    justify-items: center;
+    text-align: center;
+    margin: auto;
+    margin-bottom: 2rem;
+}
+
+.flavours {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+}
+
+img {
+    width: 300px;;
+}
+
 /* Dont' forget to link this file to your HTML in the <head> */
diff --git a/designs/beetroot.jpeg b/designs/beetroot.jpeg
diff --git a/designs/broccoli.jpeg b/designs/broccoli.jpeg
diff --git a/designs/carrot.jpeg b/designs/carrot.jpeg
diff --git a/designs/cucumber.jpeg b/designs/cucumber.jpeg
diff --git a/designs/design.PNG b/designs/design.PNG
diff --git a/designs/juice-bar.jpg b/designs/juice-bar.jpg
diff --git a/designs/mixed.jpg b/designs/mixed.jpg
diff --git a/designs/neon+.webp b/designs/neon+.webp
diff --git a/designs/organic-smoothies.jpg b/designs/organic-smoothies.jpg
diff --git a/designs/userIcon.png b/designs/userIcon.png
diff --git a/flavours.html b/flavours.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="./css/main.css">
+    <title>Flavours</title>
+</head>
+<body>
+    <div class="nav-bar">
+        <div class="item">==</div>
+        <div class="item">Juice Bar</div>
+        <div class="item"><img id="user-icon" src="./designs/userIcon.png" />Log In</div>
+        <div class="item" id="order-online">Order Online</div>
+    </div>
+    <div>
+        <h1 id="welcome">Welcome to the Juice Flavours Page!</h1>
+        <div class="flavours">
+            <div class="flavour">
+                <img src="./designs/beetroot.jpeg" alt="beetroot" />
+            </div>
+            <div class="flavour">
+                <img src="./designs/broccoli.jpeg" alt="broccoli" />
+            </div>
+            <div class="flavour">
+                <img src="./designs/carrot.jpeg" alt="carrot" />
+            </div>
+            <div class="flavour">
+                <img src="./designs/cucumber.jpeg" alt="cucumber" />
+            </div>
+            <div class="flavour">
+                <img src="./designs/juice-bar.jpg" alt="Juice bar" />
+            </div>
+            <div class="flavour">
+                <img src="./designs/mixed.jpg" alt="mixed" />
+            </div>
+            <div class="flavour">
+                <img src="./designs/organic-smoothies.jpg" alt="Organic" />
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -1,21 +1,39 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <!-- Add a link to your custom CSS here -->
-
-    <title>Responsive grid project</title>
-</head>
-
-<body>
-
-    <!-- Add your markup here -->
-
-
-    <!-- Please leave this in to credit the creators of this design -->
-    <p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <!-- Add a link to your custom CSS here -->
+    <link rel="stylesheet" type="text/css" href="./css/main.css">
+
+    <title>Responsive grid project</title>
+</head>
+
+<body>
+
+    <!-- Add your markup here -->
+
+        <div class="nav-bar">
+            <div class="item">==</div>
+            <div class="item">Juice Bar</div>
+            <div class="item"><img id="user-icon" src="./designs/userIcon.png" />Log In</div>
+            <div class="item" id="order-online">Order Online</div>
+        </div>
+        <div class="heading">
+            <h1>Fuel Your Body. Balance Your Mind.</h1>
+            <h2>Organic Cold Pressed Juices & Smoothies</h2>
+        </div>
+        <div class="clickable">
+            <a id="explore" href="flavours.html">Explore Flavours</a>
+        </div>
+
+    <div>
+        <img id="cactus-shop" src="./designs/design.PNG" />
+        </div>
+
+    <!-- Please leave this in to credit the creators of this design -->
+    <p>This website design was created by Hayat, and is used here for strictly educational purposes.</p>
+</body>
+
 </html>