Final Updated

Ryc21001 · Apr 23, 2024 · 6dda17d · 6dda17d
1 parent 6b33262
commit 6dda17d
Show file tree

Hide file tree

Showing 8 changed files with 482 additions and 5 deletions.
diff --git a/final/css/style.css b/final/css/style.css
@@ -339,4 +339,167 @@ a {
 .start-order-off {
     background-color: #4f4f4f;
     opacity: 0.75;
+}
+
+/* SECTION 4 */
+
+.main-sect {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.main-nav {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.main-icons {
+    width: 60px;
+    padding: 20px;
+    fill: #fa5000;
+}
+
+.main-headline {
+    font-size: 5em;
+    padding-left: 20px;
+    margin: 0;
+}
+
+.carousel {
+    position: relative;
+    z-index: 1;
+    height: 70vh;
+    margin-top: -70px;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.carousel-item {
+    --items: 10;
+    --width: clamp(300px, 40vw,  400px);
+    --height: clamp(300px, 40vw,  400px);
+    --x: calc(var(--active) * 800%);
+    --y: calc(var(--active) * 200%);
+    --rot: calc(var(--active) * 120deg);
+    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
+    position: absolute;
+    z-index: var(--zIndex);
+    width: var(--width);
+    height: var(--height);
+    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
+    border-radius: 10px;
+    top: 50%;
+    left: 50%;
+    user-select: none;
+    transform-origin: 0% 100%;
+    pointer-events: all;
+    transform:  translate(var(--x), var(--y)) rotate(var(--rot)) ;
+    transition: transform .8s cubic-bezier(0, 0.02, 0, 1);
+    background: transparent;
+
+    .carousel-box {
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
+        opacity: var(--opacity);
+        display: grid;
+        grid-template-rows: 4fr 1fr;
+    }
+
+    .carousel-text {
+        grid-row: 2;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 50px;
+        row-gap: 12px;
+        transition: all .2s ease;
+    }
+
+    .carousel-hidden {
+        display: none;
+    }
+
+    .title {
+        z-index: 1;
+        font-size: 2.5em;
+        grid-row: 1;
+        grid-column: 1 / -1;
+        justify-self: center;
+        align-self: flex-start;
+        margin: 0;
+        transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
+    }
+
+    .num {
+        z-index: 1;
+        font-size: 2.5em;
+        grid-row: 2;
+        grid-column: 2;
+        justify-self: center;
+        align-self: flex-end;
+        margin: 0;
+        transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
+    }
+
+    .carousel-btn {
+        grid-row: 2;
+        grid-column: 1;
+        background-color: #fa5000;
+        border-radius: 40px;
+        border: none;
+        font-size: 1.5em;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        pointer-events: none;
+        grid-row: 1;
+        justify-self: center;
+        align-self: center;
+        filter: drop-shadow(0px 0px 11px #0000006b);
+    }
+}
+
+.layout {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    &:before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 90px;
+        width: 10px;
+        height: 100%;
+        border: 1px solid #fff;
+        border-top: none;
+        border-bottom: none;
+        opacity: .15;
+    }
+
+    .box {
+        position: absolute;
+        bottom: 0;
+        left: 30px;
+        color: #fff;
+        transform-origin: 0% 10%;
+        transform: rotate(-90deg);
+        font-size: 9px;
+        line-height: 1.4;
+        text-transform: uppercase;
+        opacity: .4;
+    }
 }
diff --git a/final/images/peel.png b/final/images/peel.png
diff --git a/final/images/pie1.png b/final/images/pie1.png
diff --git a/final/images/pie2.png b/final/images/pie2.png
diff --git a/final/images/pie3.png b/final/images/pie3.png
diff --git a/final/main.html b/final/main.html
@@ -0,0 +1,126 @@
+<!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="main-sect">
+        <div class="main-nav">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="main-icons" style="grid-column: 1; justify-self: flex-start;">
+                <path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z"/>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="main-icons" style="grid-column: 2; justify-self: flex-end;">
+                <path d="M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/>
+            </svg>
+        </div>
+        <h1 class="fraunces-reg black main-headline">Find Your Pie!</h1>
+        <div class="carousel">
+            <div class="carousel-item">
+                <div class="carousel-box">
+                    <img src="images/pie1.png"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg">Pepperoni</h1>
+                        <h2 class="num basic-semi orange">$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">Tomato & Onions</h1>
+                        <h2 class="num basic-semi orange">$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"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg">Mushroom & Olives</h1>
+                        <h2 class="num basic-semi orange">$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"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg">Pepperoni</h1>
+                        <h2 class="num basic-semi orange">$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">Tomato & Onions</h1>
+                        <h2 class="num basic-semi orange">$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"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg">Mushroom & Olives</h1>
+                        <h2 class="num basic-semi orange">$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"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg">Pepperoni</h1>
+                        <h2 class="num basic-semi orange">$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">Tomato & Onions</h1>
+                        <h2 class="num basic-semi orange">$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"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg">Mushroom & Olives</h1>
+                        <h2 class="num basic-semi orange">$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"/>
+                    <div class="carousel-text">
+                        <h1 class="title fraunces-reg">Pepperoni</h1>
+                        <h2 class="num basic-semi orange">$12.50</h2>
+                        <button class="carousel-btn white fraunces-reg">Add to Cart</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/final/script-temp.js b/final/script-temp.js
@@ -0,0 +1,102 @@
+/*--------------------
+Vars
+--------------------*/
+let progress = 50;
+let startX = 0;
+let active = 0;
+let isDown = false;
+
+/*--------------------
+Contants
+--------------------*/
+const speedWheel = 0.02;
+const speedDrag = -0.1;
+
+/*--------------------
+Get Z
+--------------------*/
+const getZindex = (array, index) => (array.map((_, i) => (index === i) ? array.length : array.length - Math.abs(index - i)));
+
+/*--------------------
+Items
+--------------------*/
+const $items = document.querySelectorAll('.carousel-item');
+const $cursors = document.querySelectorAll('.cursor');
+
+const displayItems = (item, index, active) => {
+  const zIndex = getZindex([...$items], active)[index];
+  item.style.setProperty('--zIndex', zIndex);
+  item.style.setProperty('--active', (index - active) / $items.length);
+
+  // Fade in/out carousel-text based on active item
+  const carouselText = item.querySelector('.carousel-text');
+  if (index === active) {
+    carouselText.style.opacity = '1';
+  } else {
+    carouselText.style.opacity = '0';
+  }
+};
+
+/*--------------------
+Animate
+--------------------*/
+const animate = () => {
+  progress = Math.max(0, Math.min(progress, 100));
+  active = Math.floor(progress / 100 * ($items.length - 1));
+
+  $items.forEach((item, index) => displayItems(item, index, active));
+};
+animate();
+
+/*--------------------
+Click on Items
+--------------------*/
+$items.forEach((item, i) => {
+  item.addEventListener('click', () => {
+    progress = (i / $items.length) * 100 + 10;
+    animate();
+  });
+});
+
+/*--------------------
+Handlers
+--------------------*/
+const handleWheel = e => {
+  const wheelProgress = e.deltaY * speedWheel;
+  progress = progress + wheelProgress;
+  animate();
+};
+
+const handleMouseMove = (e) => {
+  if (e.type === 'mousemove') {
+    $cursors.forEach(($cursor) => {
+      $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
+    });
+  }
+  if (!isDown) return;
+  const x = e.clientX || (e.touches && e.touches[0].clientX) || 0;
+  const mouseProgress = (x - startX) * speedDrag;
+  progress = progress + mouseProgress;
+  startX = x;
+  animate();
+};
+
+const handleMouseDown = e => {
+  isDown = true;
+  startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;
+};
+
+const handleMouseUp = () => {
+  isDown = false;
+};
+
+/*--------------------
+Listeners
+--------------------*/
+document.addEventListener('mousewheel', handleWheel);
+document.addEventListener('mousedown', handleMouseDown);
+document.addEventListener('mousemove', handleMouseMove);
+document.addEventListener('mouseup', handleMouseUp);
+document.addEventListener('touchstart', handleMouseDown);
+document.addEventListener('touchmove', handleMouseMove);
+document.addEventListener('touchend', handleMouseUp);