Commit with no name

resources/css/main.scss

@@ -6,6 +6,7 @@
 html, body {
   margin: 0;
   padding: 0;
+  background-color: variables.$clr_sides;
 }
 
 #container {
@@ -24,7 +25,6 @@ html, body {
 }
 
 #left {
-  background: aqua;
   grid-column: 1;
   grid-row-start: 1;
   grid-row-end: 3;
@@ -51,7 +51,6 @@ html, body {
 }
 
 #right {
-  background: aqua;
   grid-column: 3;
   grid-row-start: 1;
   grid-row-end: 3;

resources/css/partials/footer.scss

@@ -0,0 +1,67 @@
+@use "../variables.scss";
+
+
+#footer {
+  margin: 0;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: variables.$innerContainerMargin;
+
+  .footer-column {
+    color: aliceblue;
+    display: flex;
+    flex-direction: column;
+    margin: 0 20px 0 0;
+
+    h2 {
+      font: 22px "Montserrat", sans-serif;
+      font-weight: 600;
+      color: white;
+      margin-bottom: 0;
+    }
+
+    hr {
+      margin: 0 0 10px 0;
+      border: 1px dotted white;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+      margin: 0 0 5px 0;
+      font: 16px "Montserrat", sans-serif;
+      font-weight: 500;
+    }
+
+    .footer-social {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 5px;
+
+      img {
+        border-radius: 10px;
+        width: 35px;
+        height: 35px;
+        margin: 0 15px 0 0;
+      }
+
+      &:hover {
+        background: variables.$clr_nav_active;
+        color: black;
+      }
+    }
+
+    p {
+      font: 16px "Montserrat", sans-serif;
+      font-weight: 500;
+      color: inherit;
+      margin: 0;
+    }
+
+    &:last-of-type {
+      margin: 0;
+    }
+  }
+}

resources/css/partials/header.scss

@@ -2,6 +2,7 @@
 @use "../mixins.scss";
 
 #header {
+  background: variables.$clr_header;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -12,7 +13,10 @@
   }
 
   #logo {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 700;
     margin-left: variables.$innerContainerMargin;
+    color: variables.$clr_logo
   }
 
   .navbar {
@@ -20,8 +24,15 @@
 
     .nav-item {
       margin-right: variables.$innerContainerMargin;
+      font: 18px "Montserrat", sans-serif;
+      font-weight: 600;
+      color: variables.$clr_nav_sleep;
       text-decoration: none;
 
+      &:hover {
+        color: variables.$clr_nav_active;
+      }
+
       @include mixins.navbar_overflow {
         &:last-of-type {
           margin-right: 0;

resources/css/variables.scss

@@ -4,4 +4,15 @@ $tablet: 768px;
 $main: 1700px;
 $fourK: 2560px;
 
-$innerContainerMargin: 20px;
+$innerContainerMargin: 20px;
+
+$clr_header: #01003B;
+$clr_logo: #D6FFFF;
+$clr_nav_sleep: #A3C2C2;
+$clr_nav_active: $clr_logo;
+
+$clr_sides: #364040;
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

resources/imgs/facebook.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M241.871,256.001 C249.673,256.001 256,249.675 256,241.872 L256,14.129 C256,6.325 249.673,0 241.871,0 L14.129,0 C6.324,0 0,6.325 0,14.129 L0,241.872 C0,249.675 6.324,256.001 14.129,256.001 L241.871,256.001" fill="#395185"></path>
+		<path d="M176.635,256.001 L176.635,156.864 L209.912,156.864 L214.894,118.229 L176.635,118.229 L176.635,93.561 C176.635,82.375 179.742,74.752 195.783,74.752 L216.242,74.743 L216.242,40.188 C212.702,39.717 200.558,38.665 186.43,38.665 C156.932,38.665 136.738,56.67 136.738,89.736 L136.738,118.229 L103.376,118.229 L103.376,156.864 L136.738,156.864 L136.738,256.001 L176.635,256.001" fill="#FFFFFF"></path>
+	</g>
+</svg>