dropdown-menu-2/index.html at main · bedimcode/dropdown-menu-2 · GitHub

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
<!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!--=============== REMIXICONS ===============-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">

      <!--=============== CSS ===============-->
      <link rel="stylesheet" href="assets/css/styles.css">

      <title>Gmail dropdown menu - Bedimcode</title>
   </head>
   <body>
      <header class="header">
         <nav class="nav container">
            <div class="nav__menu">
               <i class="ri-menu-line"></i>

               <div class="nav__logo">
                  <img src="assets/img/gmail.svg" alt="image">
                  <span>Mail</span>
               </div>
            </div>

            <div class="nav__actions">
               <i class="ri-question-fill"></i>
               <i class="ri-settings-3-fill"></i>

               <!-- Dropdown -->
               <div class="dropdown">
                  <button class="dropdown__button">
                     <img src="assets/img/material-symbols-apps.svg" alt="icon">
                  </button>

                  <div class="dropdown__list">
                     <button class="dropdown__item">
                        <img src="assets/img/logo.png" alt="image">
                        <span>Account</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/search.svg" alt="image">
                        <span>Search</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/maps.svg" alt="image">
                        <span>Maps</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/youtube.svg" alt="image">
                        <span>YouTube</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/play-store.svg" alt="image">
                        <span>Play</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/news.svg" alt="image">
                        <span>News</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/gmail.svg" alt="image">
                        <span>Gmail</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/meet.svg" alt="image">
                        <span>Meet</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/chat.svg" alt="image">
                        <span>Chat</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/keep.svg" alt="image">
                        <span>Keep</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/drive.svg" alt="image">
                        <span>Drive</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/task.svg" alt="image">
                        <span>Task</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/translate.svg" alt="image">
                        <span>Translate</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/photos.svg" alt="image">
                        <span>Photos</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/calendar.svg" alt="image">
                        <span>Calendar</span>
                     </button>

                     <button class="dropdown__item">
                        <img src="assets/img/cloud.svg" alt="image">
                        <span>Cloud</span>
                     </button>
                  </div>
               </div>

               <img src="assets/img/logo.png" alt="image" class="nav__account">
            </div>
         </nav>
      </header>
   </body>
</html>