configured about page

about.html

@@ -9,6 +9,9 @@
       href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Ubuntu&display=swap"
       rel="stylesheet"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
     <!-- Social Icons -->
     <link
       rel="stylesheet"
@@ -51,7 +54,7 @@ <h1>
     </div>
     <!--Cards-->
     <div class="hero"></div>
-    <div class="content">
+    <!-- <div class="content">
       <div class="about">
         <a href="/about.html"
           ><img src="/images/img9.jpg" class="float-right"
@@ -74,7 +77,63 @@ <h3>
           conditioners on your pet to ensure the health and safety of both your
           loved one and also the Earth.
         </p>
+      </div> -->
+      <!-- 3 columns -->
+      <br>
+      <br>
+      <p id="abouthead">About Us</p>
+      <br>
+      <div class="container">
+      <div class="row">
+        <div class="column">
+          <div class="card">
+            <img src="images/nails.jpg" id="about1"/>
+            <h3 id="abouth3">Quality Pet Care</h3>
+            <br>
+            <p> At Fluffy Puppies, our team of highly experienced, certified and friendly pet groomers will ensure that not only will your pet look and feel it's best, 
+                but we will treat your pet with the utmost respect while in our care. So, if you are a new puppy owner, just adopted a rescue or just looking for a new groomer, 
+                feel free to stop in and meet some of our groomers. We look forward to meeting you and discussing your pet's grooming needs.</p>
+          </div>
+        </div>
+
+        <div class="column">
+          <div class="card">
+            <img src="images/kitty.jpg" id="about1"/>
+            <h3 id="abouth3">Reliable and Trustworthy Groomers</h3>
+            <br>
+            <p>Our staff is personable and have many years experience grooming so you can be assured that your pet will be in good hands. 
+              We aim to create informal and lasting relationships with our clients and pets. 
+              We maintain individual records of owners and their pets as well as any observations that we find whilst grooming will be noted and brought to your attention. 
+              We conduct our business with honesty and integrity and encourage owners to share in the health and happiness of their pet.</p>
+          </div>
+        </div>
+
+        <div class="column">
+          <div class="card">
+            <img src="images/yorkie.jpg" id="about1"/>
+            <h3 id="abouth3">Grooming With Sustainability</h3>
+            <br>
+            <p>Fluffy Puppies is committed to working in ways that benefit both the health of your pet and the planet. 
+              Which is why we only use natural and organic shampoos and conditioners on all of our clients. 
+              When it comes to bath products and shampoos that are safe and gentle to use in your home and on your pet, 
+              organic products offer peace of mind that’s easy to see. </p>
+          </div>
+        </div>
+
+        <div class="column">
+          <div class="card">
+            <img src="images/img9.jpg" id="about1"/>
+            <h3 id="abouth3">Satisfaction Guaranteed</h3>
+            <br>
+            <p>We are always prepared for any pets' needs and ensure that your pet will receive the best care and love.
+              Their happiness and care is our priority and we strive to provide a service we would want our own pets to receive.
+              If for any reason you are not satisfied with our services please contact us so we can make it right.  </p>
+          </div>
+        </div>
       </div>
+    </div>
+
+      <!-- contact card -->
       <div id="contact" class="contact">
         <a href="services.html"
           ><img src="images/reception.jpeg" class="float-right"

contact.html

@@ -42,9 +42,13 @@ <h1><img src="images/Fluffy-Puppies-logos-black.jpg" href="/index.html" id="navb
     <div class="hero"></div>
     <div class="content">
         <div class="about">
-            <a href="about.html"><img src="images/Forever-Vets-Feb-2021-Vaccines-Needed-for-Dog-Grooming-min.jpeg" class="float-right" /></a>
-            <h2>Our Services</h2>
-            <h3>We believe that a good quality dog or cat grooming experience includes everything your pet needs to stay maintained, comfortable, and looking their best!</h3>
+            <a href="about.html"><img src="images/contactdog.jpg" id="contactdog" class="float-right" /></a>
+            <h2>Contact Us</h2>
+            <p>
+                We are always prepared for any pets' needs and ensure that your pet will receive the best care and love.
+                Their happiness and care is our priority and we strive to provide a service we would want our own pets to receive.
+                If for any reason you are not satisfied with our services please contact us so we can make it right.  
+            </p>
 
             </p>
         </div>

faq.html

@@ -42,7 +42,7 @@ <h1><img src="images/Fluffy-Puppies-logos-black.jpg" href="index.html" id="navba
     <div class="hero"></div>
     <div class="content">
         <div class="about">
