-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfinal.html
81 lines (75 loc) · 5.39 KB
/
final.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
<!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">
<title>My new LP</title>
<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=Courgette&family=Lobster&family=Permanent+Marker&family=Poppins:wght@400;700&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="apex.css">
</head>
<body>
<div class="hero-background"></div>
<div class="wrapper">
<header>
<a href="#" class = "logo">Shoe<span>Brand</span></a>
<nav>
<svg class="close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2V2ZM14.71 13.29C14.8037 13.383 14.8781 13.4936 14.9289 13.6154C14.9797 13.7373 15.0058 13.868 15.0058 14C15.0058 14.132 14.9797 14.2627 14.9289 14.3846C14.8781 14.5064 14.8037 14.617 14.71 14.71C14.617 14.8037 14.5064 14.8781 14.3846 14.9289C14.2627 14.9797 14.132 15.0058 14 15.0058C13.868 15.0058 13.7373 14.9797 13.6154 14.9289C13.4936 14.8781 13.383 14.8037 13.29 14.71L12 13.41L10.71 14.71C10.617 14.8037 10.5064 14.8781 10.3846 14.9289C10.2627 14.9797 10.132 15.0058 10 15.0058C9.86799 15.0058 9.73729 14.9797 9.61543 14.9289C9.49357 14.8781 9.38297 14.8037 9.29 14.71C9.19628 14.617 9.12188 14.5064 9.07111 14.3846C9.02034 14.2627 8.99421 14.132 8.99421 14C8.99421 13.868 9.02034 13.7373 9.07111 13.6154C9.12188 13.4936 9.19628 13.383 9.29 13.29L10.59 12L9.29 10.71C9.1017 10.5217 8.99591 10.2663 8.99591 10C8.99591 9.7337 9.1017 9.4783 9.29 9.29C9.47831 9.1017 9.7337 8.99591 10 8.99591C10.2663 8.99591 10.5217 9.1017 10.71 9.29L12 10.59L13.29 9.29C13.4783 9.1017 13.7337 8.99591 14 8.99591C14.2663 8.99591 14.5217 9.1017 14.71 9.29C14.8983 9.4783 15.0041 9.7337 15.0041 10C15.0041 10.2663 14.8983 10.5217 14.71 10.71L13.41 12L14.71 13.29Z" fill="black"/>
</svg>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sneakers</a></li>
<li><a href="#">Players</a></li>
</ul>
</nav>
<svg class="menu" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 32H0V26.6667H24V32ZM48 18.6667H0V13.3333H48V18.6667ZM48 5.33333H24V0H48V5.33333Z" fill="white"/>
</svg>
</header>
<section class = "hero">
<h1>Regain your confidence on the court.</h1>
<p class="subhead">A shoe built with purpose and to take your game to the next level.</p>
<svg class = "down-arrow"viewBox="0 0 16 132" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.29289 131.707C7.68341 132.098 8.31658 132.098 8.7071 131.707L15.0711 125.343C15.4616 124.953 15.4616 124.319 15.0711 123.929C14.6805 123.538 14.0474 123.538 13.6568 123.929L7.99999 129.586L2.34314 123.929C1.95262 123.538 1.31945 123.538 0.928927 123.929C0.538402 124.319 0.538402 124.953 0.928927 125.343L7.29289 131.707ZM7 -4.37114e-08L6.99999 131L8.99999 131L9 4.37114e-08L7 -4.37114e-08Z" fill="black"/>
</svg>
</section>
<section class = "more-info">
<div class="feature">
<div class="content">
<p class="title">Lightweight</p>
<p class="desc">Upper mesh material provides proper ventilation and reduction in the weight of the shoes.</p>
</div>
<img src="https://lh3.googleusercontent.com/wtStv-kINhUXo388mZ98VhIkTezHoU4iaE09_WvIKA88LIfft2EqFyzfXgFYzX3kVhw=w2400" alt="Another shoe">
</div>
<div class="feature left">
<div class="content">
<p class="title">Affordable</p>
<p class="desc">Upper mesh material provides proper ventilation and reduction in the weight of the shoes.</p>
</div>
<img src="https://lh4.googleusercontent.com/lOFPQuPT2JGo6WkYB46gto5p2AjrV5vAJA8plwWSe83jzymOpSPN1q_NQBbZlMwEi-4=w2400" alt="Another shoe">
</div>
<div class="feature">
<div class="content">
<p class="title">Playable</p>
<p class="desc">Upper mesh material provides proper ventilation and reduction in the weight of the shoes.</p>
</div>
<img src="https://lh5.googleusercontent.com/EcSMcPT6Ik2BgIlLYhfSq_rxENuWsXIPefo2zCI_0uEt-8T4ZurVACFrQ8QlPM1RSfU=w2400" alt="Another shoe">
</div>
</section>
</div>
<script>
const menu = document.querySelector('.menu')
const close = document.querySelector('.close')
const nav = document.querySelector('nav')
menu.addEventListener('click', () => {
nav.classList.add('open-nav')
})
close.addEventListener('click', () => {
nav.classList.remove('open-nav')
})
</script>
</body>
</html>