-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (143 loc) · 4.43 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
<!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"
/>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<link rel="stylesheet" href="styles/navigation.css" />
<script src="scripts/menu-dropdown.js" defer></script>
<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 id="backdrop"></div>
<nav>
<img src="images/logo.svg" alt="Snap logo" />
<ul
id="primary-navigation"
class="primary-navigation flex"
data-visibility="false"
>
<li>
<span>
Features
<img
class="arrow-down"
src="images/icon-arrow-down.svg"
alt="icon arrow down"
aria-hidden="true"
/>
</span>
<ul class="sub-menu">
<li class="option-with-icon">
<img src="images/icon-todo.svg" alt="icon todo" />Todo List
</li>
<li class="option-with-icon">
<img src="images/icon-calendar.svg" alt="calendar icon" />Calendar
</li>
<li class="option-with-icon">
<img
src="images/icon-reminders.svg"
alt="reminder icon"
/>Reminder
</li>
<li class="option-with-icon">
<img src="images/icon-planning.svg" alt="timer icon" />Planning
</li>
</ul>
</li>
<li>
<span>
Company
<img
class="arrow-down"
src="images/icon-arrow-down.svg"
alt="icon arrow down"
aria-hidden="true"
/>
</span>
<ul class="sub-menu">
<li>History</li>
<li>Our Team</li>
<li>Blog</li>
</ul>
</li>
<li>Careers</li>
<li>About</li>
<div
id="inner-user-registration-controls"
class="user-registration-controls"
data-visibility="true"
>
<button type="button" class="button-alt">Login</button>
<button type="button">Register</button>
</div>
</ul>
<div
id="outer-user-registration-controls"
class="user-registration-controls"
data-visibility="true"
>
<button type="button" class="button-alt">Login</button>
<button type="button">Register</button>
</div>
<button aria-controls="primary-navigation" class="mobile-nav-toggle">
<span class="sr-only"
><img src="images/icon-menu.svg" alt="navigation toggler icon"
/></span>
</button>
</nav>
<section class="main-content">
<aside>
<picture>
<source
srcset="images/image-hero-mobile.png"
media="(max-width: 1439px)"
/>
<img
src="images/image-hero-desktop.png"
alt="man working on laptop surrounded by artificial switch icons"
/>
</picture>
</aside>
<article>
<div>
<h1>Make remote work</h1>
<p>
Get your team in sync, no matter your location. Streamline
processes, create team rituals, and watch productivity soar.
</p>
<a href="" target="_blank">Learn more</a>
</div>
<div class="logos-clients">
<img src="images/client-databiz.svg" alt="logo databiz client" />
<img src="images/client-audiophile.svg" alt="logo audophile client" />
<img src="images/client-meet.svg" alt="logo meet client" />
<img src="images/client-maker.svg" alt="logo maker client" />
</div>
</article>
</section>
<footer class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Wiktor Szablewski -> Szablitho</a>.
</footer>
</body>
</html>