make the container for this text: Hand picked and in-house traffic sources Action taken on traffic buyers' feedback Premium rewards for the traffic sellers dont grow more than the top black big title in the top - Follow Up Deployment

index.html

@@ -8,8 +8,8 @@
   <style>
     :root {
       --header-h:    100px;
-      --pink-light:  #ffe5e5;
-      --pink-strong: #ffb3b3;
+      --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;
     }
 
@@ -17,22 +17,23 @@
     *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
     html, body { height:100%; }
     body {
-      background: linear-gradient(90deg, var(--pink-light), var(--pink-strong));
+      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(90deg, var(--pink-light), var(--pink-strong));
+      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: 10;
+      z-index: 1000;
     }
     .header-text {
       font-weight: bold;
@@ -56,7 +57,7 @@
       text-decoration: none;
       color: #222;
       font-weight: bold;
-      font-size: 0.6rem;
+      font-size: 0.675rem;
       text-transform: uppercase;
       letter-spacing: 1px;
     }
@@ -94,7 +95,7 @@
         top: var(--header-h);
         left: 0;
         right: 0;
-        background: linear-gradient(90deg, var(--pink-light), var(--pink-strong));
+        background: linear-gradient(135deg, var(--pink-light), var(--purple-dark));
         flex-direction: column;
         align-items: center;
         padding: 1rem 0;
@@ -116,8 +117,9 @@
 
     main {
       position: relative;
-      height: calc(100% - var(--header-h));
-      overflow: hidden;
+      min-height: 100vh;
+      padding-bottom: 50px;
+      margin-top: 0;
     }
 
     /* purple blob (“moon”) */
@@ -140,6 +142,23 @@
         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;
@@ -204,7 +223,7 @@
 
   <header>
     <!-- logo anchor -->
-    <div class="anchor logo" style="margin: 9% 0 0 -3%; position: static; transform: none;">
+    <div class="anchor logo" style="margin: 9% 0 0 -5%; position: static; transform: none;">
       <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>
 
@@ -225,11 +244,30 @@
   </header>
 
   <main>
-    <!-- text title -->
-    <div class="main-title" style="
+    <!-- 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" style="width: 80px; height: 80px; top: 10%; left: 15%; filter: blur(2px); transform: rotate(15deg);"></div>
+      <div class="parallax-ball" style="width: 120px; height: 120px; top: 30%; left: 75%; filter: blur(3px); transform: rotate(-10deg);"></div>
+      <div class="parallax-ball" style="width: 200px; height: 200px; top: 60%; left: 10%; filter: blur(1px); transform: rotate(5deg);"></div>
+      <div class="parallax-ball" style="width: 60px; height: 60px; top: 20%; left: 65%; filter: blur(4px); transform: rotate(20deg);"></div>
+      <div class="parallax-ball" style="width: 150px; height: 150px; top: 70%; left: 70%; filter: blur(2px); transform: rotate(-15deg);"></div>
+      <div class="parallax-ball" 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: 25%;
+      top: 50%;
       left: 5%;
+      transform: translateY(-50%);
       color: black;
       font-weight: 900;
       font-family: 'Montserrat', 'Arial Black', sans-serif;
@@ -238,44 +276,212 @@
       font-size: 2.5rem;
       line-height: 1.2;
       max-width: 40%;
-      z-index: 11;
+      z-index: 100;
       text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     ">
       AD NETWORK WITH EXCEPTIONAL QUALITY TRAFFIC
       <div style="
-        margin-top: 1.5rem;
+        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>
-    
-    <!-- purple blob with phone -->
-    <div class="moon">
-      <img src="https://huggingface.co/spaces/web3district/loudbids/resolve/main/phoneloudbids2.png" alt="Phone" style="position:absolute; width:104%; height:auto; top:50%; left:50%; transform:translate(-65%, -50%); z-index:2;">
+        <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 -->
 
-    <!-- position guides -->
-    <div class="anchor ball-top"></div>
-    <div class="anchor bottom-left"></div>
-    <div class="anchor bottom-center"></div>
+    <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
+              const size = parseFloat(ball.style.width);
+              const speed = size / 150; // Bigger balls move slower
+              const yPos = scrollTop * speed * 0.3;
+              const xPos = scrollTop * speed * 0.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;
+              
+              // Add scale effect when scrolling
+              const scale = 1 - (scrollTop / (windowHeight * 2));
+              ball.style.transform += ` scale(${Math.max(scale, 0.5)})`;
+            });
+            
+            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>