cppro11225544/bamboo-bites-crypto-revolution
0
1class CustomNavigation extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 nav {7 position: fixed;8 top: 0;9 left: 0;10 right: 0;11 z-index: 1000;12 background-color: rgba(26, 35, 126, 0.9);13 transition: all 0.3s ease;14 height: 80px;15 display: flex;16 align-items: center;17 justify-content: space-between;18 padding: 0 2rem;19 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);20 }21 nav.scrolled {22 height: 60px;23 background-color: rgba(46, 125, 50, 0.95);24 backdrop-filter: blur(5px);25 }26.nav-logo {27 height: 50px;28 transition: all 0.3s ease;29 }30 31 nav.scrolled .nav-logo {32 height: 40px;33 }34 35 .nav-links {36 display: flex;37 gap: 2rem;38 }39 40 .nav-link {41 color: white;42 text-decoration: none;43 font-weight: 600;44 font-size: 1.1rem;45 transition: all 0.3s ease;46 position: relative;47 }48 49 .nav-link:hover {50 color: #a5d6a7;51 }52 53 .nav-link::after {54 content: '';55 position: absolute;56 bottom: -5px;57 left: 0;58 width: 0;59 height: 2px;60 background-color: #a5d6a7;61 transition: width 0.3s ease;62 }63 64 .nav-link:hover::after {65 width: 100%;66 }67 68 .buy-button {69 background-color: #2e7d32;70 color: white;71 padding: 0.5rem 1.5rem;72 border-radius: 9999px;73 font-weight: 600;74 transition: all 0.3s ease;75 }76 77 .buy-button:hover {78 background-color: #1b5e20;79 transform: translateY(-2px);80 }81 82 @media (max-width: 768px) {83 nav {84 padding: 0 1rem;85 }86 87 .nav-links {88 display: none;89 }90 91 .mobile-menu-button {92 display: block;93 }94 }95 </style>96 <nav>97 <a href="#home" class="nav-logo">98 <img src="https://via.placeholder.com/150x50?text=CryptoPanda" alt="CryptoPanda.pro Logo" class="nav-logo">99 </a>100 <div class="nav-links">101 <a href="#home" class="nav-link">Home</a>102 <a href="#about" class="nav-link">About</a>103 <a href="#wallets" class="nav-link">Wallets</a>104 <a href="#how-to-buy" class="nav-link">How to Buy</a>105 <a href="#roadmap" class="nav-link">Roadmap</a>106 <a href="#tokenomics" class="nav-link">Tokenomics</a>107 <a href="#socials" class="nav-link">Socials</a>108 <a href="#contact" class="nav-link">Contact</a>109 <a href="#how-to-buy" class="buy-button">Buy $CPPRO</a>110 </div>111 <button class="mobile-menu-button hidden">112 <i data-feather="menu"></i>113 </button>114 </nav>115 `;116 }117}118 119customElements.define('custom-navigation', CustomNavigation);