Final Cart Update

Ryc21001 · Apr 24, 2024 · 42c3b26 · 42c3b26
1 parent 6dda17d
commit 42c3b26
Show file tree

Hide file tree

Showing 6 changed files with 360 additions and 72 deletions.
diff --git a/final/cart.html b/final/cart.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Slice Haven</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://use.typekit.net/oxo3yif.css">
+</head>
+<body>
+    <section class="cart-sect">
+        <h1 class="fraunces-reg orange">Your Cart:</h1>
+        <hr>
+        <section class="cart-list">
+            <hr>
+        </section>
+        <a href="main.html"><button class="back white fraunces-reg">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="back-icon">
+                <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+            </svg>
+            Back
+        </button></a>
+    </section>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/final/css/style.css b/final/css/style.css
@@ -344,19 +344,36 @@ a {
 /* SECTION 4 */
 
 .main-sect {
-    display: flex;
-    flex-direction: column;
+    display: grid;
     gap: 20px;
 }
 
+.cart-cont {
+    display: flex;
+    align-items: center;
+    div {
+        background-color: #fa5000;
+        border-radius: 20px;
+        height: 35px;
+        width: 35px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.cart-num {
+    color: white;
+    margin: 0;
+}
+
 .main-nav {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
 
 .main-icons {
     width: 60px;
-    padding: 20px;
     fill: #fa5000;
 }
 
@@ -370,7 +387,7 @@ a {
     position: relative;
     z-index: 1;
     height: 70vh;
-    margin-top: -70px;
+    margin-top: -120px;
     pointer-events: none;
     overflow: hidden;
 }
@@ -447,12 +464,18 @@ a {
     }
 
     .carousel-btn {
+        color: #fa5000;
         grid-row: 2;
         grid-column: 1;
-        background-color: #fa5000;
+        border: #fa5000 3px solid;
+        background-color: transparent;
         border-radius: 40px;
-        border: none;
         font-size: 1.5em;
+        transition: all .2s ease;
+        &:active {
+            background-color: #fa5000;
+            color: white;
+        }
     }
 
     img {
@@ -502,4 +525,140 @@ a {
         text-transform: uppercase;
         opacity: .4;
     }
+}
+
+.customize {
+    margin-top: -30px;
+    background-color: #fa5000;
+    border-radius: 40px;
+    border: none;
+    font-size: 2.3em;
+    width: 300px;
+    height: 65px;
+    justify-self: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    .customize-icon {
+        width: 20px;
+        fill: white;
+    }
+}
+
+.back {
+    margin-top: 30px;
+    background-color: #fa5000;
+    border-radius: 40px;
+    border: none;
+    font-size: 2.3em;
+    width: 300px;
+    height: 65px;
+    justify-self: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    .back-icon {
+        width: 20px;
+        fill: white;
+        rotate: 180deg;
+    }
+}
+
+.cart-sect {
+    padding-top: 75px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    h1 {
+        font-size: 4em;
+        margin: 0;
+    }
+}
+
+.cart-list {
+    height: 600px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    width: 330px;
+    padding: 0px 25px;
+    display: flex;
+    flex-direction: column;
+    h2 {
+        font-size: 2em;
+    }
+}
+
+hr {
+    border-top: 2px solid rgba(0, 0, 0, 0.201);
+    width: 340px;
+}
+
+.cart-card {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: 1fr min-content min-content;
+    row-gap: 3px;
+    img {
+        grid-column: 1;
+        grid-row: 1 / -1;
+        width: 100px;
+        height: min-content;
+    }
+    h2 {
+        grid-column: 2;
+        grid-row: 1;
+        margin: 0;
+        align-self: flex-end;
+    }
+    h3 {
+        grid-column: 2;
+        grid-row: 2;
+        margin: 0;
+        align-self: flex-start;
+        font-size: 1.5em;
+    }
+}
+
+.amount-cont {
+    width: 100px;
+    grid-column: 2;
+    grid-row: 3;
+    align-self: flex-start;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    h4 {
+        margin: 0;
+        font-size: 1.25em;
+        align-self: center;
+        justify-self: center;
+    }
+}
+
+.amount-icon {
+    width: 15px;
+    fill: white;
+    transition: all .2s ease;
+}
+
+.quantity-btn {
+    align-self: center;
+    justify-self: center;
+    border: none;
+    border-radius: 20px;
+    background-color: #fa5000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    transition: all .2s ease;
+    &:active {
+        background-color: black;
+        .amount-icon {
+            fill: white;
+        }
+    }
 }
diff --git a/final/images/Eye-Closed.svg b/final/images/Eye-Closed.svg
diff --git a/final/images/Eye-Open.svg b/final/images/Eye-Open.svg