-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (131 loc) · 5.18 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<meta http-equiv="X-UA-Compatible" contents="IE=edge" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Intro section with dropdown navigation</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="backdrop"></div>
<div class="nav-header">
<h2 class="logo">snap</h2>
<div class="links">
<p> Features</p>
<svg class="btn" width="10" height="6" xmlns="http://www.w3.org/2000/svg">
<path stroke="#686868" stroke-width="1.5" fill="none" d="m1 5 4-4 4 4" />
</svg>
<p>Company</p>
<svg class="btn2" width="10" height="6" xmlns="http://www.w3.org/2000/svg">
<path stroke="#686868" stroke-width="1.5" fill="none" d="m1 5 4-4 4 4" />
</svg>
<p> Careers</p>
<p>About</p>
</div>
<span><svg class="imenu" width="32" height="18" xmlns="http://www.w3.org/2000/svg">
<g fill="#151515" fill-rule="evenodd">
<path d="M0 0h32v2H0zM0 8h32v2H0zM0 16h32v2H0z" />
</g>
</svg></span>
<div class="right">
<p>Login</p>
<button>Register</button>
</div>
</div>
<div id="drop-down1">
<li>Todo List</li>
<svg width="14" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M14 3v12a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V1a1 1 0 1 1 2 0v1h2V1a1 1 0 1 1 2 0v1h2V1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 1 1Zm-2 3H2v1h10V6Zm0 3H2v1h10V9Zm0 3H2v1h10v-1Z"
fill="#726CEE" />
</svg>
<li>Calendar</li>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.667 8.667h-4v4h4v-4ZM11.334 0v1.333H4.667V0h-2v1.333h-1C.75 1.333 0 2.083 0 3v11.333C0 15.25.75 16 1.667 16h12.667C15.25 16 16 15.25 16 14.333V3c0-.917-.75-1.667-1.666-1.667h-1V0h-2Zm3 14.333H1.667V5.5h12.667v8.833Z"
fill="#4BB1DA" />
</svg>
<li>Reminders</li>
<svg width="13" height="17" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.408 13.916c-3.313 0-6-1.343-6-3 0-.612.371-1.18 1-1.654V7.916a5 5 0 0 1 3.041-4.6 2 2 0 0 1 3.507-1.664 2 2 0 0 1 .411 1.664 5.002 5.002 0 0 1 3.041 4.6v1.346c.629.474 1 1.042 1 1.654 0 1.657-2.687 3-6 3Zm0 1c.694 0 1.352-.066 1.984-.16.004.054.016.105.016.16a2 2 0 0 1-4 0c0-.055.012-.106.016-.16.633.094 1.29.16 1.984.16Z"
fill="#EDD556" />
</svg>
<li> Planning</li>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 2.133a5.867 5.867 0 1 0 0 11.734A5.867 5.867 0 0 0 8 2.133ZM8 3.2a4.8 4.8 0 1 1 0 9.6 4.8 4.8 0 0 1 0-9.6Zm-.533 2.667a.533.533 0 0 0-.534.533v2.133c0 .295.24.534.534.534h3.2a.533.533 0 0 0 0-1.067H8V6.4a.533.533 0 0 0-.533-.533Z"
fill="#8E4CB6" />
</svg>
</div>
<div class="drop-down2">
<li>History</li>
<li>Our Team</li>
<li>Blog</li>
</div>
<div class="mobileimg"> <img src="images\image-hero-mobile.png"></div>
<div class="work">
<div class="left">
<div class="h1">
<h1>Make<br>remote work</h1>
</div>
<div class="write-up">
<p> Get your team in sync, no matter your location.<br> Streamline processes,
create team rituals, and<br> watch productivity soar.</p>
<button>Learn more</button>
</div>
</div>
<img src="images\image-hero-desktop.png">
</div>
<div class="sidebar"></div>
<script>
const btn_change = document.querySelector(".btn");
const drop1 = document.getElementById("drop-down1");
btn_change.addEventListener("click", function () {
drop1.classList.toggle("expand");
btn_change.classList.toggle("expand");
});
const btn_change2 = document.querySelector(".btn2");
const drop2 = document.querySelector(".drop-down2");
btn_change2.addEventListener("click", function () {
drop2.classList.toggle("expand");
btn_change2.classList.toggle("expand");
});
const backdrop = document.querySelector(".backdrop");
const bar = document.querySelector(".sidebar");
const imenu = document.querySelector(".imenu");
const links = document.querySelector(".links");
const right = document.querySelector(".right");
const drop_1 = document.getElementById("drop-down1");
const drop_2 = document.querySelector(".drop-down2");
backdrop.addEventListener("click", function () {
bar.style.display = 'none';
closeModal();
});
function closeModal() {
backdrop.style.display = "none";
}
imenu.addEventListener("click", function () {
bar.classList.toggle("bar");
links.classList.toggle("bar");
right.classList.toggle("bar");
drop_1.classList.toggle("bar");
drop_2.classList.toggle("bar");
backdrop.style.display = "block";
})
</script>
</body>
</html>