Cart Update

Ryc21001 · Apr 24, 2024 · 381876a · 381876a
1 parent 42c3b26
commit 381876a
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 26 deletions.
diff --git a/final/cart.html b/final/cart.html
@@ -20,6 +20,11 @@ <h1 class="fraunces-reg orange">Your Cart:</h1>
             </svg>
             Back
         </button></a>
+        <button class="check white fraunces-reg check-out">Check Out
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="customize-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>
+        </button>
     </section>
     <script src="script.js"></script>
 </body>

diff --git a/final/css/style.css b/final/css/style.css
@@ -381,13 +381,14 @@ a {
     font-size: 5em;
     padding-left: 20px;
     margin: 0;
+    z-index: 1001;
 }
 
 .carousel {
     position: relative;
     z-index: 1;
     height: 70vh;
-    margin-top: -120px;
+    margin-top: -160px;
     pointer-events: none;
     overflow: hidden;
 }
@@ -528,7 +529,7 @@ a {
 }
 
 .customize {
-    margin-top: -30px;
+    margin-top: 0px;    
     background-color: #fa5000;
     border-radius: 40px;
     border: none;
@@ -547,7 +548,6 @@ a {
 }
 
 .back {
-    margin-top: 30px;
     background-color: #fa5000;
     border-radius: 40px;
     border: none;
@@ -566,6 +566,25 @@ a {
     }
 }
 
+.check {
+    margin-top: 15px;
+    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;
+    }
+}
+
 .cart-sect {
     padding-top: 75px;
     width: 100%;

diff --git a/final/images/pie1.png b/final/images/pie1.png
diff --git a/final/images/pie1_original.png b/final/images/pie1_original.png
diff --git a/final/images/pie2.png b/final/images/pie2.png
diff --git a/final/images/pie2_original.png b/final/images/pie2_original.png
diff --git a/final/images/pie3.png b/final/images/pie3.png
diff --git a/final/images/pie3_original.png b/final/images/pie3_original.png
diff --git a/final/images/pie4.png b/final/images/pie4.png
diff --git a/final/images/pie4_original.png b/final/images/pie4_original.png
diff --git a/final/images/pie5.png b/final/images/pie5.png
diff --git a/final/images/pie5_original.webp b/final/images/pie5_original.webp
diff --git a/final/main.html b/final/main.html
@@ -41,7 +41,7 @@ <h2 class="num basic-semi orange price">$12.50</h2>
                     <img src="images/pie2.png"/>
                     <div class="carousel-text">
                         <h1 class="title fraunces-reg name">Tomato & Onions</h1>
-                        <h2 class="num basic-semi orange price">$13.50</h2>
+                        <h2 class="num basic-semi orange price">$14.50</h2>
                         <button class="carousel-btn white fraunces-reg">Add to Cart</button>
                     </div>
                 </div>
@@ -51,37 +51,27 @@ <h2 class="num basic-semi orange price">$13.50</h2>
                     <img src="images/pie3.png"/>
                     <div class="carousel-text">
                         <h1 class="title fraunces-reg name">Mushroom & Olives</h1>
-                        <h2 class="num basic-semi orange price">$13.50</h2>
+                        <h2 class="num basic-semi orange price">$14.50</h2>
                         <button class="carousel-btn white fraunces-reg">Add to Cart</button>
                     </div>
                 </div>
             </div>
             <div class="carousel-item">
                 <div class="carousel-box">
-                    <img src="images/pie1.png"/>
+                    <img src="images/pie4.png"/>
                     <div class="carousel-text">
-                        <h1 class="title fraunces-reg name">Pepperoni</h1>
-                        <h2 class="num basic-semi orange price">$12.50</h2>
-                        <button class="carousel-btn white fraunces-reg">Add to Cart</button>
-                    </div>
-                </div>
-            </div>
-            <div class="carousel-item">
-                <div class="carousel-box">
-                    <img src="images/pie2.png"/>
-                    <div class="carousel-text">
-                        <h1 class="title fraunces-reg name">Tomato & Onions</h1>
+                        <h1 class="title fraunces-reg name">Tomato & Basil</h1>
                         <h2 class="num basic-semi orange price">$13.50</h2>
                         <button class="carousel-btn white fraunces-reg">Add to Cart</button>
                     </div>
                 </div>
             </div>
             <div class="carousel-item">
                 <div class="carousel-box">
-                    <img src="images/pie3.png"/>
+                    <img src="images/pie5.png"/>
                     <div class="carousel-text">
-                        <h1 class="title fraunces-reg name">Mushroom & Olives</h1>
-                        <h2 class="num basic-semi orange price">$13.50</h2>
+                        <h1 class="title fraunces-reg name">Jalapeno & Pepperoni</h1>
+                        <h2 class="num basic-semi orange price">$14.50</h2>
                         <button class="carousel-btn white fraunces-reg">Add to Cart</button>
                     </div>
                 </div>
@@ -101,7 +91,7 @@ <h2 class="num basic-semi orange price">$12.50</h2>
                     <img src="images/pie2.png"/>
                     <div class="carousel-text">
                         <h1 class="title fraunces-reg name">Tomato & Onions</h1>
-                        <h2 class="num basic-semi orange price">$13.50</h2>
+                        <h2 class="num basic-semi orange price">$14.50</h2>
                         <button class="carousel-btn white fraunces-reg">Add to Cart</button>
                     </div>
                 </div>
@@ -111,23 +101,33 @@ <h2 class="num basic-semi orange price">$13.50</h2>
                     <img src="images/pie3.png"/>
                     <div class="carousel-text">
                         <h1 class="title fraunces-reg name">Mushroom & Olives</h1>
+                        <h2 class="num basic-semi orange price">$14.50</h2>
+                        <button class="carousel-btn white fraunces-reg">Add to Cart</button>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-item">
+                <div class="carousel-box">
+                    <img src="images/pie4.png"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg name">Tomato & Basil</h1>
                         <h2 class="num basic-semi orange price">$13.50</h2>
                         <button class="carousel-btn white fraunces-reg">Add to Cart</button>
                     </div>
                 </div>
             </div>
             <div class="carousel-item">
                 <div class="carousel-box">
-                    <img src="images/pie1.png"/>
+                    <img src="images/pie5.png"/>
                     <div class="carousel-text">
-                        <h1 class="title fraunces-reg name">Pepperoni</h1>
-                        <h2 class="num basic-semi orange price">$12.50</h2>
-                        <button class="carousel-btn orange fraunces-reg">Add to Cart</button>
+                        <h1 class="title fraunces-reg name">Jalapeno & Pepperoni</h1>
+                        <h2 class="num basic-semi orange price">$14.50</h2>
+                        <button class="carousel-btn white fraunces-reg">Add to Cart</button>
                     </div>
                 </div>
             </div>
         </div>
-        <button class="customize white fraunces-reg">Customize
+        <button class="customize white fraunces-reg check-out">Check Out
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="customize-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>