working on design of hero image testimonial about and footer sections

GarrettAnderson · Jul 13, 2024 · d4012b6 · d4012b6
1 parent 96b0321
commit d4012b6
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 46 deletions.
diff --git a/src/App.css b/src/App.css
@@ -28,13 +28,13 @@
 
 .jackie-ark-detail-card img {
   width: 100%;
-  margin-top: -8rem;
+  /* margin-top: -8rem; */
   border-radius: 5px;
 }
 
 .info-section {
-  background-color: #626060;
   padding: 2rem;
+  grid-column: 1 / 4;
 }
 
 .contact-info-section {
@@ -94,3 +94,9 @@ footer h6 {
   background-color: #e6e7e2;
   border-radius: 1rem;
 }
+
+@media screen and (min-width: 767px) {
+  .info-section {
+    position: absolute;
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -26,11 +26,19 @@ function App() {
       <Header />
       <Hero />
       <main className="content-container">
-        <section className="info-section">
-          <section className="jackie-ark-detail-card">
-            <img src={jackiesArkImg} />
+        <section className="about-info-container-parent">
+          <section className="about-info-container">
+            <section className="info-section">
+              <section className="jackie-ark-detail-card">
+                <img src={jackiesArkImg} />
+              </section>
+            </section>
+            <section className="about-section">
+              <About />
+            </section>
           </section>
         </section>
+
         <Services />
 
         <section className="photo-gallery">
@@ -51,10 +59,6 @@ function App() {
           </ol>
         </section>
 
-        <section className="about-section">
-          <About />
-        </section>
-
         {/* <section className="contact-info-section">
           <h4>GET IN TOUCH</h4> 
           <div className="contact-card">

diff --git a/src/Assets/Styles/About.css b/src/Assets/Styles/About.css
@@ -1,6 +1,20 @@
-.about-section {
+.about-info-container-parent {
   background-color: #626060;
 }
+
+.about-info-container {
+  width: 80%;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+}
+
+.about-section {
+  grid-column: 4/7;
+  height: 660px;
+  overflow-y: scroll;
+}
+
 .about-article {
   width: 90%;
   margin: 0 auto;
@@ -12,7 +26,7 @@
   margin-top: 0;
   margin: 0;
   font-family: "italiana";
-  font-size: clamp(2rem, 2.5vw, 2.5rem);
+  font-size: clamp(1.25rem, 2.5vw, 2.5rem);
   font-weight: 100;
   color: #e6e7e2;
   border-bottom: 1px solid #e6e7e2;
@@ -23,7 +37,18 @@
   color: #fff;
   padding: 1rem 1rem;
   font-family: "Montserrat", sans-serif;
-  font-size: clamp(1.25rem, 2.5vw, 2.5rem);
+  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
   margin: 0.5rem auto;
   text-align: justify;
 }
+
+@media screen and (min-width: 967px) {
+  .about-info-container {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    width: 80%;
+    margin: 0 auto;
+    justify-content: center;
+    align-items: center;
+  }
+}
diff --git a/src/Assets/Styles/Header.css b/src/Assets/Styles/Header.css
@@ -11,19 +11,13 @@
   display: none;
 }
 
-.hero-image-container-parent {
-  background-color: rgb(255 124 0 / 45%);
-}
-
 .hero-image--section-containers {
   background: url("../Images/jackie-dogs.png");
   min-height: 75vh;
   background-size: cover;
   background-blend-mode: multiply;
   background-repeat: no-repeat;
   background-attachment: fixed;
-  max-width: 75%;
-  margin: 0 auto;
 }
 
 .header-container section {
@@ -48,18 +42,14 @@
   margin: 1rem auto 2rem auto;
 }
 
-@media screen and (min-width: 600px) {
-  .hero-image--section-containers {
-    background-position-y: -10rem;
-  }
-
+@media screen and (min-width: 767px) {
   .header-container nav {
     width: 100%;
     display: block;
   }
 
   .header-desktop-nav ol {
-    font-family: italiana, roboto, sans-serif;
+    font-family: "italiana", "roboto", sans-serif;
     list-style: none;
     margin: 0;
     display: flex;
@@ -69,4 +59,19 @@
     color: #fff;
     font-size: 1.75rem;
   }
+
+  .hero-image-parent-container {
+    background-color: rgba(255, 124, 0, 0.45);
+    background: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 124, 0, 0.45) 100%
+    );
+    /* background-color: rgb(255 124 0 / 45%); */
+  }
+
+  .hero-image--section-containers {
+    max-width: 75%;
+    margin: 0 auto;
+  }
 }
diff --git a/src/Assets/Styles/Services.css b/src/Assets/Styles/Services.css
@@ -8,6 +8,7 @@
 .services-article-inner {
   background-color: #e6e7e2;
   width: 80%;
+  max-width: 850px;
   margin: 0 auto;
   border-radius: 5px;
   padding: 2rem 0;
@@ -26,7 +27,7 @@
   display: block;
   width: 70%;
   border: 0;
-  border-top: 1px solid #636a40;
+  border-top: 5px solid #636a40;
   margin: 0 auto;
   padding: 0;
 }
@@ -46,6 +47,6 @@
 }
 
 .individual-service-divider {
-  max-width: 15rem;
+  max-width: 3rem;
   margin: 1rem auto;
 }
diff --git a/src/Assets/Styles/Testimonial.css b/src/Assets/Styles/Testimonial.css
@@ -63,20 +63,21 @@
   font-size: 14px !important;
   font-weight: 400;
   background-color: #e6e7e2;
-  /* margin: 1rem; */
   padding: 2rem;
   border-radius: 5px;
   color: #626060;
-  /* max-height: 211px;
-  height: 211px; */
-  max-height: 370px;
-  height: 370px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
 }
 
+.text-parent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .testimonial-byline {
   font-size: 1rem !important;
   font-weight: bold;
@@ -118,10 +119,20 @@
   height: 100%;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 967px) {
   .testimonial {
     display: grid;
-    grid-template-columns: repeat(3, minmax(150px, 350px));
+    grid-template-columns: repeat(3, minmax(150px, 550px));
     grid-column-gap: 1rem;
+    width: 80%;
+    margin: 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+  .testimonial-text-container {
+    height: 450px;
+  }
+  .text-parent {
+    height: 375px;
   }
 }
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
@@ -1,12 +1,17 @@
 function Footer() {
   return (
     <footer>
-      <h5>JACKIE'S ARK PETSITTING SERVICES</h5>
       <section className="footer-contact-info">
-        <ol>
-          <li>407-716-5790</li>
-          <li>[email protected]</li>
-        </ol>
+        <h5>JACKIE'S ARK PETSITTING SERVICES</h5>
+        <section className="footer-contact-info">
+          <ol>
+            <li>407-716-5790</li>
+            <li>[email protected]</li>
+            <li>
+              <h6>2024</h6>
+            </li>
+          </ol>
+        </section>
       </section>
       <section className="insurance-logo">
         <a
@@ -20,7 +25,6 @@ function Footer() {
           />
         </a>
       </section>
-      <h6>2024</h6>
     </footer>
   );
 }

diff --git a/src/Components/Testimonial.js b/src/Components/Testimonial.js
@@ -45,13 +45,15 @@ function Testimonial() {
           >
             <FontAwesomeIcon className="open-quote" icon={faQuoteLeft} />
             <div className="testimonial-text-container">
-              <p
-                className="testimonial-text"
-                onMouseEnter={(e) => showTooltip(testimonial.testimonial)}
-              >
-                {testimonial.testimonial}
-                {/* {testimonial.testimonial.substring(0, 250) + "..."} */}
-              </p>
+              <div className="text-parent">
+                <p
+                  className="testimonial-text"
+                  onMouseEnter={(e) => showTooltip(testimonial.testimonial)}
+                >
+                  {testimonial.testimonial}
+                  {/* {testimonial.testimonial.substring(0, 250) + "..."} */}
+                </p>
+              </div>
               <h5 className="testimonial-byline">{testimonial.clientName}</h5>
             </div>
             {/* <FontAwesomeIcon className="close-quote" icon={faQuoteLeft} /> */}