-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (153 loc) · 7.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pure html/css Popup</title>
<link rel="icon" href="./img/favicon.png" type="image/png">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<nav class="nav">
<ul class="nav__menu">
<li class="menu__item">
<a class="menu__link-text" href="https://mail.google.com/mail/?tab=wm&authuser=0&ogbl">Mail</a>
</li>
<li class="menu__item">
<a class="menu__link-text" href="https://www.google.com.ua/imghp?hl=ru&tab=wi&authuser=0&ogbl">Images</a>
</li>
<li class="menu__item-button">
<input type="checkbox" id="menu__input" class="menu__item-input" />
<label for="menu__input" class="menu__item-label" tabindex="0"></label>
<ul class="menu__submenu">
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/calendar.png" alt="calendar icon">
Calendar
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/mail.png" alt="mail icon">
Mail
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/news.png" alt="news icon">
News
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/maps.png" alt="map icon">
Map
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/files.png" alt="files icon">
Files
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/contacts.png" alt="contacts icon">
Contacts
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/translation.png" alt="translation icon">
Translate
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/videos.png" alt="videos icon">
Videos
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/search.png" alt="search icon">
Search
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/photos.png" alt="photos icon">
Photos
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/apps.png" alt="apps icon">
Apps
</a>
</li>
<li class="submenu__item">
<a class="submenu__link" href="#">
<img src="./img/submenu/documents.png" alt="documents icon">
Documents
</a>
</li>
<li class="submenu__item-hidden">
<input type="checkbox" id="submenu__input" class="submenu__item-input" />
<label for="submenu__input" class="submenu__item-label">More</label>
<ul class="submenu__extramenu">
<li class="extramenu__item">
<a class="extramenu__link" href="#">
<img src="./img/extramenu/chat.png" alt="chat icon">
Chat
</a>
</li>
<li class="extramenu__item">
<a class="extramenu__link" href="#">
<img src="./img/extramenu/classroom.png" alt="classroom icon">
Classroom
</a>
</li>
<li class="extramenu__item">
<a class="extramenu__link" href="#">
<img src="./img/extramenu/collections.png" alt="collections icon">
Collections
</a>
</li>
<li class="extramenu__item">
<a class="extramenu__link" href="#">
<img src="./img/extramenu/planet.png" alt="planet icon">
Planet
</a>
</li>
<li class="extramenu__item">
<a class="extramenu__link" href="#">
<img src="./img/extramenu/blogs.png" alt="blogs icon">
Blogs
</a>
</li>
<li class="extramenu__item">
<a class="extramenu__link" href="#">
<img src="./img/extramenu/promo.png" alt="promo icon">
Promo
</a>
</li>
<li class="extramenu__item-link">
<a href="https://kottans.org/" class="extramenu__extralink">
even more from Kottans
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu__item">
<a class="menu__link-bell" href="#"></a>
</li>
<li class="menu__item">
<a class="menu__link-user" href="https://github.com/5Mountains"></a>
</li>
</ul>
</nav>
</body>
</html>