-
Notifications
You must be signed in to change notification settings - Fork 51
/
Copy pathindex.html
123 lines (123 loc) · 5.06 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" href="./index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Devbeats earpods for sale" />
<title>DevBeats</title>
</head>
<body>
<header>
<nav class="header">
<div class="header-logo">
<div class="brand">DevBeats</div>
</div>
<ul class="header-menu">
<li>
<a href="#about">ABOUT</a>
</li>
<li>
<a href="#features">FEATURES</a>
</li>
<li>
<a href="#shopping">SHOPPING</a>
</li>
</ul>
<button aria-label="togglebutton" class="menubutton" onclick="handleClick()" />
</nav>
<div id="drawer" class="drawer">
<div class="head">
DevBeats
<button aria-label="togglebutton" onclick="handleClick()" class="menubutton" />
</div>
<div class="section">
<div class="heading">General</div>
<ul>
<li>About us</li>
<li>FAQs</li>
<li>Features</li>
</ul>
</div>
<div class="section">
<div class="heading">Shopping</div>
<ul>
<li>Discounts & Offers</li>
<li>Devcamp zone</li>
<li>Latest releases</li>
<li>Student special</li>
</ul>
</div>
<div class="section">
<div class="heading">Account</div>
<ul>
<li>Profile</li>
<li>My cart</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
<section class="home" id="home">
<div class="space left"></div>
<div class="home-content">
<div class="typography">
<div class="catchy-line">Unleash the power of <span>sound</span></div>
<div class="desc">
Want some good sound in the devCamp? No worries, as we are here to generate some beats every
developer can vibe with!
</div>
<div class="button-group">
<button class="normal-button">KNOW MORE</button>
<button class="theme-button">SHOP EARBUDS</button>
</div>
</div>
<div class="banner">
<img alt="product" src="/assets/earbud.png" />
</div>
</div>
<div class="space right"></div>
</section>
<section id="about" class="about">
<div class="about-content">
<div class="about-head-thin">About <span class="theme">DevBeats</span></div>
<div class="gallery-section">
<div class="gallery">
<div class="cell"><img alt="banner-1" src="/assets/banner/banner-1.png" /></div>
<div class="cell"><img alt="banner-2" src="/assets/banner/banner-2.png" /></div>
<div class="cell"><img alt="banner-3" src="/assets/banner/banner-3.png" /></div>
<div class="cell"><img alt="banner-4" src="/assets/banner/banner-4.png" /></div>
</div>
</div>
<div class="about-text">
<div class="about-head">About <span class="theme">DevBeats</span></div>
<div class="about-para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, officiis at! Eum similique minus
reprehenderit reiciendis voluptate nisi inventore soluta quis quam, modi debitis maiores in eius
optio ad obcaecati!
</div>
<button aria-label="follow" class="theme-button">FOLLOW LIFE AT DEVBEATS</button>
</div>
</div>
</section>
</body>
<script>
const drawer = document.getElementById("drawer");
const handleClick = () => {
if (drawer.classList.contains("open")) {
drawer.classList.remove("open");
} else {
drawer.classList.add("open");
}
};
</script>
<script>
window.va =
window.va ||
function () {
(window.vaq = window.vaq || []).push(arguments);
};
</script>
<script defer src="/_vercel/insights/script.js"></script>
</html>