From 31eb9b4c345b4ac404d48ab63a8b77b0e5ae50ad Mon Sep 17 00:00:00 2001 From: kanishka-parmar Date: Mon, 8 Jul 2024 17:31:41 +0530 Subject: [PATCH] Testimonial page added --- assets/css_files/testimonial.css | 224 +++++++++++++++++++++++++++++ assets/html_files/testimonial.html | 166 +++++++++++++++++++++ assets/js_files/testimonial.js | 53 +++++++ index.html | 3 + 4 files changed, 446 insertions(+) create mode 100644 assets/css_files/testimonial.css create mode 100644 assets/html_files/testimonial.html create mode 100644 assets/js_files/testimonial.js diff --git a/assets/css_files/testimonial.css b/assets/css_files/testimonial.css new file mode 100644 index 00000000..fa89c26f --- /dev/null +++ b/assets/css_files/testimonial.css @@ -0,0 +1,224 @@ +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap'); + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + font-family: 'Playfair Display', serif; + max-width: 100vw; + display: flex; + flex-direction: column; + background-image: url(../images/bg3.png); + background-repeat: no repeat; + background-attachment: fixed; + background-position: center; + background-size: cover; + background-repeat: no repeat; + align-items: center; + justify-content: center; +} + +.navbar { + width: 100vw; + position: fixed; + top: 0; + left: 0; +} +.cont { + width: 1000px; + border: 2px solid #ccc; + background-color: #eee; + border-radius: 5px; + padding: 16px; + margin: 16px 0; + } + + /* Clear floats after containers */ + .cont::after { + content: ""; + clear: both; + display: table; + } + + /* Float images inside the container to the left. Add a right margin, and style the image as a circle */ + .cont img { + float: left; + margin-right: 50px; + border-radius: 50%; + } + + /* Increase the font-size of a span element */ + .cont span { + font-size: 20px; + margin-right: 15px; + } + +section { + display: flex; + grid-template-columns: 1fr 1fr; + max-width: 80vw; + margin-top: 20px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.container { + width: 80%; + margin: 0 auto; + background-color: #fff; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + margin-top: 50px; + margin-bottom: 40px; +} + +h1, h2 { + text-align: center; +} + +.form-group { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 5px; +} + +input, textarea { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + display: block; + width: 100%; + padding: 10px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +#reviews { + margin-bottom: 30px; +} + +.review { + width: 1000px; + border: 1px solid #ddd; + padding: 10px; + margin-bottom: 10px; + border-radius: 5px; + background-color:#eee; + box-sizing: border-box; + word-wrap: break-word; + overflow: hidden; +} + +.review p { + margin: 5px 0; +} + +.review-name { + font-weight: bold; + margin-bottom: 5px; +} + +.review-text { + font-style: italic; +} + +.credit { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 20vh; + width: 100%; + position: relative; + bottom: 0; + left: 0; + box-shadow: 0px -2.5px 6px rgb(30, 30, 30); + padding: 20px 50px; +} + +.credit .social-icon { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.credit .social-icon li { + list-style: none; +} + +.credit .social-icon li a { + font-size: 2em; + color: var(--secondary); + margin: 0 10px; + display: inline-block; + transition: 0.5s; +} + +.credit-links { + transition: transform .2s; +} + +.credit .social-icon li a:hover { + transform: translateY(-10px); + color: red; +} + +.credit p { + color: var(--secondary); + text-align: center; + margin-top: 15px; + margin-bottom: 10px; + font-size: 1.1em; + display: inline-block; +} + +.credit p a { + background-color: rgba(239, 230, 230, 0.551); + color: var(--secondary); + text-align: center; + margin-top: 15px; + margin-bottom: 10px; + font-size: 1.1em; + display: inline-block; +} + +@media (max-width: 900px) { + section { + grid-template-columns: 1fr; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 0; + } + + .image { + border-radius: 0; + display: flex; + flex-direction: column; + align-items: center; + } + + .content { + border-radius: 0; + } +} \ No newline at end of file diff --git a/assets/html_files/testimonial.html b/assets/html_files/testimonial.html new file mode 100644 index 00000000..4d3e5713 --- /dev/null +++ b/assets/html_files/testimonial.html @@ -0,0 +1,166 @@ + + + + + + + + + + + + + + + + Beautiify | Testimonial + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+

Testimonials

+
+
+
+
+

Chris Fox

+

This website is really very useful.Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum blanditiis est non cum error quia modi eaque perferendis iure, rerum cumque quod, illum!!

+
+ +
+

Rebecca Flex

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, in. Minus, eligendi in! Atque voluptate impedit ad libero illum soluta molestiae totam aliquam quo iure, earum debitis !!

+
+ +
+
+ +

Leave a Review

+
+
+ + +
+
+ + +
+ +
+
+ +
+

+
+ +

+ Created By + Rakesh Roshan ❤️ | © + : All Rights Reserved +

+
+ + + + +
+ +
+ + + diff --git a/assets/js_files/testimonial.js b/assets/js_files/testimonial.js new file mode 100644 index 00000000..9433d7ac --- /dev/null +++ b/assets/js_files/testimonial.js @@ -0,0 +1,53 @@ +document.addEventListener('DOMContentLoaded', function() { + // Load existing reviews from localStorage + loadReviews(); + + document.getElementById('reviewForm').addEventListener('submit', function(e) { + e.preventDefault(); + + const name = document.getElementById('name').value; + const review = document.getElementById('review').value; + + if (name && review) { + const reviewContainer = createReviewElement(name, review); + + // Insert new review before the cont elements + document.getElementById('new-reviews-container').appendChild(reviewContainer); + + saveReview(name, review); + + document.getElementById('reviewForm').reset(); + } + }); +}); + +function loadReviews() { + const reviews = JSON.parse(localStorage.getItem('reviews')) || []; + const reviewsContainer = document.getElementById('new-reviews-container'); + + reviews.forEach(review => { + const reviewContainer = createReviewElement(review.name, review.text); + reviewsContainer.appendChild(reviewContainer); + }); +} + +function saveReview(name, text) { + const reviews = JSON.parse(localStorage.getItem('reviews')) || []; + reviews.push({ name, text }); + localStorage.setItem('reviews', JSON.stringify(reviews)); +} + +function createReviewElement(name, text) { + const reviewContainer = document.createElement('div'); + reviewContainer.classList.add('review'); + + const reviewName = document.createElement('p'); + reviewName.innerHTML = `${name}`; + reviewContainer.appendChild(reviewName); + + const reviewText = document.createElement('p'); + reviewText.textContent = text; + reviewContainer.appendChild(reviewText); + + return reviewContainer; +} diff --git a/index.html b/index.html index 3c827a1d..0c179ba7 100644 --- a/index.html +++ b/index.html @@ -64,6 +64,9 @@
  • Components
    • +
  • + Testimonials +
  • Contributors