From 0e25f1756fba9a9216ab67e97b303fdc1093b2cf Mon Sep 17 00:00:00 2001
From: Subashree-selvaraj <subashreevjc@gmail.com>
Date: Sat, 2 Nov 2024 13:25:15 +0530
Subject: [PATCH] Redesigned testimonial page

---
 testimonial.html | 615 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 441 insertions(+), 174 deletions(-)

diff --git a/testimonial.html b/testimonial.html
index d367bd42..962b4032 100644
--- a/testimonial.html
+++ b/testimonial.html
@@ -16,148 +16,246 @@
         }
         body {
             font-family: 'Poppins', sans-serif;
-            background-color: #1f1f1f;
-            color: #fff;
+            background: linear-gradient(135deg, #ffb7fd 0%, #abc0ef 50%, #c58be5 100%);
+            color: #333;
             overflow-x: hidden;
         }
 
         /* Navbar styling */
-        nav {
-            background-color: #1c1c1c;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px 50px;
-            position: fixed;
-            width: 100%;
+        header {
+            background: #333;
+            color: #fff;
+            padding: 1rem 0;
+            position: sticky;
             top: 0;
             z-index: 1000;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
-        nav h1 {
-            color: #fca311;
-            font-size: 24px;
-        }
-        nav ul {
-            list-style: none;
+        .navbar {
             display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
         }
-        nav ul li {
-            margin-left: 30px;
+        .site-name {
+            font-size: 24px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
-        nav ul li a {
+        .navbar a {
+            color: #bbb;
+            font-size: 16px;
             text-decoration: none;
+            margin: 0 0.8rem;
+            transition: color 0.3s ease;
+        }
+        .navbar a:hover {
             color: #fff;
-            font-size: 16px;
-            padding: 8px 15px;
-            border-radius: 30px;
-            transition: background-color 0.3s ease;
         }
-        nav ul li a:hover {
-            background-color: #fca311;
-            color: #000;
+        .navbar .auth a {
+            background: #ffb7fd;
+            color: #333;
+            padding: 8px 16px;
+            border-radius: 5px;
+        }
+        .navbar .auth a:hover {
+            background: #fff;
+            color: #ffb7fd;
         }
 
         /* Hero section */
         .hero {
             text-align: center;
             padding: 120px 20px;
-            background-color: #282828;
+            
+            
         }
         .hero h2 {
             font-size: 40px;
-            color: #fca311;
+            color: #353047;
+            font-weight: bold;
         }
         .hero p {
             margin-top: 15px;
             font-size: 18px;
-            color: #b3b3b3;
+            color: #353047;
             max-width: 800px;
             margin-left: auto;
             margin-right: auto;
         }
 
         /* Testimonial section */
-        .testimonial-section {
-            padding: 80px 20px;
-            background-color: #333;
-            text-align: center;
-        }
-        .testimonial-section h2 {
-            color: #fca311;
-            font-size: 32px;
-        }
-        .testimonial-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            margin-top: 40px;
-        }
-        .testimonial {
-            background-color: #444;
-            border-radius: 10px;
-            margin: 20px;
-            padding: 20px;
-            width: 300px;
-            color: #fff;
-            transition: transform 0.3s ease;
-        }
-        .testimonial:hover {
-            transform: translateY(-10px);
-        }
-        .testimonial img {
-            border-radius: 50%;
-            width: 80px;
-            height: 80px;
-            object-fit: cover;
-            margin-bottom: 15px;
-        }
-        .testimonial h3 {
-            font-size: 20px;
-            color: #fca311;
-        }
-        .testimonial p {
-            font-size: 14px;
-            color: #ddd;
-            line-height: 1.6;
-        }
+        
+        /* Testimonial section styling */
+        /* Testimonial section styling */
+.testimonial-section {
+    text-align: center;
+    padding: 50px 0;
+    margin: 150px;
+   
+}
 
-        /* Stats Section */
-        .stats-section {
-            display: flex;
-            justify-content: space-around;
-            padding: 40px 20px;
-            background-color: #1a1a1a;
-        }
-        .stat-box {
-            text-align: center;
-            color: #fff;
-        }
-        .stat-box h3 {
-            font-size: 24px;
-            color: #fca311;
-        }
-        .stat-box p {
-            font-size: 16px;
-            color: #ccc;
-        }
+.testimonial-section h2 {
+    color: #333;
+    font-size: 2.5em;
+    margin-bottom: 40px;
+    font-weight: bold;
+}
+
+.testimonial-container {
+    display: flex;
+    justify-content: center;
+    gap: 50px;
+    flex-wrap: wrap;
+   
+}
+
+.testimonial {
+    position: relative;
+    width: 300px;
+    height: 300px;
+
+    perspective: 1000px;
+    background: transparent;
+}
+
+/* Rest of the CSS remains the same */
+.testimonial-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+}
 
+.testimonial:hover .testimonial-inner {
+    transform: rotateY(180deg);
+    
+}
+
+.testimonial-front, .testimonial-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 50%;
+    padding: 40px;
+    margin-top:40px;
+    border:3px solid gold;
+
+}
+
+.testimonial-front {
+    background: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.testimonial-back {
+    background-color: #FFF4B5;
+    font-weight: bold;
+    transform: rotateY(180deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 30px;
+    border:3px solid #9e09ee;
+}
+
+.testimonial img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin-bottom: 15px;
+    object-fit: cover;
+}
+
+.testimonial h3 {
+    color: #fff;
+    margin: 10px 0;
+    font-size: 20px;
+}
+
+.testimonial p {
+    color: #333;
+    font-size: 14px;
+    line-height: 1.6;
+}
+      /* Stats Section */
+        .stats-section {
+        display: flex;
+        justify-content: center;
+        gap:100px;
+       margin: 20px 20px;
+    }
+    .stat-box {
+        background-color: #444;
+        border-radius: 20px;
+        padding: 20px;
+        width: 250px;
+        height: 250px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        transition: transform 0.3s ease, border 0.3s ease;
+        
+        border: 2px solid gold;
+    }
+    .stat-box:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+    .stat-box:hover {
+        transform: translateY(-10px);
+        border: 3px solid gold;
+    }
+    .stat-box i {
+        font-size: 50px;
+        margin-bottom: 10px;
+    }
+    .stat-box h3 {
+        font-size: 24px;
+        margin-bottom: 10px;
+    }
+    .stat-box p {
+        font-size: 16px;
+        color: #b3b3b3;
+    }
+    .thumb-up-icon {
+        color: #006BFF; 
+    }
+    .palette-icon {
+        color: #FF4545; 
+    }
+    .checked {
+  color: orange;
+}
         /* CTA Section */
         .cta-section {
-            background-color: #d5880d;
-            padding: 40px 20px;
+            padding: 40px 40px;
             text-align: center;
             border-radius: 10px;
             margin: 40px 20px;
-            color: #fff;
+            color: #333;
+           
         }
         .cta-section h3 {
-            font-size: 28px;
+            font-size: 35px;
             margin-bottom: 10px;
+            font-weight: bold;
         }
         .cta-section p {
             font-size: 16px;
             margin-bottom: 20px;
-            color: #e2e2e2;
+            
         }
         .cta-button {
             background-color: #2c3e50;
@@ -173,36 +271,95 @@
         }
 
         /* Footer */
-        footer {
-            background-color: #1c1c1c;
-            padding: 30px 0;
-            color: #e4e4e7;
-        }
-    
-        footer .footer-heading {
-            font-weight: 700;
-            color:#fca311;
-        }
-    
-        footer a {
-            color: #e4e4e7;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-    
-        footer a:hover {
-            color: #fca311;
-        }
-    
-        footer .social-icons i {
-            font-size: 24px;
-            margin-right: 15px;
-            color: #e4e4e7;
-            transition: color 0.3s ease;
-        }
-    
-        footer .social-icons i:hover {
-            color:#fca311;
+        .footer {
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    padding: 10px 0;
+    width: 100%;
+}
+
+.footer .share {
+    padding: 0.3rem 0;
+}
+        .footer .share a {
+    height: 2.5rem;
+    width: 2.5rem;
+    line-height: 2.5rem;
+    font-size: 1rem;
+    color: #ffffff;
+    border: 0.1rem solid rgba(255, 255, 255, 0.3);
+    margin: 0.2rem;
+    border-radius: 50%;
+    text-decoration: none;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+        
+/* Specific hover styles for each social media icon */
+.footer .share a.fa-facebook-f:hover {
+    background-color: #3b5998;
+    border-color: #3b5998;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(59, 89, 152, 0.4);
+}
+
+.footer .share a.fa-x-twitter:hover {
+    background-color: #000000;
+    border-color: #000000;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+}
+
+.footer .share a.fa-instagram:hover {
+    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+    border-color: #d6249f;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(214, 36, 159, 0.4);
+}
+
+.footer .share a.fa-linkedin-in:hover {
+    background-color: #0077b5;
+    border-color: #0077b5;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 119, 181, 0.4);
+}
+
+.footer .share a.fa-pinterest:hover {
+    background-color: #E60023;
+    border-color: #E60023;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(230, 0, 35, 0.4);
+}
+
+/* Credit section styling */
+.footer .credit {
+    font-size: 0.9rem;
+    color: #bdc3c7;
+}
+
+.footer .credit span a {
+    color: #f39c12;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer .credit span a:hover {
+    color: #f1c40f;
+}
+
+.footer .credit p {
+    margin: 0;
+    font-size: 0.85rem;
+}
+
+
+       
+
+        .footer .credit span a {
+            color: #fdd09c;
         }
         
 
@@ -219,20 +376,71 @@
                 flex-direction: column;
                 align-items: center;
             }
+            .footer .share a {
+                height: 2rem;
+                width: 2rem;
+                line-height: 2rem;
+                font-size: 0.9rem;
+            }
+
+            .footer .credit {
+                font-size: 0.8rem;
+            }
+        }
+        .circle {
+            height: 24px;
+            width: 24px;
+            border-radius: 50%;
+            background-color: black;
+            position: fixed;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 99999999;
+            transition: transform 0.1s ease-out;
         }
     </style>
 </head>
 <body>
+    <!-- Circles -->
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
 
     <!-- Navigation Bar -->
-    <nav>
-        <h1>Canvas Editor</h1>
-        <ul>
-            <li><a href="index.html">Home</a></li>
-            <li><a href="about-us.html">About-us</a></li>
-            <li><a href="auth.html">Login</a></li>
-        </ul>
-    </nav>
+    <header>
+        <div class="navbar">
+            <div class="site-name">Creative Canvas Tool</div>
+            <nav>
+                <a href="index.html">Home</a>
+                <a href="privacy.html">Privacy</a>
+                <a href="blog.html">Blogs</a>
+                <a href="Faq.html">FAQ</a>
+                <a href="contributors.html">Contributors</a>
+                <a href="testimonial.html">Testimonial</a>
+            </nav>
+            <div class="auth">
+                <a href="auth.html">Sign up/Sign in</a>
+            </div>
+        </div>
+    </header>
 
     <!-- Hero Section -->
     <section class="hero">
@@ -243,14 +451,17 @@ <h2>What Our Clients Say</h2>
     <!-- Stats Section -->
     <section class="stats-section">
         <div class="stat-box">
+            <i class="fa-solid fa-thumbs-up thumb-up-icon"></i>
             <h3>10k+</h3>
             <p>Happy Users</p>
         </div>
         <div class="stat-box">
+            <i class="fa-solid fa-palette palette-icon"></i>
             <h3>1M+</h3>
             <p>Designs Created</p>
         </div>
         <div class="stat-box">
+           <i class="fa fa-star checked"></i>
             <h3>4.8</h3>
             <p>Average Rating</p>
         </div>
@@ -261,21 +472,41 @@ <h3>4.8</h3>
         <h2>Client Testimonials</h2>
         <div class="testimonial-container">
             <div class="testimonial">
-                <img src="https://via.placeholder.com/80" alt="Client Image">
-                <h3>Jane Doe</h3>
-                <p>"The service was exceptional, and the staff was very friendly. I am so happy with the outcome of 
-                      my project!"</p>
+                <div class="testimonial-inner">
+                    <!-- Front face -->
+                    <div class="testimonial-front">
+                        <img src="https://via.placeholder.com/80" alt="Client Image">
+                        <h3>Jane Doe</h3>
+                    </div>
+                    <!-- Back face -->
+                    <div class="testimonial-back">
+                        <p>"The service was exceptional, and the staff was very friendly. I am so happy with the outcome of my project!"</p>
+                    </div>
+                </div>
             </div>
+        
             <div class="testimonial">
-                <img src="https://via.placeholder.com/80" alt="Client Image">
-                <h3>John Smith</h3>
-                <p>"A great experience from start to finish. Highly recommend this company for their professionalism 
-                     and dedication."</p>
+                <div class="testimonial-inner">
+                    <div class="testimonial-front">
+                        <img src="https://via.placeholder.com/80" alt="Client Image">
+                        <h3>John Smith</h3>
+                    </div>
+                    <div class="testimonial-back">
+                        <p>"A great experience from start to finish. Highly recommend this company for their professionalism and dedication."</p>
+                    </div>
+                </div>
             </div>
+        
             <div class="testimonial">
-                <img src="https://via.placeholder.com/80" alt="Client Image">
-                <h3>Emily White</h3>
-                <p>"I couldn't be more pleased with the results. The team went above and beyond to meet my needs."</p>
+                <div class="testimonial-inner">
+                    <div class="testimonial-front">
+                        <img src="https://via.placeholder.com/80" alt="Client Image">
+                        <h3>Emily White</h3>
+                    </div>
+                    <div class="testimonial-back">
+                        <p>"I couldn't be more pleased with the results. The team went above and beyond to meet my needs."</p>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
@@ -289,39 +520,75 @@ <h3>Ready to unleash your creativity?</h3>
 
     <!-- Footer -->
 
-    <footer class="text-center">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-4">
-                    <h4 class="footer-heading">About Us</h4>
-                    <p>Creative Canvas Tool is designed to empower artists of all skill levels, offering an 
-                          intuitive platform that transforms ideas into stunning digital artwork. </p>
-                </div>
-                <div class="col-md-4">
-                    <h4 class="footer-heading">Quick Links</h4>
-                    <a href="index.html">Home</a><br>
-                    <a href="about-us.html">About-us</a><br>
-                    <a href="tutorial.html">Tutorial</a><br>
-                    <a href="Faq.html">FAQ</a>
-                </div>
-                <div class="col-md-4">
-                    <h4 class="footer-heading">Follow Us</h4>
-                    <div class="social-icons">
-                        <a href="#"><i class="fab fa-facebook"></i></a>
-                        <a href="#"><i class="fab fa-twitter"></i></a>
-                        <a href="#"><i class="fab fa-instagram"></i></a>
-                    </div>
-                    <p>Contact us at: info@example.com</p>
-                </div>
-            </div>
+    <footer class="footer" id="footer">
+        <div class="share" style="font-size: 0.9rem; text-align: center">
+            <a href="#" class="fab fa-facebook-f"></a>
+            <a href="#" class="fa-brands fa-x-twitter"></a>
+            <a href="#" class="fab fa-instagram"></a>
+            <a href="#" class="fa-brands fa-linkedin-in"></a>
+            <a href="#" class="fa-brands fa-pinterest"></a>
         </div>
-  </footer>
+        <div class="credit" style="font-size: 1rem; text-align: center">
+            <p style="color: #333">
+                Created by
+                <span><a href="https://github.com/vishanurag/" target="_blank">ANURAG VISHWAKARMA</a></span>
+                | All rights reserved © <span id="year"></span>
+            </p>
+        </div>
+    </footer>
 
-    <footer>
-        <p>&copy; All rights reserved © <span id="year"></span></p>
 
-    </footer>
     <script>
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        // Colors for the circles
+        const colors = [
+            "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
+            "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
+            "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
+            "#680060", "#60005f", "#48005f", "#3d005e"
+        ];
+
+        // Assign colors and initial position to each circle
+        circles.forEach(function (circle, index) {
+            circle.x = 0;
+            circle.y = 0;
+            circle.style.backgroundColor = colors[index % colors.length];
+        });
+
+        // Update the coordinates when the mouse moves
+        window.addEventListener("mousemove", function (e) {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+        });
+
+        // Animation function to move the circles
+        function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
+
+            circles.forEach(function (circle, index) {
+                // Update the position and scale of each circle
+                circle.style.left = x - 12 + "px";
+                circle.style.top = y - 12 + "px";
+                circle.style.scale = (circles.length - index) / circles.length;
+
+                circle.x = x;
+                circle.y = y;
+
+                // Get the next circle in the sequence
+                const nextCircle = circles[index + 1] || circles[0];
+                x += (nextCircle.x - x) * 0.3;
+                y += (nextCircle.y - y) * 0.3;
+            });
+
+            // Repeat the animation
+            requestAnimationFrame(animateCircles);
+        }
+
+        // Start the animation
+        animateCircles();
         document.getElementById("year").textContent = new Date().getFullYear();
       </script>
 </body>