finish homepage

sul-devs · May 5, 2024 · d993ec2 · d993ec2
1 parent cdf3e01
commit d993ec2
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 4 deletions.
diff --git a/src/index.html b/src/index.html
@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <!-- fontawesome icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+
     <!-- author -->
     <meta name="author" content="Sul Kamara" />
     <!-- favicon -->
@@ -275,15 +284,12 @@ <h3 class="project-title section-sub-heading">
                   >
                 </div>
               </article>
-              <br /><br /><br />
-              <hr />
-              <br /><br /><br />
             </li>
           </ul>
         </div>
       </section>
 
-      <section id="articles">
+      <section id="articles" class="section-padding">
         <div class="container">
           <h2 class="section-heading">Recent posts</h2>
           <ul class="cards-wrapper">
@@ -342,5 +348,55 @@ <h3 class="post-title">Day 5 - Building a full stack blog</h3>
         </div>
       </section>
     </main>
+
+    <footer id="footer" class="section-padding bt-2">
+      <div class="container">
+        <h2 class="section-heading invisible-but-accessible">Footer</h2>
+        <article class="about-me">
+          <h3 class="section-sub-heading">About me</h3>
+          <p class="about-me-text">
+            My name is Sul, I am a self taught software engineer with a keen
+            interest in Web Design and UX. I have good Html/Css skills, and I am
+            currently expanding my Javascript knowledge through projects. Once I
+            have got a good foundation of Javascript knowledge, I will look into
+            learning React. So my future stack will probably be MERN as I'm
+            using NodeJS and MongoDB in my current project.
+          </p>
+          <ul class="socials flex gap-2 vm-2">
+            <li>
+              <a href=""><i class="fab fa-github fa-2x"></i> GitHub</a>
+            </li>
+            <li>
+              <a href=""><i class="fab fa-linkedin fa-2x"></i> LinkedIn</a>
+            </li>
+            <li>
+              <a href=""><i class="fab fa-google fa-2x"></i> Email</a>
+            </li>
+          </ul>
+        </article>
+        <form action="" id="contact-form">
+          <h3 class="section-sub-heading">Contact me</h3>
+          <p class="email-field">
+            <label for="email" class="block mb-1">Email</label>
+            <input
+              type="text"
+              class="email block mb-2 border"
+              placeholder="Enter your email"
+              id="email"
+            />
+          </p>
+          <div class="message-field">
+            <label for="message" class="block mb-1">Message</label>
+            <textarea
+              class="ff-inherit"
+              name="message"
+              id="message"
+              placeholder="Write your message..."
+            ></textarea>
+          </div>
+          <input type="submit" value="Send your message" />
+        </form>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -73,6 +73,11 @@ p {
   font-size: $font-sssh;
 }
 
+input,
+textarea {
+  padding: 1em 1.5em;
+}
+
 // Utilities
 .btn {
   display: inline-block;
@@ -95,6 +100,10 @@ p {
   align-items: center;
 }
 
+.flex {
+  display: flex;
+}
+
 .wrap {
   display: flex;
   flex-wrap: wrap;
@@ -104,6 +113,10 @@ p {
   flex: 1 300px;
 }
 
+.gap-2 {
+  gap: 2em;
+}
+
 .gap-4 {
   gap: 4em;
 }
@@ -138,6 +151,18 @@ p {
   margin-top: 3em;
 }
 
+.mb-1 {
+  margin-bottom: 1em;
+}
+
+.mb-2 {
+  margin-bottom: 2em;
+}
+
+.mb-3 {
+  margin-bottom: 3em;
+}
+
 .vm-05 {
   margin-block: 0.5em;
 }
@@ -186,6 +211,31 @@ p {
   width: 100%;
 }
 
+.invisible-but-accessible {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  line-height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.va-middle {
+  vertical-align: middle;
+}
+
+.ff-inherit {
+  font-family: inherit;
+}
+
+.border {
+  border: 1px solid #000;
+}
+
+.bt-2 {
+  border-top: 2px solid #000;
+}
+
 // Navbar
 #navbar {
   .logo-img {
@@ -208,6 +258,17 @@ p {
   }
 }
 
+// Footer
+#footer {
+  textarea,
+  input {
+    width: 100%;
+  }
+  textarea {
+    height: 20vh;
+  }
+}
+
 // Media Queries
 @media screen and (min-width: 680px) {
   #navbar {