added a headline on hero and started working on the contact section

build/main.css

@@ -110,7 +110,7 @@ p {
 /* Media query button */
 @media screen and (max-width: 500px) {
     .button {
-        font-size: 0.9rem;
+        /* font-size: 1.2rem; */
         padding: 10px;
     }
 }
@@ -181,6 +181,40 @@ p {
     color: var(--primary-color) !important;
 }
 
+/* BEGIN CTA BUTTON STYLES */
+.button--cta {
+    color: var(--secondary-color);
+    background-color: var(--tertiary-color);
+    /* border: 2px solid var(--tertiary-color); */
+    position: relative;
+    transition: color 0.3s ease-in-out;
+    z-index: 1;
+}
+
+.button--cta::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 0;
+    bottom: 0;
+    background-color: var(--secondary-color);
+    transition: all 0.3s ease-in-out;
+    z-index: -1;
+}
+
+.button--cta:hover::after {
+    width: 100%;
+    height: 100%;
+    /* border: 1px solid var(--tertiary-color); */
+}
+
+.button--cta:hover {
+    color: var(--primary-color);
+}
+
+/* END OF CTA BUTTON STYLES */
+
 /* END OF SECONDARY BUTTON STYLES */
 
 /* ================= ***GENERAL STYLES END HERE!!*** =================*/
@@ -235,6 +269,23 @@ p {
     top: 0;
 }
 
+.header__middle {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(50%, -50%);
+    z-index: 10;
+    text-align: center;
+}
+
+.header__middle h1 {
+    color: var(--light-text-color);
+    text-transform: uppercase;
+}
+
+.header__middle p {
+    font-style: italic;
+}
 /* ============***Logo styles***============ */
 .logo-pilates {
     margin: 20px 5px;
@@ -573,7 +624,7 @@ p {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-items: center;
-    padding-top: var(--padding-60);
+    /* padding-top: var(--padding-60); */
 }
 
 @media screen and (max-width: 1164px) {
@@ -582,6 +633,10 @@ p {
     }
 }
 
+.about__title {
+    padding-top: var(--padding-60);
+}
+
 .about .about__content .about__text {
     width: 100%;
     padding: 0 var(--padding-35);

index.html

@@ -116,9 +116,14 @@
         <a href="javascript:void(0)">&#9776;</a>
       </div>
     </div>
+    <div class="header__middle">
+      <h1>Pilates Journeys</h1>
+      <p>work out muscles you don't even know you have</p>
+      <a class="button button--cta">Learn More</a>
+    </div>
   </header>
   <!-- Begin About Section -->
-  <h2 class="section__title">About</h2>
+  <h2 class="about__title">About</h2>
   <section id="about" class="about">
     <div class="about__content">
       <div class="about__text">
@@ -204,6 +209,21 @@ <h5 class="post__title">Post 2 Headline</h5>
     </div>
   </section>
   <!-- End of Blog Section -->
+  <!-- Beginning of Contact Section -->
+  <section id="contact" class="contact">
+    <h2 class="contact__title">Contact</h2>
+    <div class="contact__container">
+      <div class="contact__info">
+        <a></a>
+        <a></a>
+        <a></a>
+      </div>
+      <div class="contact__map">
+
+      </div>
+    </div>
+  </section>
+  <!-- End of Contact Section -->
   <!-- JS SCRIPTS -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
     integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"