ipfs-proxy/index.html at main · kumandra/ipfs-proxy · 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
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- add to your css -->
    #toggle_nav:checked ~ div #hamburger #line{ @apply rotate-45 translate-y-1.5
    } #toggle_nav:checked ~ div #hamburger #line2{ @apply -rotate-45
    -translate-y-1 }
    <!-- / add to your css -->
    <header class="bg-white dark:bg-gray-900">
      <nav class="absolute z-10 w-full">
        <div class="container mx-auto px-8 md:px-12 lg:px-6">
          <div
            class="relative flex flex-wrap items-center justify-between gap-6 py-2 md:gap-0 md:py-4"
          >
            <input
              aria-hidden="true"
              type="checkbox"
              name="toggle_nav"
              id="toggle_nav"
              class="peer hidden"
            />
            <div
              class="relative z-20 flex w-full justify-between md:px-0 lg:w-max"
            >
              <a href="#" aria-label="logo" class="flex items-center space-x-2">
                <div aria-hidden="true" class="flex space-x-1">
                  <div
                    class="h-4 w-4 rounded-full bg-gray-900 dark:bg-white"
                  ></div>
                  <div class="h-6 w-2 bg-primary"></div>
                </div>
                <span class="text-2xl font-bold text-gray-900 dark:text-white"
                  >Brand</span
                >
              </a>
              <div class="relative flex max-h-10 items-center lg:hidden">
                <label
                  role="button"
                  for="toggle_nav"
                  aria-label="humburger"
                  id="hamburger"
                  class="relative -mr-6 p-6"
                >
                  <div
                    aria-hidden="true"
                    id="line"
                    class="m-auto h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"
                  ></div>
                  <div
                    aria-hidden="true"
                    id="line2"
                    class="m-auto mt-2 h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"
                  ></div>
                </label>
              </div>
            </div>
            <label
              aria-hidden="true"
              for="toggle_nav"
              class="fixed inset-0 z-10 h-screen w-screen origin-bottom scale-y-0 bg-white/70 backdrop-blur-2xl transition duration-500 peer-checked:origin-top peer-checked:scale-y-100 dark:bg-gray-900/70 lg:hidden"
            ></label>
            <div
              class="invisible absolute top-full left-0 z-20 w-full origin-top translate-y-1 scale-95 flex-col flex-wrap justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 peer-checked:visible peer-checked:scale-100 peer-checked:opacity-100 dark:border-gray-700 dark:bg-gray-800 dark:shadow-none lg:visible lg:relative lg:flex lg:w-7/12 lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none lg:peer-checked:translate-y-0"
            >
              <div
                class="w-full text-gray-600 dark:text-gray-300 lg:w-auto lg:pr-4 lg:pt-0"
              >
                <ul
                  class="flex flex-col gap-6 font-medium tracking-wide lg:flex-row lg:gap-0 lg:text-sm"
                >
                  <li>
                    <a
                      href="#"
                      class="block transition hover:text-primary md:px-4"
                    >
                      <span>Teams</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      class="block transition hover:text-primary md:px-4"
                    >
                      <span>Enterprise</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      class="block transition hover:text-primary md:px-4"
                    >
                      <span>Ressources</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      class="block transition hover:text-primary md:px-4"
                    >
                      <span>Pricing</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      class="block transition hover:text-primary md:px-4"
                    >
                      <span>Blog</span>
                    </a>
                  </li>
                </ul>
              </div>

              <div class="mt-12 lg:mt-0">
                <a
                  href="#"
                  class="relative flex h-9 w-full items-center justify-center px-4 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
                >
                  <span class="relative text-sm font-semibold text-white"
                    >Get Started</span
                  >
                </a>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>
  </body>
</html>