-            <a href="about.html"><img src="images/Forever-Vets-Feb-2021-Vaccines-Needed-for-Dog-Grooming-min.jpeg" class="float-right" /></a>
+            <a href="about.html"><img src="images/faqdog.jpg" class="float-right" /></a>
             <h2>Frequently Asked Questions</h2>
             <h3>If your question is not listed, please feel free to call us at 216.555.1234</h3>
             <br>

index.html

@@ -117,6 +117,8 @@ <h2>Pet Grooming That Exceeds Expectations</h2>
     <span class="dot" onclick="currentSlide(3)"></span>
     <span class="dot" onclick="currentSlide(4)"></span>
   </div>
+
+  <!-- contact card -->
         <div id="contact" class="contact">
             <a href="services.html"><img src="images/reception.jpeg" class="float-right" /></a>
             <h2>Let's Get Your Pet Scheduled</h2>
@@ -136,13 +138,15 @@ <h2>Let's Get Your Pet Scheduled</h2>
             </p>
         </div>
     </div>
+
+    <!-- reviews -->
     <div class="reviews">
         <div class="review-lead">
             <h2>What our Clients Are Saying</h2>
             <br>
             <br>
             <h3>Tiffany Johnson - Cleveland, OH</h3>
-            <a><img src="images/reviewer.jpeg" /></a>
+            <a><img src="images/new-review1.jpg" /></a>
             <p>
                 "Our 7 month old bernedoodle had his first grooming experience here and they were wonderful. He is huge
                 and can be a lot to handle but they were so great with him!!! He looked fantastic and our groomer did
@@ -158,8 +162,8 @@ <h3>Jill Presutto - Vermillion, OH</h3>
             </p>
         </div>
         <div class="review3">
-            <h3>Archer Langhals - Olmsted Falls, OH</h3>
-            <a><img src="images/reviewer2.jpeg"></img></a>
+            <h3>Gabby Solis - Olmsted Falls, OH</h3>
+            <a><img src="images/new-review2.jpg"></img></a>
             <p>
                 "Not only is the staff here caring, and professional, but they offer the best quality in dog grooming.
                 You can't beat Fluffy Puppies!"

script.js

@@ -39,5 +39,5 @@ function showSlides() {
   slideIndex++;
   if (slideIndex > slides.length) {slideIndex = 1}
   slides[slideIndex-1].style.display = "block";
-  setTimeout(showSlides, 3000); // Change image every 3 seconds
+  setTimeout(showSlides, 8000); // Change image every 3 seconds
 }

style.css

@@ -215,6 +215,7 @@ li {
 .contact {
     margin-bottom: 20px;
     padding: 50px;
+    margin-top: 50px;
     height: 325px;
     font-family: 'Ubuntu', sans-serif;
     background-color: rgb(232,78,55);
@@ -243,8 +244,33 @@ li {
     float: left;
 }
 
+#about1 {
+    display: block;
+    margin: 10px auto;
+    max-width: 150px;
+    border-radius: 75px;
+    box-shadow: 0px 5px 30px rgb(255, 255, 255);
+}
+
+#abouthead {
+    font-size: 60px;
+    font-family: 'Ubuntu', sans-serif;
+    text-align: center;
+    font-family: 'Dancing Script', cursive;
+    font-weight: bolder;
+}
+
+#abouth3 {
+    font-size: 32px;
+    font-family: 'Ubuntu', sans-serif;
+    text-align: center;
+    font-family: 'Dancing Script', cursive;
+    font-weight: bolder;
+}
+
 .about img {
     max-height: 300px;
+    border-radius: 50%;
     box-shadow: 0px 5px 30px rgb(75, 0, 0);
 }
 
@@ -258,6 +284,16 @@ li {
     box-shadow: 0px 5px 30px rgb(75, 0, 0);
 }
 
+#contactdog {
+    border-radius: 75%;
+}
+
+.container {
+    max-width: 80%;
+    position: relative;
+    margin: auto;
+  }
+
 .about h2 {
     margin-bottom: 20px;
     font-size: 36px;
@@ -433,4 +469,47 @@ li {
 @keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
-}
+}
+
+/* about us cards */
+* {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  /* Float four columns side by side */
+  .column {
+    float: left;
+    width: 25%;
+    padding: 0 10px;
+  }
+
+  /* Remove extra left and right margins, due to padding */
+  .row {margin: 0 -5px;}
+
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  /* Responsive columns */
+  @media screen and (max-width: 600px) {
+    .column {
+      width: 100%;
+      display: block;
+      margin-bottom: 20px;
+    }
+  }
+
+  /* Style the counter cards */
+  .card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    padding: 16px;
+    text-align: center;
+    background-color: rgb(255, 255, 255);
+  }