Added sections & footer

index.css

@@ -4,6 +4,7 @@
     padding: 0;
     box-sizing: border-box;
     transition: all 0.3s ease;
+    scroll-behavior: smooth;
 }
 
 body {
@@ -20,7 +21,9 @@ body.light-mode {
 header {
     background-color: rgb(31, 36, 40);
     padding: 0px 32px;
-    position: relative;
+    position: fixed;
+    top: 0;
+    width: 100%;
 }
 body.light-mode header {
     background-color: #ffffff;
@@ -96,6 +99,43 @@ body.light-mode .dark-mode-toggle:hover {
     background-color: #e0e0e0;
 }
 
+/*
+    FOOTER
+*/
+footer {
+    background-color: rgb(27, 31, 34);
+    padding: 48px 0px;
+    width: 100%;
+}
+footer .links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+    margin-bottom: 24px;
+}
+footer a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 48px;
+    height: 48px;
+
+    background-color: rgb(39, 44, 48);
+    color: white;
+    font-size: 24px;
+    border: none;
+    border-radius: 50%;
+    text-decoration: none;
+}
+footer p {
+    color: rgb(216, 216, 216);
+    text-decoration: none;
+    font-size: 14px;
+    justify-self: center;
+}
 
 /*
     MAIN
@@ -104,3 +144,14 @@ main {
     max-width: 1200px;
     margin: 0 auto;
 }
+
+
+/* Home Section */
+.home-container {
+    height: 100vh;
+}
+
+/* Showcase Section */
+.showcase-container {
+    height: 100vh;
+}