Spaces:

trippykat
/

milestone2

Running

App Files Files Community

trippykat commited on Jul 15

Commit

af9cb58

verified ·

1 Parent(s): 1550123

undefined - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +168 -80

index.html CHANGED Viewed

@@ -221,50 +221,119 @@
       overflow-x: auto;
     }
     .snip1197 {
-  position: relative;
-  width: 100%;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-  transition: transform 0.3s, box-shadow 0.3s, opacity 0.5s;
-  opacity: 0;
-}
-.snip1197 img {
-  width: auto;
-  height: auto;
-}
-.snip1197:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.20);
-}
-.snip1197.opacity-on {
-  opacity: 1;
-}
-.snip1197 figcaption {
-  position: relative;
-}
-.snip1197 blockquote {
-  position: relative;
-  font-style: italic;
-  line-height: 1.6;
-}
-.snip1197 blockquote:before {
-  content: "\201C";
-  position: absolute; font-size: 3rem; opacity: 0.2; top: -10px; left: 10px;
-}
-.snip1197 .arrow {
-  position: absolute; top: 30px; left: 100%;
-  border-left: 0 solid transparent;
-  border-right: 25px solid transparent;
-  border-top: 25px solid #fff;
-}
-.snip1197 .author {
-  position: absolute;
-  bottom: -40px;
-}
-.carousel-item {
-  position: absolute; top:0; left:0;
-}
     </style>
@@ -878,67 +947,56 @@ document.addEventListener('DOMContentLoaded', () => {
         </div>
     </section>
-<section class="py-16 bg-white">
-  <div class="container mx-auto px-4 text-center mb-12">
-    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
-      Real People. Real Relief.
-    </h2>
-  </div>
-  <div class="relative max-w-3xl mx-auto">
-    <button id="prev" class="absolute left-0 top-1/2 transform -translate-y-1/2 text-2xl">‹</button>
-    <button id="next" class="absolute right-0 top-1/2 transform -translate-y-1/2 text-2xl">›</button>
-    <div id="carousel" class="overflow-hidden relative">
-      <!-- Slide 1: Marcus & Family -->
-      <figure class="snip1197 carousel-item flex flex-row bg-gray-50 p-6 mb-4 rounded-lg shadow-lg hover:shadow-xl">
-        <figcaption class="w-3/5 relative">
-          <blockquote class="italic text-gray-700 text-left p-6">
             "They didn't just fund my case—they respected my dignity. No hidden fees, no surprises."
           </blockquote>
           <div class="arrow"></div>
         </figcaption>
-        <img src="https://milestone.vovov.cc/images/marcus.png" alt="Marcus and his family" class="w-2/5 object-cover rounded-r-lg" />
-        <div class="author bg-teal-600 text-white p-4 rounded-b-lg absolute bottom-0 left-0 w-full">
-          <h5 class="font-bold">Marcus <span>- Civil Rights Plaintiff</span></h5>
-        </div>
       </figure>
-      <!-- Slide 2: Sarah -->
-      <figure class="snip1197 carousel-item flex flex-row bg-teal-50 p-6 mb-4 rounded-lg border border-teal-200">
-        <figcaption class="w-3/5 relative">
-          <blockquote class="italic text-gray-700 text-left p-6">
             "I recommend Milestone to all my clients. Finally, an ethical option that puts plaintiffs first."
           </blockquote>
           <div class="arrow"></div>
         </figcaption>
-        <img src="https://milestone.vovov.cc/images/sarah.png" alt="Sarah Chen" class="w-2/5 object-cover rounded-r-lg" />
-        <div class="author bg-teal-700 text-white p-4 rounded-b-lg absolute bottom-0 left-0 w-full">
-          <h5 class="font-bold">Sarah Chen, Esq. <span>- Personal Injury Attorney</span></h5>
-        </div>
       </figure>
-      <!-- Slide 3: Robert -->
-      <figure class="snip1197 carousel-item flex flex-row bg-teal-50 p-6 mb-4 rounded-lg border border-teal-200">
-        <figcaption class="w-3/5 relative">
-          <blockquote class="italic text-gray-700 text-left p-6">
             "The difference in rates is staggering. Milestone saves my clients thousands in interest."
           </blockquote>
           <div class="arrow"></div>
         </figcaption>
-        <img src="https://milestone.vovov.cc/images/robert.png" alt="Robert Martinez" class="w-2/5 object-cover rounded-r-lg" />
-        <div class="author bg-teal-700 text-white p-4 rounded-b-lg absolute bottom-0 left-0 w-full">
-          <h5 class="font-bold">Robert Martinez, Esq. <span>- Employment Law</span></h5>
-        </div>
       </figure>
     </div>
   </div>
 </section>
 <section class="py-16 bg-gray-800">
   <div class="container mx-auto px-4">
     <div class="text-center mb-12">
       <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Getting Help Shouldn't Be Hard.</h2>
     </div>
     <!-- Horizontal Scroll Steps (Desktop Only) -->
     <div class="overflow-x-auto pb-4 hidden md:hidden">
       <div class="flex space-x-8 min-w-[1000px] px-4 items-center">
@@ -1292,5 +1350,35 @@ document.addEventListener('DOMContentLoaded', () => {
             </div>
         </div>
     </footer>
 <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=trippykat/milestone2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

       overflow-x: auto;
     }
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Milestone Testimonials</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap" rel="stylesheet" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+  <style>
+    body {
+      font-family: 'Raleway', sans-serif;
+    }
     .snip1197 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      display: flex;
+      background: #fff;
+      border-radius: 0.5rem;
+      overflow: hidden;
+      opacity: 0;
+      transition: opacity 0.5s ease;
+    }
+    .snip1197.opacity-on {
+      opacity: 1;
+      z-index: 10;
+    }
+    .snip1197 figcaption {
+      width: 60%;
+      padding: 2rem;
+      position: relative;
+    }
+    .snip1197 blockquote {
+      font-style: italic;
+      font-size: 1rem;
+      line-height: 1.6;
+      position: relative;
+    }
+    .snip1197 blockquote::before {
+      content: "\201C";
+      font-family: serif;
+      font-size: 3rem;
+      opacity: 0.2;
+      position: absolute;
+      left: -1rem;
+      top: -1rem;
+    }
+    .snip1197 .arrow {
+      position: absolute;
+      top: 2rem;
+      left: 100%;
+      width: 0;
+      height: 0;
+      border-left: 0 solid transparent;
+      border-right: 25px solid transparent;
+      border-top: 25px solid #ffffff;
+    }
+    .snip1197 img {
+      width: 40%;
+      object-fit: cover;
+    }
+    .snip1197 .author {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background-color: #319795;
+      color: white;
+      padding: 0.75rem 1.25rem;
+      font-weight: 700;
+      font-size: 0.875rem;
+      width: 60%;
+      border-top-right-radius: 0.5rem;
+    }
+    .carousel-container {
+      position: relative;
+      overflow: hidden;
+      height: 280px;
+    }
+    .carousel-controls {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 2rem;
+      color: #319795;
+      background: white;
+      border-radius: 50%;
+      width: 2.5rem;
+      height: 2.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+      z-index: 50;
+    }
+    #prev {
+      left: -1.5rem;
+    }
+    #next {
+      right: -1.5rem;
+    }
     </style>
         </div>
     </section>
