feat: cleaned up the css style.

Author: d-odumosu

Wireframe/README.md

@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [x ] Use semantic HTML tags to structure the webpage
-- [ x] Create three articles, each including an image, title, summary, and a link
-- [ x] Check a webpage against a wireframe layout
-- [x ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ x] Use version control by committing often and pushing regularly to GitHub
-- [ x] Develop the habit of writing clean, well-structured, and error-free code
+- [] Use semantic HTML tags to structure the webpage
+- [] Create three articles, each including an image, title, summary, and a link
+- [] Check a webpage against a wireframe layout
+- [] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [] Use version control by committing often and pushing regularly to GitHub
+- [] Develop the habit of writing clean, well-structured, and error-free code
 <!--{{</objectives>}}>-->
 
 ## Task

Wireframe/branches.html

@@ -7,6 +7,10 @@
     <meta name="description"
           content="A beginner-friendly blog about README files, wireframes, and Git branches for learning web development."/>
     <title>The Blog | Learning Programming Basics</title>
+    <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=Bitcount+Grid+Single:wght@100..900&family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+          rel="stylesheet">
     <link rel="stylesheet" href="style.css"/>
 </head>
 
@@ -32,7 +36,8 @@ <h1 class="site-title">The Blog</h1>
             <div class="article-feature-text">
                 <h2>What is the purpose of a README file</h2>
                 <p>
-                    according to GitHub Docs, a README file serves as the primary source of information about a project and
+                    according to GitHub Docs, a README file serves as the primary source of information about a project
+                    and
                     helps users understand how to install, use, and contribute to it <em>(GitHub Docs, n.d.).</em>
                 </p>
                 <p>
@@ -55,7 +60,8 @@ <h2>What is the purpose of a wireframe</h2>
                     A wireframe is a simple visual representation of a website or application's layout. It acts as a
                     blueprint.
                 </p>
-                <p>Figma describes a wireframe as a low-fidelity representation of a user interface that focuses on layout,
+                <p>Figma describes a wireframe as a low-fidelity representation of a user interface that focuses on
+                    layout,
                     structure, and functionality before visual design decisions are made <em>(Figma, n.d.).</em></p>
                 <a class="article-read-more" href="#"
                    aria-label="read more about the purpose of a wireframe">Wireframes</a>
@@ -64,7 +70,8 @@ <h2>What is the purpose of a wireframe</h2>
             <article class="article-sec">
                 <img src="./images/branch.webp" alt="illustration of a git tree branching out">
                 <h2>What is a branch in Git?</h2>
-                <p>Git documentation explains that branches allow developers to diverge from the main line of development
+                <p>Git documentation explains that branches allow developers to diverge from the main line of
+                    development
                     and work independently on features before merging their changes back into the project
                     <em>(Git SCM, n.d.).</em></p>
                 <p>