From cdf3e01376ee0e2475f7d1b290d6e9351e2e3f6f Mon Sep 17 00:00:00 2001
From: Sul Kamara <sulaimankamara110@gmail.com>
Date: Sun, 5 May 2024 22:36:27 +0100
Subject: [PATCH] create articles section

---
 src/index.html        | 277 +++++++++++++++++++++++++++++++++++++++++-
 src/styles/index.scss |  84 +++++++++++--
 2 files changed, 348 insertions(+), 13 deletions(-)

diff --git a/src/index.html b/src/index.html
index fef331b..2f70d26 100644
--- a/src/index.html
+++ b/src/index.html
@@ -55,15 +55,15 @@
     </nav>
 
     <!------------ Hero ------------>
-    <header id="hero" class="section-padding">
-      <div class="container wrap gap-4">
-        <div class="hero-text basis-500">
+    <header id="hero" class="section-padding align-center">
+      <div class="container wrap flex-between-center gap-4">
+        <hgroup class="hero-text basis-500">
           <h1 class="hero-heading">My Top Web Development Projects</h1>
           <p class="hero-description vm-05">See my best project work below.</p>
           <a href="#projects" class="hero-btn btn block p-1 mt-2 text-center"
             >See Projects</a
           >
-        </div>
+        </hgroup>
         <img
           src="assets/img/hero-img.svg"
           alt="Computer and the internet"
@@ -73,5 +73,274 @@ <h1 class="hero-heading">My Top Web Development Projects</h1>
         />
       </div>
     </header>
+
+    <main id="main">
+      <section id="projects">
+        <div class="container">
+          <h2 class="section-heading">Projects</h2>
+          <!-- Projects -->
+          <ul class="projects">
+            <!-- Project Card -->
+            <li class="project-card card">
+              <article>
+                <!-- image -->
+                <a href="https://sul-devs.github.io/prioritasker">
+                  <img
+                    class="project-img"
+                    src="assets/img/prioritasker-screenshot.png"
+                    alt="Prioritasker homepage."
+                  />
+                </a>
+                <!-- text -->
+                <div class="project-text vm-2">
+                  <h3 class="project-title section-sub-heading">
+                    <a
+                      class="link"
+                      href="https://sul-devs.github.io/prioritasker"
+                    >
+                      Prioritasker
+                    </a>
+                  </h3>
+                  <p class="project-description vp-05">
+                    A task prioritisation web application. Enter your list of
+                    todos and get them ranked by priority.
+                  </p>
+                </div>
+                <!-- buttons -->
+                <div class="project-buttons">
+                  <a
+                    class="card-btn btn block p-1"
+                    href="https://sul-devs.github.io/prioritasker"
+                    >Live Site</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Source Code</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Documentation</a
+                  >
+                </div>
+              </article>
+              <br /><br /><br />
+              <hr />
+              <br /><br /><br />
+            </li>
+
+            <!-- Project Card -->
+            <li class="project-card card">
+              <article>
+                <!-- image -->
+                <a href="https://sul-devs.github.io/pimoky">
+                  <img
+                    class="project-img"
+                    src="assets/img/prioritasker-screenshot.png"
+                    alt="Prioritasker homepage."
+                  />
+                </a>
+                <!-- text -->
+                <div class="project-text vm-2">
+                  <h3 class="project-title section-sub-heading">
+                    <a
+                      class="link"
+                      href="https://sul-devs.github.io/prioritasker"
+                    >
+                      Pimoky
+                    </a>
+                  </h3>
+                  <p class="project-description vp-05">
+                    An ecommerce website selling technology devices and gadgets
+                    such as Phones, Laptops, TVs, Drones, Cameras, etc.
+                  </p>
+                </div>
+                <!-- buttons -->
+                <div class="project-buttons">
+                  <a
+                    class="card-btn btn block p-1"
+                    href="https://sul-devs.github.io/prioritasker"
+                    >Live Site</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Source Code</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Documentation</a
+                  >
+                </div>
+              </article>
+              <br /><br /><br />
+              <hr />
+              <br /><br /><br />
+            </li>
+
+            <!-- Project Card -->
+            <li class="project-card card">
+              <article>
+                <!-- image -->
+                <a href="https://sul-devs.github.io/prioritasker">
+                  <img
+                    class="project-img"
+                    src="assets/img/prioritasker-screenshot.png"
+                    alt="Prioritasker homepage."
+                  />
+                </a>
+                <!-- text -->
+                <div class="project-text vm-2">
+                  <h3 class="project-title section-sub-heading">
+                    <a
+                      class="link"
+                      href="https://sul-devs.github.io/prioritasker"
+                    >
+                      TNN
+                    </a>
+                  </h3>
+                  <p class="project-description vp-05">
+                    A site that people would follow to get the latest news,
+                    trends and talking points in the technology industry.
+                  </p>
+                </div>
+                <!-- buttons -->
+                <div class="project-buttons">
+                  <a
+                    class="card-btn btn block p-1"
+                    href="https://sul-devs.github.io/prioritasker"
+                    >Live Site</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Source Code</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Documentation</a
+                  >
+                </div>
+              </article>
+              <br /><br /><br />
+              <hr />
+              <br /><br /><br />
+            </li>
+
+            <!-- Project Card -->
+            <li class="project-card card">
+              <article>
+                <!-- image -->
+                <a href="https://sul-devs.github.io/prioritasker">
+                  <img
+                    class="project-img"
+                    src="assets/img/prioritasker-screenshot.png"
+                    alt="Prioritasker homepage."
+                  />
+                </a>
+                <!-- text -->
+                <div class="project-text vm-2">
+                  <h3 class="project-title section-sub-heading">
+                    <a
+                      class="link"
+                      href="https://sul-devs.github.io/prioritasker"
+                    >
+                      Opidur
+                    </a>
+                  </h3>
+                  <p class="project-description vp-05">
+                    A digital marketing agency landing page or single page
+                    website.
+                  </p>
+                </div>
+                <!-- buttons -->
+                <div class="project-buttons">
+                  <a
+                    class="card-btn btn block p-1"
+                    href="https://sul-devs.github.io/prioritasker"
+                    >Live Site</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Source Code</a
+                  ><br />
+                  <a
+                    href="https://github.com/sul-devs/prioritasker"
+                    class="card-btn btn block p-1"
+                    >Documentation</a
+                  >
+                </div>
+              </article>
+              <br /><br /><br />
+              <hr />
+              <br /><br /><br />
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section id="articles">
+        <div class="container">
+          <h2 class="section-heading">Recent posts</h2>
+          <ul class="cards-wrapper">
+            <!-- Post -->
+            <li class="post">
+              <a href="#">
+                <article>
+                  <h3 class="post-title">Day 7 - Building a full stack blog</h3>
+                  <p class="post-date">05/05/24</p>
+                  <br />
+                  <p class="post-description">
+                    In this article, I explain how I created the 'Recent posts'
+                    section and footer to complete the homepage for my website.
+                  </p>
+                </article>
+                <br /><br />
+              </a>
+              <hr />
+              <br /><br />
+            </li>
+
+            <!-- Post -->
+            <li class="post">
+              <a href="#">
+                <article>
+                  <h3 class="post-title">Day 6 - Building a full stack blog</h3>
+                  <p class="post-date">03/05/24</p>
+                  <br />
+                  <p class="post-description">
+                    In this article, I explain how I created the navigation bar,
+                    hero section, and projects section of this blog site.
+                  </p>
+                </article>
+                <br /><br />
+              </a>
+              <hr />
+              <br /><br />
+            </li>
+
+            <!-- Post -->
+            <li class="post">
+              <a href="#">
+                <article>
+                  <h3 class="post-title">Day 5 - Building a full stack blog</h3>
+                  <p class="post-date">02/05/24</p>
+                  <br />
+                  <p class="post-description">
+                    In this article, I explain how I created the navigation bar,
+                    hero section, and projects section of this blog site.
+                  </p>
+                </article>
+              </a>
+            </li>
+          </ul>
+          <a href="#" class="btn w-100 text-center vm-2">View all articles +</a>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0164df3..3041423 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -13,10 +13,10 @@ $text-color: $secondary-color;
 $button-color: $secondary-color;
 $font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 $container-width: 1100px;
