From 1eb50689aebf59b274aef0907973051dbfd75f8c Mon Sep 17 00:00:00 2001 From: akash70629 Date: Tue, 15 Oct 2024 16:52:11 +0530 Subject: [PATCH] fix broken link , create testimonial page --- assets/css/testimonials.css | 349 ++++++++++++++++++++++++++++++++++++ assets/js/testimonials.js | 98 ++++++++++ pages/testimonials.html | 118 ++++++++++++ 3 files changed, 565 insertions(+) create mode 100644 assets/css/testimonials.css create mode 100644 assets/js/testimonials.js create mode 100644 pages/testimonials.html diff --git a/assets/css/testimonials.css b/assets/css/testimonials.css new file mode 100644 index 00000000..5bb26de9 --- /dev/null +++ b/assets/css/testimonials.css @@ -0,0 +1,349 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; +} + +html { + scroll-behavior: smooth; +} + +/* star section css */ + +.bodys { + min-height: 50vh; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + font-family: 'Montserrat', sans-serif; + background-size: cover; + background-position: center; + background-attachment: fixed; + opacity: .9 +} + +.card { + max-width: 28rem; + margin-top: 50px; + padding: 1rem; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + width: 100%; + border-radius: 0.5rem; + position: relative; + +} + +.card h2 { + color: hsl(357, 100%, 75%); +} + +.card a { + position: absolute; + top: 10px; + right: 10px; + color: rgb(122, 120, 120); + font-size: 20px; +} + +.star { + font-size: 6vh; + cursor: pointer; +} + +.one { + color: rgb(255, 0, 0); +} + +.two { + color: rgb(255, 106, 0); +} + +.three { + color: rgb(232, 232, 65); +} + +.four { + color: rgb(232, 232, 50); +} + +.five { + color: rgb(232, 232, 50); +} + + +#ratingForm #reviewInput { + width: 380px; + height: 155px; + padding: 10px; + font-size: 15px; + border-radius: 5px; +} + +button { + width: 40%; + height: 43px; + background-color: hsl(357, 100%, 75%); + /* color: white; */ + color: white; + font-size: 18px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: rgb(125, 165, 75); + cursor: pointer; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); +} + +#popup { + display: none; + position: fixed; + top: 10%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border: 1px solid #ddd; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + + +/* review section css */ + +body { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 100vh; + width: 100%; + background-color: #ffede7; + background-repeat: no-repeat; +} + +main { + width: 800px; +} + +main h1 { + text-align: center; + font-size: clamp(2rem, 4vw, 2.6rem); + /* color: #fff; */ + color: hsl(357, 100%, 75%); + margin-bottom: 70px; + margin-top: 50px; +} + +.fa-house { + /* position: absolute; */ + top: 20px; + right: 30px; + color:hsl(357, 100%, 75%); + font-size: 30px; + position: fixed; + transition: 0.5s; +} + +.fa-house:hover { + cursor: pointer; + color: hsl(357, 78%, 51%); + transition: 0.5s; +} + +.slide-row { + display: flex; + width: 3200px; + transition: 0.5s; +} + +.slide-col { + position: relative; + width: 800px; + height: 400px; +} + +.hero { + position: absolute; + top: 0; + right: 0; + height: 100%; +} + +.hero img { + height: 100%; + border-radius: 10px; + width: 320px; + object-fit: cover; + pointer-events: none; + user-select: none; +} + +.content { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 520px; + height: 270px; + color: #4d4352; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(4.5px); + -webkit-backdrop-filter: blur(4.5px); + border-radius: 10px; + padding: 45px; + z-index: 2; + user-select: none; +} + +.content p { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.3; + color: hsl(357, 64%, 66%); +} + +.content h2 { + font-size: 1.5rem; + font-weight: 600; + margin-top: 35px; + color: #4d4352; + +} + +.indicator { + display: flex; + justify-content: center; + margin-top: 4rem; +} + +.indicator .btn { + display: inline-block; + height: 15px; + width: 15px; + margin: 4px; + border-radius: 15px; + /* background: #fff; */ + background: hsl(357, 100%, 75%); + cursor: pointer; + transition: all 0.5s ease-in-out; +} + +.btn.active { + width: 30px; +} + +.slider { + width: 100%; + overflow: hidden; +} + + +@media (max-width: 850px) { + main { + width: 500px; + } + + .slide-row { + width: 2000px; + } + + .slide-col { + width: 500px; + height: 250px; + } + + .hero img { + width: 200px; + } + + .content { + width: 320px; + height: 200px; + padding: 20px; + } + + .content p { + font-size: 0.9rem; + } + + .content h2 { + font-size: 1.2rem; + margin-top: 20px; + } +} + +@media (max-width: 550px) { + main { + width: 300px; + } + + .slide-row { + width: 1200px; + } + + .slide-col { + width: 500px; + height: 300px; + } + + .hero { + top: 60%; + height: 100px; + z-index: 5; + } + + .hero img { + width: 100px; + } + + .content { + width: 300px; + } + + main h1 { + margin-top: 10px; + margin-bottom: 0px; + } +} + +@media only screen and (max-width: 455px) { + .card { + max-width: 20rem; + margin-top: 20px; + padding: 0.5rem; + font-size: 14px; + } + + .card a { + top: 5px; + right: 5px; + } + + #ratingForm #reviewInput { + width: 250px; + height: 100px; + } + + button { + width: 30%; + height: 30px; + } + + h1 { + margin: 10px; + } + + .fa-house { + font-size: 25px; + right: 10px; + } +} \ No newline at end of file diff --git a/assets/js/testimonials.js b/assets/js/testimonials.js new file mode 100644 index 00000000..cb1606a4 --- /dev/null +++ b/assets/js/testimonials.js @@ -0,0 +1,98 @@ +// To access the stars +let stars = + document.getElementsByClassName("star"); +let output = + document.getElementById("output"); + +// Funtion to update rating +function gfg(n) { + remove(); + for (let i = 0; i < n; i++) { + if (n == 1) cls = "one"; + else if (n == 2) cls = "two"; + else if (n == 3) cls = "three"; + else if (n == 4) cls = "four"; + else if (n == 5) cls = "five"; + stars[i].className = "star " + cls; + } + output.innerText = "Rating is: " + n + "/5"; +} + +// To remove the pre-applied styling +function remove() { + let i = 0; + while (i < 5) { + stars[i].className = "star"; + i++; + } +} + + +// Make 1 star compulsory +function validateRating() { + let rating = parseInt(output.innerText.split("/")[0].split(": ")[1]); + if (rating < 1) { + gfg(1); // Select 1 star if no rating is selected + } + return rating >= 1; // Return true if rating is valid +} + +// Add event listener to the submit button +document.getElementById("ratingForm").addEventListener("submit", (e) => { + e.preventDefault(); // Prevent the form from submitting + if (validateRating()) { + // Show a "Done" popup for 3 seconds + let popup = document.getElementById("popup"); + popup.style.display = "block"; + setTimeout(() => { + popup.style.display = "none"; + // Clear stars + remove(); + output.innerText = ""; + // Clear the text area + document.getElementById("reviewInput").value = ""; + }, 2000); + } +}); + + + + + + + + +//review section + +const btns = document.querySelectorAll(".btn"); +const slideRow = document.getElementById("slide-row"); +const main = document.querySelector("main"); + +let currentIndex = 0; + +function updateSlide() { + const mainWidth = main.offsetWidth; + const translateValue = currentIndex * -mainWidth; + slideRow.style.transform = `translateX(${translateValue}px)`; + + btns.forEach((btn, index) => { + btn.classList.toggle("active", index === currentIndex); + }); +} + +btns.forEach((btn, index) => { + btn.addEventListener("click", () => { + currentIndex = index; + updateSlide(); + }); +}); + +window.addEventListener("resize", () => { + updateSlide(); +}); + +// Start the slideshow +let intervalId = setInterval(() => { + currentIndex = (currentIndex + 1) % btns.length; + updateSlide(); +}, 3000); diff --git a/pages/testimonials.html b/pages/testimonials.html new file mode 100644 index 00000000..84d8bc01 --- /dev/null +++ b/pages/testimonials.html @@ -0,0 +1,118 @@ + + + + + + + + + + + Testimonials + + +
+ + +

Testimonials

+ +
+
+
+
+

Zen Doan is a business analyst, entrepreneur and media proprietor, and investor. She also known as the best selling book author.

+

Zen

+

Author

+
+
+ avatar +
+
+ +
+
+

Jonathan Koletic is an American internet entrepreneur and media proprietor, and investor. He is the founder of the multi-national technology company Treymont.

+

Jonathan

+

Treymont Inc.

+
+
+ avatar +
+
+ +
+
+

Charlie Green is an European entrepreneur and media consultant, and investor. He is the founder of the Hallmark Inc.

+

Charlie

+

Hallmark Inc.

+
+
+ avatar +
+
+ +
+
+

Sarah Dam is an American internet entrepreneur and media proprietor, and investor. She is the founder of the multi-national technology company Zara.

+

Sarah

+

Zara Inc.

+
+
+ avatar +
+
+ +
+
+ +
+ + + + +
+ +
+ + +
+ +
+

Rate Us

+
+ ★ + + ★ + + ★ + + ★ + + ★ + +
+ Rating is: 0/5 +
+ + +
+ + +
+ + +
+ +
+ + + + + + + + + + + \ No newline at end of file