added a blog section

build/main.css

@@ -45,10 +45,16 @@ a.prevent-default-style-logo:visited {
     cursor: pointer;
 }
 
+section {
+    padding-top: var(--padding-60);
+    /* padding-bottom: var(--padding-60); */
+}
+
 h2 {
     font-size: 2.4rem;
     text-transform: uppercase;
     margin: 40px 0;
+    text-align: center;
 }
 
 h3 {
@@ -560,7 +566,6 @@ p {
     display: grid;
     justify-items: center;
     justify-content: center;
-    padding-top: var(--padding-60);
     width: 100%;
 }
 
@@ -585,7 +590,121 @@ p {
 .about .about__content .about__img img {
     width: 100%;
 }
+/* ============***End of About styles***============ */
+
+/* ============***Beginning of Pricing Section styles***============ */
+.pricing {
+    color: var(--primary-color);
+    background-color: var(--light-text-color);
+}
+
+
+
+/* ============***End of Pricing styles***============ */
+
+/* ============***Beginning of Classes Section styles***============ */
+.classes {
+    color: var(--light-text-color);
+    background-color: var(--primary-color);
+}
+
+
+
+/* ============***End of Classes styles***============ */
+
+/* ============***Beginning of Blog Section styles***============ */
+.blog {
+    color: var(--primary-color);
+    background-color: var(--light-text-color);
+    padding-bottom: var(--padding-60);
+}
+.blog__desc {
+    color: var(--primary-color);
+    text-align: center;
+}
+.blog__container {
+  display: grid;
+  place-content: center;
+  grid-template-columns: repeat(2, 50%);
+  grid-column-gap: 20px;
+  grid-row-gap: 60px;
+  font-size: 1.2rem;
+  padding: var(--padding-60);
+  /* padding-bottom: 100px; */
+  overflow: hidden;
+}
+
+@media screen and (max-width: 600px) {
+    .blog__container {
+      padding: var(--padding-30);
+      grid-column-gap: 0;
+    }
+  }
+  .blog__post {
+    display: grid;
+    grid-template-columns: 40% 60%;
+    background-color: var(--white-color);
+    box-shadow: 2px 4px 5px 1px #ddcfa746;
+  }
+  @media screen and (max-width: 1030px) {
+    .blog__post {
+      grid-column: 1 / end;
+    }
+  }
+  @media screen and (max-width: 600px) {
+    .blog__post {
+      grid-template-columns: 100%;
+    }
+  }
+  .postimg__container {
+    width: inherit;
+    height: inherit;
+    overflow: hidden;
+  }
+  .post__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scale(1);
+    transition: transform 0.3s ease-in-out;
+  }
+  .post__img:hover {
+    transform: scale(1.2);
+  }
+  .post__content {
+    padding: 0 10px 0 20px;
+  }
+  .post__date {
+    display: inline-block;
+    color: var(--primary-color);
+    font-style: normal;
+    font-weight: 300;
+    padding: 30px 0;
+  }
+  .post__title {
+    color: var(--tertiary-color);
+    font-size: 1.3rem;
+    margin: 10px 0;
+  }
+  .post__desc {
+    color: var(--primary-color);
+    padding: 10px 5px;
+  }
+  .post__readmore {
+    display: inline-block;
+    color: var(--tertiary-color);
+    font-size: 1.2rem;
+    padding: 5px 0;
+    margin: 5px 0 20px 0;
+    border-bottom: 3px solid var(--tertiary-color);
+  }
+  .blog__moreblogs {
+    grid-column: 1 / end;
+    display: grid;
+    justify-content: center;
+  }
 
+/* ============***End of Blog styles***============ */
 
 /* Key Frames Animations */
 @keyframes logo-animation {

index.html

@@ -105,9 +105,10 @@
         <nav class="topnav overlay-content" data-navItemsContainer>
           <a class="topnav__link" href="https://darmag12.github.io/Pilates-Journeys/">Home</a>
           <a class="topnav__link" href="#about">About</a>
-          <a class="topnav__link" href="#">Classes</a>
           <a class="topnav__link" href="#">Pricing</a>
-          <a class="topnav__link" href="#">Retreats</a>
+          <a class="topnav__link" href="#">Classes</a>
+          <a class="topnav__link" href="#">Blog</a>
+          <!-- <a class="topnav__link" href="#">Retreats</a> -->
           <a class="topnav__link button button--secondary" href="#">Contact</a>
         </nav>
       </div>
@@ -116,8 +117,9 @@
       </div>
     </div>
   </header>
-  <section class="about">
-    <h2 id="about">About</h2>
+  <!-- Begin About Section -->
+  <h2 class="section__title">About</h2>
+  <section id="about" class="about">
     <div class="about__content">
       <div class="about__text">
         <p>"After having a road accident when I was 17, each and every doctor and physiotherapist recommended I try
@@ -140,6 +142,68 @@ <h2 id="about">About</h2>
       </div>
     </div>
   </section>
+  <!-- End About Section -->
+  <!-- Begin Pricing Section -->
+  <section id="pricing" class="pricing">
+    <h2 class="pricing__title">Pricing</h2>
+    <div class="pricing__content">
+      <h1 style="display: flex; justify-content: center; align-items: center;">COMING SOON</h1>
+    </div>
+  </section>
+  <!-- End Pricing Section -->
+  <!-- Begin Classes Section -->
+  <section id="classes" class="classes">
+    <h2 class="classes__title">Classes</h2>
+    <div class="classes__content">
+      <h1 style="display: flex; justify-content: center; align-items: center;">COMING SOON</h1>
+    </div>
+  </section>
+  <!-- End Classes Section -->
+  <!-- Begin Blog Section -->
+  <section id="blog" class="blog">
+    <h2 class="blog__title">Blog</h2>
+    <p class="blog__desc">Latest Blog Post.</p>
+    <!-- Begin Blog Post one -->
+    <div class="blog__container">
+      <div class="blog__post">
+        <div class="postimg__container">
+          <a href="" title="Post 1 Headline">
+            <img class="post__img" src="./resources/blog-placeholder-one.jpg" alt="Post 1 Headline" />
+          </a>
+        </div>
+        <div class="post__content">
+          <span class="post__date">Tue Aug 27 2024 | Category</span>
+          <h5 class="post__title">Post 1 Headline</h5>
+          <p class="post__desc">
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum non etiam odio nulla dignissim cras porta...
+          </p>
+          <a class="post__readmore" href="" title="Link to the entire post">Read More</a>
+        </div>
+      </div>
+      <!-- End Blog Post one -->
+      <!-- Begin Blog Post two -->
+      <div class="blog__post">
+        <div class="postimg__container">
+          <a href="" title="Post 2 Headline">
+            <img class="post__img" src="./resources/blog-placeholder-two.jpg" alt="Post 2 Headline" />
+          </a>
+        </div>
+        <div class="post__content">
+          <span class="post__date">Mon Aug 26 2024 | Category</span>
+          <h5 class="post__title">Post 2 Headline</h5>
+          <p class="post__desc">
+            Lectus suspendisse class amet; orci amet cursus. Phasellus sapien sociosqu velit aptent ex taciti...
+          </p>
+          <a class="post__readmore" href="" title="Link to the entire post">Read More</a>
+        </div>
+      </div>
+    </div>
+    <!-- End Blog Post two -->
+    <div class="blog__moreblogs">
+      <a href="" class="button" title="Link to all the blogs">More Blogs</a>
+    </div>
+  </section>
+  <!-- End of Blog 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"