-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (86 loc) · 4.1 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
85
86
87
88
89
90
91
92
<!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" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<link rel="shortcut icon" href="./assets/icons8-marvel-16.png" type="image/x-icon">
<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=Roboto:ital,wght@0,400;0,700;1,300&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Marvel Comics</title>
</head>
<body>
<header class="logoArea">
<span id="home-btn" class="icon--svg icon--svg mvl-animated-logo" aria-hidden="true"
><svg width="130" height="52" xmlns="http://www.w3.org/2000/svg">
<rect fill="#EC1D24" width="100%" height="100%"></rect>
<path
fill="#FEFEFE"
d="M126.222 40.059v7.906H111.58V4h7.885v36.059h6.757zm-62.564-14.5c-.61.294-1.248.44-1.87.442v-14.14h.04c.622-.005 5.264.184 5.264 6.993 0 3.559-1.58 5.804-3.434 6.705zM40.55 34.24l2.183-18.799 2.265 18.799H40.55zm69.655-22.215V4.007H87.879l-3.675 26.779-3.63-26.78h-8.052l.901 7.15c-.928-1.832-4.224-7.15-11.48-7.15-.047-.002-8.06 0-8.06 0l-.031 39.032-5.868-39.031-10.545-.005-6.072 40.44.002-40.435H21.278L17.64 26.724 14.096 4.006H4v43.966h7.95V26.78l3.618 21.192h4.226l3.565-21.192v21.192h15.327l.928-6.762h6.17l.927 6.762 15.047.008h.01v-.008h.02V33.702l1.845-.27 3.817 14.55h7.784l-.002-.01h.022l-5.011-17.048c2.538-1.88 5.406-6.644 4.643-11.203v-.002C74.894 19.777 79.615 48 79.615 48l9.256-.027 6.327-39.85v39.85h15.007v-7.908h-7.124v-10.08h7.124v-8.03h-7.124v-9.931h7.124z"
></path>
<path fill="#EC1D24" d="M0 0h30v52H0z"></path>
<path
fill="#FEFEFE"
d="M31.5 48V4H21.291l-3.64 22.735L14.102 4H4v44h8V26.792L15.577 48h4.229l3.568-21.208V48z"
></path>
</svg>
</span>
</header>
<main>
<div class="searchArea">
<input id="searchBox" type="text" placeholder="Search a comic">
<button class="btn search-btn" id="searchButton">Search</button>
</div>
<nav class="buttons-wrapper">
<button class="btn nav-btn" id="previous">Previous Page</button>
<button class="btn nav-btn" id="next">Next Page</button>
</nav>
<div class="comicsGrid"></div>
</main>
<div class="comicModal"></div>
<div class="cartModal">
<div class="cartContent">
<div class="cartOrders">
<header>
<h2>Cart</h1>
<button class="btn hide-btn" id="minimizeButton">
<img src="./assets/minimize-icon.svg" alt="minimize">
</button>
</header>
<div class="cartItems"></div>
<footer>
<button class="btn proceed-btn" id="toDelivery">Proceed to Delivery</button>
</footer>
</div>
<div class="addressPicking">
<h2>Delivery</h1>
<h3>Select your address on the map:</h3>
<div class="map-container" id="map"></div>
<div class="btns-container">
<button class="btn rtrn-btn" id="returnButton">Return</button>
<button class="btn finish-btn" id="finishButton">Finish Order</button>
</div>
</div>
<div class="finalArea">
<p>Finished Order!</p>
</div>
</div>
</div>
<div class="cart" id="openCart">
<p class="itemsCounter">0</p>
<img src="./assets/cart-icon.svg" alt="">
</div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="./main.js"></script>
</body>
</html>