-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (75 loc) · 3.48 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
<!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>Shoe shop</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=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="master.css">
</head>
<body>
<div class="hero-img"></div>
<div class="wrapper">
<header>
<a href="#" class="logo">Shoe<span>Brand</span></a>
<nav>
<img class="close" src="imgs/closesvg.svg" alt="">
<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>
<secion 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="imgs/shoe2.jpg" alt="">
</div>
<div class="feature left">
<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="imgs/sho3.jpg" alt="">
</div>
<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="imgs/shoe4.jpg" alt="">
</div>
</secion>
</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>