feat: removed some pages

Author: d-odumosu

Wireframe/index.html

@@ -29,36 +29,53 @@ <h1 class="site-title">The Blog</h1>
     <main>
         <article class="article-feature">
             <img src="./images/md.png" alt="illustration of a readme.md file">
-            <h2>What is the purpose of a README file</h2>
-            <p>
-                A README file is usually the first file someone sees when they open a project repository. Its main
-                purpose is ...
-            </p>
-            <a class="article-read-more" href="readme.html"
-               aria-label="read more about what the purpose of a read me file does">README file ...</a>
+            <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
+                    helps users understand how to install, use, and contribute to it <em>(GitHub Docs, n.d.).</em>
+                </p>
+                <p>
+                    A README file is one of the most important documents within a software
+                    project. It is usually the first file that users, developers, recruiters,
+                    or potential employers look at when they visit a project's repository.
+                    The name "README" comes from the idea that it should be the file people
+                    read before doing anything else with the project.
+                </p>
+                <a class="article-read-more" href="#"
+                   aria-label="read more about what the purpose of a read me file does">README file ...</a>
+            </div>
         </article>
 
-        <article class="article-sec">
-            <img src="./images/wireframes-01.png.webp" alt="illustration of a man showing a wireframe">
-            <h2>What is the purpose of a wireframe</h2>
-            <p>
-                A wireframe is a simple visual representation of a website or application's layout. It acts as a
-                blueprint ...
-            </p>
-            <a class="article-read-more" href="wireframe.html" aria-label="read more about the purpose of a wireframe">Wireframes</a>
-        </article>
-
-        <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>
-                A branch in Git is an independent line of development that allows developers to work on changes without
-                affecting ...
-            </p>
-            <a class="article-read-more" href="branches.html" aria-label="read more about branches on git">Git
-                branching</a>
-        </article>
+        <div class="article-secondary-flex">
+            <article class="article-sec">
+                <img src="./images/wireframes-01.png.webp" alt="illustration of a man showing a wireframe">
+                <h2>What is the purpose of a wireframe</h2>
+                <p>
+                    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,
+                    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>
+            </article>
 
+            <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
+                    and work independently on features before merging their changes back into the project
+                    <em>(Git SCM, n.d.).</em></p>
+                <p>
+                <p>
+                    A branch in Git is a separate line of development that allows developers to
+                    work on changes independently without affecting the main project.
+                </p>
+                <a class="article-read-more" href="#" aria-label="read more about branches on git">Git
+                    branching</a>
+            </article>
+        </div>
     </main>
 </div>
 

Wireframe/style.css

@@ -10,7 +10,21 @@ body {
     max-width: 1200px;
     margin: 0 auto;
   }
-
+  .article-feature-text{
+    padding:0 0 2em 2em;
+  }
+.article-secondary-flex{
+  display:flex;
+  justify-content:space-between;
+}
+.article-sec{
+  margin-top:1.5em;
+  padding:1.5em;
+  width: 44%
+}
+article{
+  border: 1px solid #fb8500;
+}
 img,
 svg {
   width: 100%;
@@ -37,7 +51,7 @@ h1 {
 header {
   text-align: center;
   margin: 0;
-  padding: 50px;
+  /*padding: 50px;*/
 }
 
 /* ====== Footer ====== */
@@ -48,28 +62,21 @@ header {
   display: flex;
   justify-content:space-between;
   align-items: center;
-
 }
 
 /* ====== Navigation ====== */
-ul li {
-  list-style: none;
-
-}
-
-ul li a {
+.article-read-more {
   text-decoration: none;
-  color:#1b263b;
+  border: 1px solid #03045e;
+  padding: .7em 1.2em;
+  color:#fff;
+  background: #e76f51;
+  border-radius:2px;
 }
-ul li a:hover, ul li a:focus{
-  color: #ffd60a;
+.article-read-more:hover,
+.article-read-more:focus{
+  background: #ffc300;
+  color:black;
+  font-size:20px;
 }
-.footer-nav ul{
-  display: flex;
-  gap: 1rem;
-  /*margin: 0;*/
-  /*padding: 0;*/
-  list-style: none;
-
 
-}