forked from abhinavs/cookie
-
Notifications
You must be signed in to change notification settings - Fork 0
/
nav.html
83 lines (83 loc) · 3.67 KB
/
nav.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
<nav
class="top-0 absolute z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-gray-800"
>
<div
class="container px-4 mx-auto flex flex-wrap items-center justify-between"
>
<div
class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"
>
<a
class="flex-row text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
href="/"
>
<span><img class="w-8 h-8" src="/assets/img/cookie.png" alt="Cookie" /></span>
</a
><button
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
type="button"
onclick="toggleNavbar('example-collapse-navbar')"
>
<i class="text-white fas fa-bars"></i>
</button>
</div>
<div
class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none hidden"
id="example-collapse-navbar"
>
<ul class="flex flex-col lg:flex-row list-none mr-auto">
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="/blog"
><i
class="lg:text-gray-300 text-gray-500 far fa-file-alt text-lg leading-lg mr-2"
></i>
Blog</a
>
</li>
</ul>
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="https://www.facebook.com"
><i
class="lg:text-gray-300 text-gray-500 fab fa-facebook text-lg leading-lg "
></i
><span class="lg:hidden inline-block ml-2">Share</span></a
>
</li>
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="https://twitter.com/abhinav"
><i
class="lg:text-gray-300 text-gray-500 fab fa-twitter text-lg leading-lg "
></i
><span class="lg:hidden inline-block ml-2">Tweet</span></a
>
</li>
<li class="flex items-center">
<a
class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
href="https://github.com/abhinavs/cookie"
><i
class="lg:text-gray-300 text-gray-500 fab fa-github text-lg leading-lg "
></i
><span class="lg:hidden inline-block ml-2">Star</span></a
>
</li>
<li class="flex items-center">
<button
class="bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3"
type="button"
style="transition: all 0.15s ease 0s;"
>
<i class="fas fa-arrow-alt-circle-right"></i> Sign Up
</button>
</li>
</ul>
</div>
</div>
</nav>