Hugging Face's logo

Spaces:
KAPPA66
/
la-pieuvre-2-0-web-creatures-cavern
Running

App Files Community
la-pieuvre-2-0-web-creatures-cavern
File size: 2,936 Bytes 
b3ce9c1
04ce8fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b3ce9c1
 
 
 
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
 
class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          background: rgba(0, 0, 0, 0.9);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          padding: 1.5rem 3rem;
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        nav {
          max-width: 1800px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .logo {
          color: #fff;
          font-size: 1.8rem;
          font-weight: 700;
          letter-spacing: 4px;
          text-transform: uppercase;
          text-decoration: none;
          position: relative;
          font-family: 'Bebas Neue', sans-serif;
        }

        .logo::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 0;
          width: 60%;
          height: 4px;
          background: linear-gradient(90deg, #ff4d4d, #f9cb28);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .logo:hover::after {
          transform: scaleX(1);
        }

        .nav-links {
          display: flex;
          gap: 4rem;
        }

        .nav-link {
          color: #fff;
          text-decoration: none;
          font-size: 1.1rem;
          font-weight: 500;
          letter-spacing: 1px;
          position: relative;
          padding: 0.5rem 0;
          overflow: hidden;
          font-family: 'Montserrat', sans-serif;
        }

        .nav-link::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, #ff4d4d, #f9cb28);
          transform: translateX(-101%);
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .nav-link:hover::before {
          transform: translateX(0);
        }

        @media (max-width: 992px) {
          .nav-links {
            display: none;
          }
          
          :host {
            padding: 1.5rem;
          }
        }
      </style>

      <nav>
        <a href="/" class="logo">STUDIO</a>
        <div class="nav-links">
          <a href="/work" class="nav-link">Work</a>
          <a href="/about" class="nav-link">About</a>
          <a href="/contact" class="nav-link">Contact</a>
          <a href="/journal" class="nav-link">Journal</a>
        </div>
      </nav>
    `;
  }
}

customElements.define('custom-header', CustomHeader);