-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (74 loc) · 5.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<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=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap"
rel="stylesheet">
<title>Frontend Mentor | Product list with cart</title>
<link rel="stylesheet" href="output.css">
<link rel="stylesheet" href="index.css">
<script defer src="index.js" ></script>
</head>
<body>
<div class="blurOverlay"></div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-full sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
<div id="pageTitle"><h1 class="font-bold ">Desserts</h1></div>
<div class="flex flex-wrap lg:flex-nowrap justify-between items-start gap-5">
<div class="leftColumn flex-grow">
<div id="items" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
</div>
<div class="cart block max-w-sm p-3 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 order-2 lg:order-2">
<p class="cartTitle">Your Cart (0)</p>
<div id="cartItems" class="cartItems">
<img class="cartPlacHolderImg" src="assets/images/illustration-empty-cart.svg" alt="">
<p class="cartPlaceHolder">Your added items will appear here</p>
</div>
<div class="btmContainer">
<div class="cartTotalContainer">
<p>Order Total</p>
<p id="cartTotal">$0.00</p>
</div>
<div id="carbNeutral">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20">
<path fill="#1EA575"
d="M8 18.75H6.125V17.5H8V9.729L5.803 8.41l.644-1.072 2.196 1.318a1.256 1.256 0 0 1 .607 1.072V17.5A1.25 1.25 0 0 1 8 18.75Z"/>
<path fill="#1EA575"
d="M14.25 18.75h-1.875a1.25 1.25 0 0 1-1.25-1.25v-6.875h3.75a2.498 2.498 0 0 0 2.488-2.747 2.594 2.594 0 0 0-2.622-2.253h-.99l-.11-.487C13.283 3.56 11.769 2.5 9.875 2.5a3.762 3.762 0 0 0-3.4 2.179l-.194.417-.54-.072A1.876 1.876 0 0 0 5.5 5a2.5 2.5 0 1 0 0 5v1.25a3.75 3.75 0 0 1 0-7.5h.05a5.019 5.019 0 0 1 4.325-2.5c2.3 0 4.182 1.236 4.845 3.125h.02a3.852 3.852 0 0 1 3.868 3.384 3.75 3.75 0 0 1-3.733 4.116h-2.5V17.5h1.875v1.25Z"/>
</svg>
<p>This is a <span>carbon-neutral</span> delivery</p>
</div>
<button type="button" id="btn-confirm" onclick="confirmCart()">Confirm Order</button>
</div>
</div>
</div>
<div class="attribution">
<p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge">Frontend Mentor</a>. </p>
<p>Coded by <a href="https://www.frontendmentor.io/profile/MadsenBK">BK Madsen</a>.</p>
</div>
</div>
<div class="confContainer">
<div class="titleCard">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 32.121L13.5 24.6195L15.6195 22.5L21 27.879L32.3775 16.5L34.5 18.6225L21 32.121Z"
fill="#1EA575"/>
<path d="M24 3C19.8466 3 15.7865 4.23163 12.333 6.53914C8.8796 8.84665 6.18798 12.1264 4.59854 15.9636C3.0091 19.8009 2.59323 24.0233 3.40352 28.0969C4.21381 32.1705 6.21386 35.9123 9.15077 38.8492C12.0877 41.7861 15.8295 43.7862 19.9031 44.5965C23.9767 45.4068 28.1991 44.9909 32.0364 43.4015C35.8736 41.812 39.1534 39.1204 41.4609 35.667C43.7684 32.2135 45 28.1534 45 24C45 18.4305 42.7875 13.089 38.8493 9.15076C34.911 5.21249 29.5696 3 24 3ZM24 42C20.4399 42 16.9598 40.9443 13.9997 38.9665C11.0397 36.9886 8.73256 34.1774 7.37018 30.8883C6.0078 27.5992 5.65134 23.98 6.34587 20.4884C7.04041 16.9967 8.75474 13.7894 11.2721 11.2721C13.7894 8.75473 16.9967 7.0404 20.4884 6.34587C23.98 5.65133 27.5992 6.00779 30.8883 7.37017C34.1774 8.73255 36.9886 11.0397 38.9665 13.9997C40.9443 16.9598 42 20.4399 42 24C42 28.7739 40.1036 33.3523 36.7279 36.7279C33.3523 40.1036 28.7739 42 24 42Z"
fill="#1EA575"/>
</svg>
<h1>Order Confirmed</h1>
<p>We hope you enjoy your food!</p>
</div>
<div class="cartSummary">
<!-- cart items list -->
</div>
<div class="confCartTotal">
<p>Order Total</p>
<p id="confCartTotal">$0.00</p>
</div>
<button type="button" class="newOrderBtn" id="btn-newOrder" onclick="newOrder()">Start New Order</button>
</div>
</body>
</html>