-$font-sm: 1.2em;
-$font-md: 1.5em;
-$font-lg: 1.9em;
-$font-xl: 2.3em;
+$font-h: 2.5em;
+$font-sh: 2.3em;
+$font-ssh: 1.9em;
+$font-sssh: 1.2em;
 
 // Resets
 * {
@@ -41,6 +41,10 @@ $font-xl: 2.3em;
 }
 
 // Base styles
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background-color: $background-color;
   color: $text-color;
@@ -49,12 +53,24 @@ body {
 }
 
 // Typography
-h1 {
-  font-size: $font-xl;
+.hero-heading {
+  font-size: $font-h;
+}
+
+.section-heading {
+  font-size: $font-sh;
+}
+
+.section-sub-heading {
+  font-size: $font-ssh;
+}
+
+.section-sub-sub-heading {
+  font-size: $font-sssh;
 }
 
 p {
-  font-size: $font-md;
+  font-size: $font-sssh;
 }
 
 // Utilities
@@ -68,7 +84,7 @@ p {
 
 .container {
   width: 92%;
-  max-width: var(--container-width);
+  max-width: $container-width;
   margin-inline: auto;
   padding: 1em;
 }
@@ -85,7 +101,7 @@ p {
 }
 
 .basis-500 {
-  flex: 1 400px;
+  flex: 1 300px;
 }
 
 .gap-4 {
@@ -110,10 +126,18 @@ p {
 }
 
 // margin
+.mt-1 {
+  margin-top: 1em;
+}
+
 .mt-2 {
   margin-top: 2em;
 }
 
+.mt-3 {
+  margin-top: 3em;
+}
+
 .vm-05 {
   margin-block: 0.5em;
 }
@@ -122,14 +146,46 @@ p {
   margin-block: 1em;
 }
 
+.vm-2 {
+  margin-block: 2em;
+}
+
 .section-padding {
+  padding-block: 3em;
+}
+
+.section-heading {
   padding-block: 2em;
+  font-size: $font-sh;
+}
+
+.section-sub-heading {
+  font-size: $font-ssh;
+  font-weight: 500;
+  padding-bottom: 0.5em;
 }
 
 .block {
   display: block;
 }
 
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.link {
+  text-decoration: underline;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.w-100 {
+  width: 100%;
+}
+
 // Navbar
 #navbar {
   .logo-img {
@@ -141,6 +197,16 @@ p {
 }
 
 // Hero
+#hero {
+  height: 83vh;
+}
+
+// Projects
+#projects {
+  img {
+    width: 100%;
+  }
+}
 
 // Media Queries
 @media screen and (min-width: 680px) {