Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet"> | |
| <title>Anchors + Menu + Moon (Adjusted)</title> | |
| <style> | |
| :root { | |
| --header-h: 100px; | |
| --pink-light: rgba(255, 182, 193, 0.9); /* light pink with transparency */ | |
| --purple-dark: rgba(147, 112, 219, 0.9); /* medium purple with transparency */ | |
| --moon-color: #b399ff; | |
| } | |
| /* reset */ | |
| *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } | |
| html, body { height:100%; } | |
| body { | |
| background: linear-gradient(135deg, var(--pink-light), var(--purple-dark)); | |
| padding-top: var(--header-h); | |
| position: relative; | |
| font-family: sans-serif; | |
| overflow-x: hidden; | |
| } | |
| header { | |
| position: fixed; top:0; left:0; right:0; | |
| height: var(--header-h); | |
| background: linear-gradient(135deg, var(--pink-light), var(--purple-dark)); | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 5%; | |
| z-index: 1000; | |
| } | |
| .header-text { | |
| font-weight: bold; | |
| color: #000; | |
| text-transform: uppercase; | |
| font-size: 0.9rem; | |
| letter-spacing: 1px; | |
| padding-left: 1rem; | |
| } | |
| header > nav { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| /* real menu */ | |
| header nav ul { | |
| list-style: none; | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| header nav a { | |
| text-decoration: none; | |
| color: #222; | |
| font-weight: bold; | |
| font-size: 0.675rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* hamburger menu button */ | |
| .menu-toggle { | |
| display: none; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| } | |
| .menu-toggle span { | |
| display: block; | |
| width: 25px; | |
| height: 2px; | |
| background: #222; | |
| margin: 5px 0; | |
| transition: 0.4s; | |
| } | |
| /* mobile menu styles */ | |
| @media (max-width: 768px) { | |
| .menu-toggle { | |
| display: block; | |
| } | |
| .main-title { | |
| z-index: 5 ; | |
| } | |
| .moon { | |
| z-index: 2 ; | |
| } | |
| header nav ul { | |
| position: fixed; | |
| top: var(--header-h); | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(135deg, var(--pink-light), var(--purple-dark)); | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 1rem 0; | |
| gap: 1rem; | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| transition: transform 0.3s ease, opacity 0.3s ease; | |
| pointer-events: none; | |
| } | |
| header nav ul.active { | |
| transform: translateY(0); | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .anchor.logo { | |
| margin: 5rem auto 0 ; | |
| } | |
| } | |
| main { | |
| position: relative; | |
| min-height: 100vh; | |
| padding-bottom: 50px; | |
| margin-top: 0; | |
| } | |
| /* purple blob (“moon”) */ | |
| .moon { | |
| position: absolute; | |
| top: 25%; | |
| right: 10%; | |
| z-index: 5; | |
| width: 20rem; | |
| height: 20rem; | |
| background: radial-gradient( | |
| circle at 60% 90%, | |
| var(--moon-color) 60%, | |
| var(--pink-strong) 100% | |
| ); | |
| border-radius: 45% 55% 60% 40% / 60% 40% 60% 40%; | |
| opacity: 0.9; | |
| box-shadow: | |
| 0 0 30px rgba(179,153,255,0.5), | |
| 0 0 60px rgba(179,153,255,0.3); | |
| } | |
| /* parallax balls */ | |
| .parallax-balls { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .parallax-ball { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: url('https://huggingface.co/spaces/web3district/loudbids/resolve/main/ballloud.png') center/contain no-repeat; | |
| will-change: transform; | |
| transition: transform 0.1s linear, opacity 0.5s ease; | |
| mix-blend-mode: overlay; | |
| } | |
| /* dashed-box anchors */ | |
| .anchor { | |
| position: absolute; | |
| border: 2px dashed rgba(0,0,0,0.0); | |
| pointer-events: none; | |
| } | |
| .anchor.logo { | |
| top: auto; | |
| left: auto; | |
| width: 15rem; | |
| height: 15rem; | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem; | |
| margin-top: 1rem; | |
| transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .anchor.logo { | |
| margin: 9% 0 0 -5%; | |
| position: static; | |
| transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .anchor.logo:hover { | |
| transform: perspective(1000px) rotateY(20deg) rotateX(10deg) translateZ(30px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| filter: drop-shadow(0 10px 5px rgba(0,0,0,0.2)); | |
| background: rgba(255,255,255,0.1); | |
| backdrop-filter: blur(5px); | |
| border-radius: 15px; | |
| } | |
| .anchor.logo img { | |
| max-width: 200%; | |
| max-height: 200%; | |
| transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| transform-style: preserve-3d; | |
| backface-visibility: hidden; | |
| } | |
| .anchor.logo:hover img { | |
| transform: translateZ(20px); | |
| } | |
| .anchor.ball-top { | |
| top: 25%; | |
| right: 10%; | |
| width: 20rem; | |
| height: 20rem; | |
| } | |
| .anchor.bottom-left { | |
| bottom: 10%; | |
| left: 5%; | |
| padding-left: 5%; | |
| width: 8rem; | |
| height: 8rem; | |
| } | |
| .anchor.bottom-center { | |
| bottom: 10%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 8rem; | |
| height: 8rem; | |
| } | |
| /* Checkmark bullet styles */ | |
| .checkmark-bullet { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| margin: 0.5rem 0; | |
| } | |
| .checkmark-bullet::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: 0.4rem; | |
| width: 0.8rem; | |
| height: 0.4rem; | |
| border-left: 2px solid var(--moon-color); | |
| border-bottom: 2px solid var(--moon-color); | |
| transform: rotate(-45deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <!-- logo anchor --> | |
| <div class="anchor logo"> | |
| <img src="https://huggingface.co/spaces/web3district/loudbids/resolve/main/loudbids.png" alt="Loudbids Logo" style="width:100%; height:100%; object-fit:contain; padding:0.5rem;"> | |
| </div> | |
| <!-- combined menu items on right --> | |
| <nav> | |
| <button class="menu-toggle" aria-label="Menu"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| <ul> | |
| <li><a href="#">Buy & Sell Traffic</a></li> | |
| <li><a href="#">Useful Info</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| <li><a href="#">Login</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- parallax balls (fixed background) --> | |
| <div class="parallax-balls" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;"> | |
| <div class="parallax-ball" data-dir="1" data-scale-dir="1" style="width: 80px; height: 80px; top: 10%; left: 15%; filter: blur(2px); transform: rotate(15deg);"></div> | |
| <div class="parallax-ball" data-dir="-1" data-scale-dir="-1" style="width: 120px; height: 120px; top: 30%; left: 75%; filter: blur(3px); transform: rotate(-10deg);"></div> | |
| <div class="parallax-ball" data-dir="1" data-scale-dir="-1" style="width: 200px; height: 200px; top: 60%; left: 10%; filter: blur(1px); transform: rotate(5deg);"></div> | |
| <div class="parallax-ball" data-dir="-1" data-scale-dir="1" style="width: 60px; height: 60px; top: 20%; left: 65%; filter: blur(4px); transform: rotate(20deg);"></div> | |
| <div class="parallax-ball" data-dir="1" data-scale-dir="-1" style="width: 150px; height: 150px; top: 70%; left: 70%; filter: blur(2px); transform: rotate(-15deg);"></div> | |
| <div class="parallax-ball" data-dir="-1" data-scale-dir="1" style="width: 90px; height: 90px; top: 45%; left: 20%; filter: blur(3px); transform: rotate(10deg);"></div> | |
| </div> | |
| <section class="hero-section" style=" | |
| position: relative; | |
| min-height: calc(100vh - var(--header-h)); | |
| height: auto; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 5%; | |
| margin-top: 0; | |
| "> | |
| <div class="main-title" style=" | |
| position: absolute; | |
| top: 50%; | |
| left: 5%; | |
| transform: translateY(-50%); | |
| color: black; | |
| font-weight: 900; | |
| font-family: 'Montserrat', 'Arial Black', sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: -1px; | |
| font-size: 2.5rem; | |
| line-height: 1.2; | |
| max-width: 40%; | |
| z-index: 100; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.1); | |
| "> | |
| AD NETWORK WITH EXCEPTIONAL QUALITY TRAFFIC | |
| <div style=" | |
| margin-top: 0.5rem; | |
| padding: 0.5rem; | |
| font-size: 1rem; | |
| text-transform: none; | |
| letter-spacing: normal; | |
| font-weight: normal; | |
| font-family: sans-serif; | |
| background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(147, 112, 219, 0.2)); | |
| border-radius: 15px; | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| color: black; | |
| max-width: 100%; | |
| width: fit-content; | |
| "> | |
| <div class="checkmark-bullet">Hand picked and in-house traffic sources</div> | |
| <div class="checkmark-bullet">Action taken on traffic buyers' feedback</div> | |
| <div class="checkmark-bullet">Premium rewards for the traffic sellers</div> | |
| </div> | |
| </div> | |
| <div class="moon" style="position: absolute; right: 10%; top: 50%; transform: translateY(-50%); z-index: 5;"> | |
| <img src="https://huggingface.co/spaces/web3district/loudbids/resolve/main/phoneloudbids2.png" alt="Phone" style="position:absolute; width:100%; height:auto; top:50%; left:50%; transform:translate(-50%, -50%); z-index:5;"> | |
| </div> | |
| </section> <!-- close hero-section --> | |
| <section class="content-section" style=" | |
| position: relative; | |
| padding: 100px 5%; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 40px; | |
| justify-content: center; | |
| background: transparent; | |
| "> | |
| <div style=" | |
| flex: 1; | |
| min-width: 300px; | |
| max-width: 500px; | |
| position: relative; | |
| margin-top: 10.88vh; | |
| margin-left: 5%; | |
| width: 40%; | |
| min-height: 400px; | |
| z-index: 6; | |
| background: linear-gradient(135deg, rgba(138, 43, 226, 0.9) 0%, rgba(147, 112, 219, 0.9) 50%, rgba(138, 43, 226, 0.9) 100%); | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| color: white; | |
| z-index: 11; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3); | |
| transform-style: preserve-3d; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| "> | |
| <h3 style="margin-bottom: 1rem; font-weight: 900; font-size: 1.5rem; text-transform: uppercase;">Advertisers - Buy Traffic!</h3> | |
| <p style="margin-bottom: 1rem;">How many times have you built the campaign just to try and then discard the traffic source? How much time and money does it cost your company?</p> | |
| <p style="margin-bottom: 1rem;">What if you could work only with the quality traffic from the start?</p> | |
| <p style="margin-bottom: 1.5rem;">All traffic on the platform is pre-tested by our media buy team, with our product. We trade our time for quality, so you don't have to.</p> | |
| <button style=" | |
| background: white; | |
| color: #6a0dad; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| ">Buy quality traffic</button> | |
| </div> | |
| <style> | |
| .content-section > div:hover { | |
| transform: translateY(-10px) rotateX(10deg) rotateY(10deg) scale(1.02); | |
| box-shadow: 0 25px 50px rgba(138, 43, 226, 0.6), | |
| 0 0 20px rgba(147, 112, 219, 0.8), | |
| 0 0 0 1px rgba(255,255,255,0.2) inset; | |
| filter: drop-shadow(0 0 10px rgba(147, 112, 219, 0.6)); | |
| } | |
| .content-section > div::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255,182,193,0) 0%, | |
| rgba(216,191,255,0.3) 50%, | |
| rgba(255,182,193,0) 100% | |
| ); | |
| transform: rotate(30deg); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .content-section > div:hover::before { | |
| opacity: 1; | |
| animation: hologram 2s linear infinite; | |
| } | |
| @keyframes hologram { | |
| 0% { transform: rotate(30deg) translateX(-50%); } | |
| 100% { transform: rotate(30deg) translateX(50%); } | |
| } | |
| </style> | |
| </div> | |
| <div style=" | |
| flex: 1; | |
| min-width: 300px; | |
| max-width: 500px; | |
| position: relative; | |
| margin-top: 10.88vh; | |
| margin-right: 5%; | |
| width: 40%; | |
| min-height: 400px; | |
| z-index: 6; | |
| background: linear-gradient(135deg, rgba(106, 13, 173, 0.9) 0%, rgba(147, 112, 219, 0.9) 50%, rgba(106, 13, 173, 0.9) 100%); | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| color: white; | |
| z-index: 11; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| "> | |
| <h3 style="margin-bottom: 1rem; font-weight: 900; font-size: 1.5rem; text-transform: uppercase;">Publishers - Monetise Traffic On CPM & CPC!</h3> | |
| <p style="margin-bottom: 1rem;">If you are looking for serious business and solid buyers, we are open to talk</p> | |
| <p style="margin-bottom: 1rem;">Your clicks will get the maximum return for their quality.</p> | |
| <p style="margin-bottom: 1.5rem;">Don't struggle for a solution you haven't found yet. Instead come to us and let's explore options together.</p> | |
| <button style=" | |
| background: white; | |
| color: #8a2be2; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| ">EARN BIG NOW</button> | |
| </div> | |
| </div> <!-- close main-title --> | |
| </section> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const menuToggle = document.querySelector('.menu-toggle'); | |
| const menu = document.querySelector('header nav ul'); | |
| const balls = document.querySelectorAll('.parallax-ball'); | |
| const main = document.querySelector('main'); | |
| menuToggle.addEventListener('click', () => { | |
| menu.classList.toggle('active'); | |
| menuToggle.classList.toggle('active'); | |
| }); | |
| // Parallax effect for balls | |
| let ticking = false; | |
| main.addEventListener('scroll', () => { | |
| if (!ticking) { | |
| window.requestAnimationFrame(() => { | |
| const scrollTop = main.scrollTop; | |
| const windowHeight = main.clientHeight; | |
| balls.forEach(ball => { | |
| // Calculate parallax movement with different speeds and directions | |
| const size = parseFloat(ball.style.width); | |
| const speed = size / 100; // Bigger balls move slower | |
| const direction = parseInt(ball.dataset.dir || (Math.random() > 0.5 ? 1 : -1)); | |
| const yPos = scrollTop * speed * 0.3 * direction; | |
| const xPos = scrollTop * speed * 0.2 * (direction > 0 ? 1 : -1); | |
| // Calculate fade out based on scroll position | |
| const opacity = 1 - Math.min(Math.max(scrollTop / (windowHeight * 0.7), 0), 1); | |
| // Apply transform with rotation and parallax | |
| const rotation = ball.style.transform.includes('rotate') ? | |
| ball.style.transform.match(/rotate\(([^)]+)\)/)[0] : ''; | |
| ball.style.transform = `${rotation} translate(${xPos}px, ${-yPos}px)`; | |
| ball.style.opacity = opacity; | |
| // Dynamic scale effect based on scroll direction | |
| const scrollDirection = Math.sign(scrollTop - (ball._lastScrollTop || 0)); | |
| ball._lastScrollTop = scrollTop; | |
| // Current scale (default to 1 if not set) | |
| const currentScale = parseFloat(ball.dataset.currentScale) || 1; | |
| // Calculate new scale based on scroll direction | |
| let newScale = currentScale; | |
| if (scrollDirection > 0) { // scrolling down | |
| newScale = Math.min(currentScale + 0.005, 1.5); | |
| } else if (scrollDirection < 0) { // scrolling up | |
| newScale = Math.max(currentScale - 0.005, 0.7); | |
| } | |
| // Store current scale for next frame | |
| ball.dataset.currentScale = newScale; | |
| // Apply transform with rotation and parallax | |
| const rotation = ball.style.transform.includes('rotate') ? | |
| ball.style.transform.match(/rotate\(([^)]+)\)/)[0] : ''; | |
| ball.style.transform = `${rotation} translate(${xPos}px, ${-yPos}px) scale(${newScale})`; | |
| ball.style.opacity = opacity; | |
| // Add subtle rotation change | |
| const rotateAmount = scrollTop * 0.05 * direction; | |
| ball.style.transform += ` rotate(${rotateAmount}deg)`; | |
| }); | |
| ticking = false; | |
| }); | |
| ticking = true; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/loudbids" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |