Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
183 lines (173 loc) · 13.4 KB
/
Copy pathindex.html
File metadata and controls
183 lines (173 loc) · 13.4 KB
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
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<nav class="bg-gray-900 fixed w-full h-20 z-20 top-0 start-0 border-b border-gray-600 flex block items-center">
<div class="p-4 xl:container xl:mx-auto w-full">
<div class="flex flex-wrap items-center justify-between">
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo">
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<div class="flex md:order-2 gap-3 md:gap-0 rtl:space-x-reverse">
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get
started</button>
<!-- Step 2: Button = <label> element with an <input type="checkbox"> -->
<!-- You can control css by using peer-checked:* -->
<!-- It is important the dropdown menu is located within the <label> element; so you can control it with peer-checked:* -->
<!-- STAN / I added peer-checked/menu into label | SEPPE / I think it's not needed here -->
<label
class="cursor-pointer z-30 relative inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<!-- STAN / I added peer hidden peer/menu into input | SEPPE / peer/menu is not needed, we just use peer here -->
<input class="peer hidden" type="checkbox" id="mobile-menu" />
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15" />
</svg>
<!-- Step 1: Dropdown menu -->
<!-- To start preparing the animation of the mobile menu, just get the dropdown ready in open position -->
<!-- Don't worry about anything else, to make it easer we have set the height of the navigation to h-20 -->
<!-- The dropdown menu is positioned fixed top-20, so right below the navigation bar -->
<!-- Next what we will doo is to add here the hamburger icon from my dev.to article -->
<!-- It will activate with the tailwindcss peer- modifier to show this dropdown menu -->
<!-- Because of this peer- modifier we need to position this dropdown menu inside the <label> element of the hamburger button, we do that in the next step ... -->
<!-- Read more about that at https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state -->
<!-- Step 2: added here an extra container to avoid the dropdown sliding over the menu -->
<!-- Move the dropdown up with -translate-y-full and add pper-checked:translate-y-0 -->
<!-- Since peer-* works only with siblings, we need to use here peer-checked:*: -->
<!-- See for more information: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-direct-children -->
<!-- STAN / I added hidden peer-checked/menu:block into div class-->
<!-- SEPPE / changed peer-checked/menu:block to peer-checked:block -->
<!-- SEPPE / for some reading animations don't work anymore if this container has been hidden, move it out of the screen on x axis and we get at least the downward movement back -->
<!-- SEPPE / animation at the end is still missing... or does it feel complete like this? -->
<!-- STAN / I just removed -translate-x-full-->
<!-- STAN Added 'pointer-events-none' class for the mobile menu to close. This class will ignore being on the top of the element and touch-->
<!-- STAN Added 'peer-checked:pointer-events-auto' class when mobile menu opens, so this will enable to be on the top of the content and touch -->
<!-- STAN Documentation: https://tailwindcss.com/docs/pointer-events -->
<div
class="peer-checked:translate-x-0 peer-checked:*:translate-y-0 fixed w-full left-0 top-20 z-10 overflow-hidden pointer-events-none peer-checked:pointer-events-auto">
<div
class="-translate-y-full relative transition-transform delay-100 duration-500 ease-in-out font-normal divide-y shadow bg-gray-700 divide-gray-600">
<ul class="py-2 block text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="dropdownLargeButton">
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Home</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">About</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Services</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Contact</a>
</li>
</ul>
<div class="py-1">
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Get
started
</a>
</div>
</div>
</div>
</label>
</div>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
<ul
class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#"
class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
aria-current="page">Home</a>
</li>
<li>
<a href="#"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="#"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="#"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- SEPPE / added a gap element here just for esthetics :-) -->
<div class="h-20"> </div>
<div class="mx-auto">
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="max-w-screen-md">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Let's find
more that brings us together.</h2>
<p class="mb-8 font-light text-gray-500 sm:text-xl dark:text-gray-400">Flowbite helps you connect
with friends, family and communities of people who share your interests. Connecting with your
friends and family as well as discovering new ones is easy with features like Groups, Watch and
Marketplace.</p>
<div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4">
<a href="#"
class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900">
Get started
</a>
<a href="#"
class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
<svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z">
</path>
</svg>
View more
</a>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
<img class="w-full dark:hidden"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup.svg"
alt="dashboard image">
<img class="w-full hidden dark:block"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup-dark.svg"
alt="dashboard image">
<div class="mt-4 md:mt-0">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Let's create
more tools and ideas that brings us together.</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">Flowbite helps you connect
with friends and communities of people who share your interests. Connecting with your friends
and family as well as discovering new ones is easy with features like Groups.</p>
<a href="#"
class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900">
Get started
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</section>
</div>
</body>
</html>