Create testimonial comment section & update styles

aadhithbala · Jul 23, 2023 · 9337d8f · 9337d8f
1 parent c0bce99
commit 9337d8f
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -239,5 +239,74 @@ <h3 class="card-heading">Spread the word</h3>
         </div>
       </div>
     </section>
+
+    <section class="section-social">
+      <div class="social">
+        <h2 class="social-heading">Hear What Our Customers Have to Say</h2>
+        <div class="social-container">
+          <div class="testimonials">
+            <div class="review-box">
+              <img
+                src="./images/customer-photos/testimonial-customer-4.jpg"
+                alt="a reviewer photo"
+              />
+
+              <p class="review-content">
+                Adopting through The Cat Lounge was life-changing. Seamless
+                process, exceptional support. Our furry friend brings so much
+                joy!
+              </p>
+
+              <p class="author">&mdash; Sarah Snook</p>
+            </div>
+
+            <div class="review-box">
+              <img
+                src="./images/customer-photos/testimonial-customer-1.jpg"
+                alt="a reviewer photo"
+              />
+
+              <p class="review-content">
+                Fostering through The Cat Lounge: fulfilling experience.
+                Witnessing transformation, scared to confident companion. Highly
+                recommend!
+              </p>
+
+              <p class="author">&mdash; Karolina Novotney</p>
+            </div>
+
+            <div class="review-box">
+              <img
+                src="./images/customer-photos/testimonial-customer-2.jpg"
+                alt="a reviewer photo"
+              />
+
+              <p class="review-content">
+                Couldn't adopt, but volunteering at The Cat Lounge makes a
+                difference. Compassionate community, proud to be a part of their
+                journey.
+              </p>
+
+              <p class="author">&mdash; Justin Cho</p>
+            </div>
+
+            <div class="review-box">
+              <img
+                src="./images/customer-photos/testimonial-customer-3.jpg"
+                alt="a reviewer photo"
+              />
+
+              <p class="review-content">
+                Supporting shelter animals by donating to The Cat Lounge brings
+                satisfaction. Vital care, second chance at happiness.
+              </p>
+
+              <p class="author">&mdash; Kendall Roy</p>
+            </div>
+          </div>
+          <div class="gallery"></div>
+        </div>
+      </div>
+    </section>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -237,3 +237,52 @@ h2 {
 .icon-img {
   width: 5rem;
 }
+
+/* Section Social */
+
+.section-social {
+}
+
+.social {
+  padding: 2rem 4.5rem;
+}
+
+.social-container {
+  background-color: lightsteelblue;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  /* column-gap: 3rem; */
+}
+
+.testimonials {
+  background-color: lightpink;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+
+.review-box {
+  padding: 1rem;
+  background-color: lightyellow;
+}
+
+.review-box > img {
+  width: 6rem;
+  border-radius: 50%;
+  margin-bottom: 2rem;
+}
+
+.review-content {
+  margin-bottom: 2rem;
+  font-size: 1.25rem;
+}
+
+.author {
+  font-weight: 500;
+}
+
+/* Gallery */
+
+.gallery {
+  background-color: lightsalmon;
+}