+        <section id="testimonials" class="py-16 bg-gray-100">
+        <div class="carousel-container max-w-3xl mx-auto relative">
+      <!-- Carousel Items -->
+      <figure class="snip1197 carousel-item">
+        <figcaption>
+          <blockquote>
             "They didn't just fund my case—they respected my dignity. No hidden fees, no surprises."
           </blockquote>
           <div class="arrow"></div>
         </figcaption>
+        <img src="https://milestone.vovov.cc/images/marcus.png" alt="Marcus and family" />
+        <div class="author">Marcus – Civil Rights Plaintiff</div>
       </figure>
+      <figure class="snip1197 carousel-item">
+        <figcaption>
+          <blockquote>
             "I recommend Milestone to all my clients. Finally, an ethical option that puts plaintiffs first."
           </blockquote>
           <div class="arrow"></div>
         </figcaption>
+        <img src="https://milestone.vovov.cc/images/sarah.png" alt="Sarah Chen" />
+        <div class="author">Sarah Chen, Esq. – Personal Injury Attorney</div>
       </figure>
+      <figure class="snip1197 carousel-item">
+        <figcaption>
+          <blockquote>
             "The difference in rates is staggering. Milestone saves my clients thousands in interest."
           </blockquote>
           <div class="arrow"></div>
         </figcaption>
+        <img src="https://milestone.vovov.cc/images/robert.png" alt="Robert Martinez" />
+        <div class="author">Robert Martinez, Esq. – Employment Law</div>
       </figure>
+      <!-- Navigation Arrows -->
+      <div id="prev" class="carousel-controls left-0">‹</div>
+      <div id="next" class="carousel-controls right-0">›</div>
     </div>
   </div>
 </section>
 <section class="py-16 bg-gray-800">
   <div class="container mx-auto px-4">
     <div class="text-center mb-12">
       <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Getting Help Shouldn't Be Hard.</h2>
     </div>
     <!-- Horizontal Scroll Steps (Desktop Only) -->
     <div class="overflow-x-auto pb-4 hidden md:hidden">
       <div class="flex space-x-8 min-w-[1000px] px-4 items-center">
             </div>
         </div>
     </footer>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const slides = document.querySelectorAll('.carousel-item');
+    let current = 0;
+    function showSlide(i) {
+      slides.forEach((el, idx) => {
+        el.classList.toggle('opacity-on', idx === i);
+        el.style.zIndex = idx === i ? 1 : 0;
+      });
+    }
+    document.getElementById('next').addEventListener('click', () => {
+      current = (current + 1) % slides.length;
+      showSlide(current);
+    });
+    document.getElementById('prev').addEventListener('click', () => {
+      current = (current - 1 + slides.length) % slides.length;
+      showSlide(current);
+    });
+    showSlide(current); // Show first on load
+  });
+</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=trippykat/milestone2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>