Header and BannerLogin done

public/sass_styles/_banner-login.scss

@@ -0,0 +1,50 @@
+.banner-login {
+    background-color: #D17262;
+    color: white;
+
+    @include bodyFont();
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 0px 5vw;
+
+    height: 7vh;
+
+    
+    p {
+        @include normalizeBody();
+    }
+
+    .button-container {
+
+        width: 20vw;
+
+        display: flex;
+        justify-content: space-around;
+    
+        button {
+            @include normalizeButton();
+
+            font-size: 2.6vh;
+            font-weight: bold;
+            color: #ffffff;
+
+            height: 6vh;
+
+        }
+
+        .register {
+            border: solid 1px  #ffffff;
+            border-radius: 24px;
+        }
+
+        .login {
+            background-color: #00000057;
+            border-radius: 24px;
+        }
+
+    }
+     
+}

public/sass_styles/_header.scss

@@ -0,0 +1,50 @@
+
+.header-main-page {
+    background-color: $main-color;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    height: 17vh;
+
+    h1 {
+        color: #ffffff;
+
+        font-size: 7vh;
+        @include titleFont();
+        @include normalizeTitle();
+    }
+    
+    h3 {
+        color: rgba(255, 255, 255, 0.75);
+
+        font-size: 2vh;
+        @include titleFont();
+        @include normalizeTitle();
+
+        .selectable {
+            user-select: all;
+    
+    
+            a,
+            a:link,
+            a:visited,
+            a:hover,
+            a:active {
+                color: inherit;
+                text-decoration: inherit;
+                font-weight: inherit;
+    
+            }
+    
+            a {
+                &::selection {
+                    background-color:#ffe83d;
+                    color: #000000
+                }
+            }
+        }
+    }
+}

public/sass_styles/styles.scss

@@ -0,0 +1,41 @@
+html, body { 
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    height: 100%;
+}
+
+@mixin titleFont {
+    font-family: 'Raleway', sans-serif;
+}
+
+@mixin bodyFont {
+    font-family: 'Rambla', sans-serif;
+}
+
+@mixin normalizeTitle {
+    margin: 0;
+    padding: 0;
+    user-select: none;
+}
+
+@mixin normalizeBody {
+    margin: 0;
+    padding: 0;
+}
+
+@mixin normalizeButton {
+    background: none;
+    border: none;
+    width: 8vw;
+}
+
+$main-color: #62D2A2;
+$second-color: #1FAB89;
+$light-color: #9DF3C4;
+$lightest-color: #D7FBE8;
+
+@import 'header';
+@import 'banner-login';