testimonial section addded

MyriadFlow · Oct 1, 2023 · 483f3f4 · 483f3f4
1 parent d8c627b
commit 483f3f4
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -25,6 +25,58 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
   <link rel="shortcut icon" href="./resources/Bwlogo.svg" type="image/x-icon" />
   <title>MyriadFlow</title>
+
+  <script>
+    let slideIndex = 1;
+        showSlides(slideIndex);
+
+        // Next/previous controls
+        function plusSlides(n) {
+            showSlides(slideIndex += n);
+        }
+
+        function showSlides(n) {
+            let i;
+            let slides = document.getElementsByClassName("mySlides");
+            if (n > slides.length) { slideIndex = 1; }
+            if (n < 1) { slideIndex = slides.length; }
+            for (i = 0; i < slides.length; i++) {
+                slides[i].style.display = "none";
+            }
+            slides[slideIndex - 1].style.display = "block";
+        }
+</script>
+
+<style>
+  /* Add your CSS styles here */
+  .slideshow-container {
+      position: relative;
+  }
+
+  .mySlides {
+      display: none;
+  }
+
+  /* Style for previous and next buttons */
+  .prev, .next {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      padding: 16px;
+      cursor: pointer;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: white;
+  }
+
+  .prev {
+      left: 0;
+  }
+
+  .next {
+      right: 0;
+  }
+</style>
+
 </head>
 
 <body>
@@ -480,6 +532,85 @@ <h1 class="text-white max-w-[1200px] mx-auto text-center text-5xl font-semibold
   </div>
     </section>
     <!-- end of companies -->
+
+    <section class="bg-black py-20">
+      <h1 class="text-white max-w-[1200px] mx-auto text-center text-5xl font-semibold mb-16 lg:w-1/2 w-full">Testimonials</h1>
+    <!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade" style="display: block;">
+    <!-- <div class="numbertext">1 / 3</div> -->
+    <img src="./resources/Rectangle503.png" style="width:100%">
+
+      <div class="mx-5 sm:mx-6 lg:flex items-center justify-evenly text">
+        <div class="lg:w-1/2">
+          <h1 class="text-2xl sm:text-4xl lg:text-4xl font-bold mb-7 sm:mb-12 leading-snug">
+            John Doe, founder<br />
+          </h1>
+          <p class="text-xl m48:text-2xl sm:text-3xl leading-tight mb-12 sm:mb-14 lg:max-w-xl"
+            style="font-family:'Times New Roman', Times, serif">
+            “MyriadFlow,  A game-changer for our
+            NFT project. Effortless marketplace 
+            launch, keys to NFT's future”
+          </p>
+        </div>
+        <div class="lg:w-1/4">
+          <img src="./resources/Rectangle1.png" class="w-full mx-auto" alt="" />
+        </div>
+      </div>
+  </div>
+
+  <div class="mySlides fade">
+    <!-- <div class="numbertext">2 / 3</div> -->
+    <img src="./resources/Rectangle503.png" style="width:100%">
+    <div class="mx-5 sm:mx-6 lg:flex items-center justify-evenly text">
+      <div class="lg:w-1/2">
+        <h1 class="text-2xl sm:text-4xl lg:text-4xl font-bold mb-7 sm:mb-12 leading-snug">
+          Jane Smith, NFT Entrepreneur<br />
+        </h1>
+        <p class="text-xl m48:text-2xl sm:text-3xl leading-tight mb-12 sm:mb-14 lg:max-w-xl"
+          style="font-family:'Times New Roman', Times, serif">
+          “MyriadFlow stands out among 
+NFT platforms—a visionary, 
+user-friendly solution that brings 
+our NFT dreams to life”
+        </p>
+      </div>
+      <div class="lg:w-1/4">
+        <img src="./resources/testimonial.png" class="w-full mx-auto" alt="" />
+      </div>
+    </div>
+  </div>
+
+  <div class="mySlides fade">
+    <!-- <div class="numbertext">3 / 3</div> -->
+    <img src="./resources/Rectangle503.png" style="width:100%">
+    <div class="mx-5 sm:mx-6 lg:flex items-center justify-evenly text">
+      <div class="lg:w-1/2">
+        <h1 class="text-2xl sm:text-4xl lg:text-4xl font-bold mb-7 sm:mb-12 leading-snug">
+          John Doe, founder<br />
+        </h1>
+        <p class="text-xl m48:text-2xl sm:text-3xl leading-tight mb-12 sm:mb-14 lg:max-w-xl"
+          style="font-family:'Times New Roman', Times, serif">
+          “MyriadFlow,  A game-changer for our
+          NFT project. Effortless marketplace 
+          launch, keys to NFT's future”
+        </p>
+      </div>
+      <div class="lg:w-1/4">
+        <img src="./resources/Rectangle1.png" class="w-full mx-auto" alt="" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+</section>
+
     <section class="text-white bg-black p-4">
       <div class="lg:flex justify-between max-w-[1200px] gap-8 mx-auto lg:mt-32">
         <div class="mb-8 lg:mb-0 lg:w-1/2 text-center lg:text-left">

diff --git a/resources/Rectangle1.png b/resources/Rectangle1.png
diff --git a/resources/Rectangle503.png b/resources/Rectangle503.png
diff --git a/resources/testimonial.png b/resources/testimonial.png
diff --git a/styles.css b/styles.css
@@ -190,6 +190,95 @@ body {
 
 /* ! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com */
 
+
+* {box-sizing:border-box}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+}
+
+/* Hide the images by default */
+.mySlides {
+  display: none;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+/* Caption text */
+.text {
+  color: #f2f2f2;
+  font-size: 15px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 20%;
+  width: 100%;
+  /* text-align: center; */
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.active, .dot:hover {
+  background-color: #717171;
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}
+
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)