Many many updates & I'm too lazy to comment

resources/css/main.scss

@@ -1,5 +1,7 @@
 @use "variables.scss";
 @use "mixins.scss";
+@use "views/index.scss";
+@use "views/aydinlatma.scss";
 @use "partials/header.scss";
 @use "partials/footer.scss";
 
@@ -9,48 +11,36 @@ html, body {
   background-color: variables.$clr_sides;
 }
 
-#container {
-  height: 100vh;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 1fr 1700px 1fr;
-  grid-row-end: -1;
-  grid-auto-rows: 1fr;
-  grid-gap: 0;
-
-  @include mixins.main {
-    grid-template-columns: 0 1fr 0;
-    background: red;
-  }
-}
-
-#left {
-  grid-column: 1;
-  grid-row-start: 1;
-  grid-row-end: 3;
+.content_spacing {
+  padding: 0 variables.$px_contentPadding;
 }
 
 #header {
-  grid-column: 2;
-  grid-row: 1;
+  // Layout, details and children is set in partials/header.scss
+  height: 10vh;
+
+  @include mixins.header_overflow2 {
+    height: 5vh;
+  }
+}
+
+#container {
+  height: 90vh;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 1fr;
+  grid-gap: 0;
+  overflow: auto;
 }
 
 #content {
-  background: aquamarine;
-  grid-column-start: 2;
-  grid-row-start: 2;
-
-  padding: variables.$innerContainerMargin;
+  background: whitesmoke;
+  grid-column-start: 1;
+  grid-row-start: 1;
   overflow-wrap: break-word;
 }
 
 #footer {
-  grid-column: 2;
-  grid-row: 3;
-}
-
-#right {
-  grid-column: 3;
-  grid-row-start: 1;
-  grid-row-end: 3;
+  grid-column: 1;
+  grid-row: 2;
 }

resources/css/mixins.scss

@@ -1,17 +1,5 @@
 @use "variables.scss";
 
-@mixin mobileS {
-  @media screen and (max-width: $mobileS) {
-    @content;
-  }
-}
-
-@mixin navbar_overflow {
-  @media screen and (max-width: variables.$navbar_overflow) {
-    @content;
-  }
-}
-
 @mixin footer_overflow {
   @media screen and (max-width: variables.$footer_overflow) {
     @content;
@@ -24,20 +12,14 @@
   }
 }
 
+@mixin header_overflow2 {
+  @media screen and (max-width: variables.$header_overflow2) {
+    @content;
+  }
+}
+
 @mixin footer_overflow2 {
   @media screen and (max-width: variables.$footer_overflow2) {
     @content;
   }
-}
-
-@mixin main {
-  @media screen and (max-width: variables.$main) {
-    @content;
-  }
-}
-
-@mixin fourK {
-  @media screen and (max-width: $fourK) {
-    @content;
-  }
 }

resources/css/partials/footer.scss

@@ -8,7 +8,7 @@
   justify-content: flex-start;
   flex-direction: row;
   align-items: flex-start;
-  padding: variables.$innerContainerMargin;
+  padding: variables.$px_headerPadding;
 
   .footer-column {
     color: variables.$clr_footer_sleep;

resources/css/partials/header.scss

@@ -2,28 +2,36 @@
 @use "../mixins.scss";
 
 #header {
+  // Height is set in main.scss
   background: variables.$clr_header;
+  padding: 0 variables.$px_headerPadding;
+  position: sticky;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 
-  @include mixins.navbar_overflow {
-    flex-direction: column;
+  @include mixins.header_overflow2 {
+    padding: 0 variables.$px_headerPadding2;
   }
 
   #logo {
+    height: 56px;
     font-family: "Montserrat", sans-serif;
     font-weight: 700;
-    margin-left: variables.$innerContainerMargin;
-    color: variables.$clr_logo
+
+    color: variables.$clr_logo;
+
+    @include mixins.header_overflow2 {
+      height: 36px;
+    }
   }
 
   .navbar {
     display: flex;
 
     .nav-item {
-      margin-right: variables.$innerContainerMargin;
+      margin-right: 1vw;
       font: 18px "Montserrat", sans-serif;
       font-weight: 600;
       color: variables.$clr_nav_sleep;
@@ -33,10 +41,8 @@
         color: variables.$clr_nav_active;
       }
 
-      @include mixins.navbar_overflow {
-        &:last-of-type {
-          margin-right: 0;
-        }
+      &:last-of-type {
+        margin-right: 0;
       }
 
       @include mixins.header_overflow {
@@ -47,7 +53,7 @@
 
   .menu {
     display: none;
-    margin-right: variables.$innerContainerMargin;
+    filter: invert(1);
 
     @include mixins.header_overflow {
       display: block;

resources/css/variables.scss

@@ -1,12 +1,15 @@
 $mobileS: 360px;
-$navbar_overflow: 550px;
-$header_overflow: 730px;
+$header_overflow: 1200px;
+$header_overflow2: 850px;
+$content_fix: 850px;
 $footer_overflow2: 880px;
 $footer_overflow: 1110px;
 $main: 1700px;
 $fourK: 2560px;
 
-$innerContainerMargin: 20px;
+$px_headerPadding: 150px;
+$px_headerPadding2: 50px;
+$px_contentPadding: 200px;
 
 $sz_l_footer_h: 22px;
 $sz_m_footer_h: 18px;
@@ -15,10 +18,12 @@ $sz_l_footer_p: 16px;
 $sz_m_footer_p: 12px;
 $sz_s_footer_p: 8px;
 
-$clr_header: #01003B;
+$clr_dark: #01003B;
+
 $clr_logo: #FDFFFF;
-$clr_nav_sleep: #A3C2C2;
-$clr_nav_active: $clr_logo;
+$clr_header: #FDFFFF;
+$clr_nav_sleep: #706fff;
+$clr_nav_active: #01003B;
 
 $clr_footer: #000000;
 $clr_footer_sleep: #DFE8E8;

resources/css/views/aydinlatma.scss

@@ -0,0 +1,2 @@
+@use "../variables.scss";
+@use "../mixins.scss";

resources/css/views/index.scss

@@ -0,0 +1,50 @@
+@use "../variables.scss";
+@use "../mixins.scss";
+
+.showcase {
+  position: relative;
+  background-image: none;
+  background-color: black;
+
+  img {
+    width: 100%;
+    height: auto;
+    filter: brightness(50%);
+  }
+
+  h1 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -30%);
+
+    font: 800 128px "Montserrat", sans-serif;
+    color: #FFFFFF;
+  }
+}
+
+.group {
+  background-color: #FFFFFF;
+  padding: 10px variables.$px_contentPadding;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.group-item {
+  display: flex;
+  flex-direction: column;
+  img {
+    max-width: 300px;
+    height: auto;
+  }
+
+  p {
+    font: 400 22px "Montserrat", sans-serif;
+  }
+
+  .side {
+
+  }
+}

resources/styles/main.css

@@ -0,0 +1,229 @@
+@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");
+.showcase {
+  position: relative;
+  background-image: none;
+  background-color: black;
+}
+.showcase img {
+  width: 100%;
+  height: auto;
+  filter: brightness(50%);
+}
+.showcase h1 {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -30%);
+  font: 800 128px "Montserrat", sans-serif;
+  color: #FFFFFF;
+}
+
+.group {
+  background-color: #FFFFFF;
+  padding: 10px 200px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.group-item {
+  display: flex;
+  flex-direction: column;
+}
+.group-item img {
+  max-width: 300px;
+  height: auto;
+}
+.group-item p {
+  font: 400 22px "Montserrat", sans-serif;
+}
+#header {
+  background: #FDFFFF;
+  padding: 0 150px;
+  position: sticky;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+@media screen and (max-width: 850px) {
+  #header {
+    padding: 0 50px;
+  }
+}
+#header #logo {
+  height: 56px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  color: #FDFFFF;
+}
+@media screen and (max-width: 850px) {
+  #header #logo {
+    height: 36px;
+  }
+}
+#header .navbar {
+  display: flex;
+}
+#header .navbar .nav-item {
+  margin-right: 1vw;
+  font: 18px "Montserrat", sans-serif;
+  font-weight: 600;
+  color: #706fff;
+  text-decoration: none;
+}
+#header .navbar .nav-item:hover {
+  color: #01003B;
+}
+#header .navbar .nav-item:last-of-type {
+  margin-right: 0;
+}
+@media screen and (max-width: 1200px) {
+  #header .navbar .nav-item {
+    display: none;
+  }
+}
+#header .menu {
+  display: none;
+  filter: invert(1);
+}
+@media screen and (max-width: 1200px) {
+  #header .menu {
+    display: block;
+  }
+}
+
+#footer {
+  background: #000000;
+  margin: 0;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 150px;
+}
+#footer .footer-column {
+  color: #DFE8E8;
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px 0 0;
+}
+#footer .footer-column h2 {
+  font: 22px "Montserrat", sans-serif;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 0;
+}
+@media screen and (max-width: 1110px) {
+  #footer .footer-column h2 {
+    font-size: 18px;
+  }
+}
+@media screen and (max-width: 880px) {
+  #footer .footer-column h2 {
+    font-size: 14px;
+  }
+}
+#footer .footer-column hr {
+  margin: 0 0 10px 0;
+  border: 1px dotted white;
+}
+#footer .footer-column a {
+  color: inherit;
+  text-decoration: none;
+  margin: 0 0 5px 0;
+  font: 16px "Montserrat", sans-serif;
+  font-weight: 500;
+}
+#footer .footer-column a:hover {
+  color: #F5FFFF;
+}
+@media screen and (max-width: 1110px) {
+  #footer .footer-column a {
+    font-size: 12px;
+  }
+}
+@media screen and (max-width: 880px) {
+  #footer .footer-column a {
+    font-size: 8px;
+  }
+}
+#footer .footer-column .footer-social {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 5px;
+}
+#footer .footer-column .footer-social img {
+  border-radius: 10px;
+  width: 35px;
+  height: 35px;
+  margin: 0 15px 0 0;
+}
+#footer .footer-column .footer-social:hover {
+  background: #F5FFFF;
+  color: black;
+}
+#footer .footer-column p {
+  font: 16px "Montserrat", sans-serif;
+  font-weight: 500;
+  color: inherit;
+  margin: 0;
+}
+@media screen and (max-width: 1110px) {
+  #footer .footer-column p {
+    font-size: 12px;
+  }
+}
+@media screen and (max-width: 880px) {
+  #footer .footer-column p {
+    font-size: 8px;
+  }
+}
+#footer .footer-column:last-of-type {
+  margin: 0;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: #364040;
+}
+
+.content_spacing {
+  padding: 0 200px;
+}
+
+#header {
+  height: 10vh;
+}
+@media screen and (max-width: 850px) {
+  #header {
+    height: 5vh;
+  }
+}
+
+#container {
+  height: 90vh;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 1fr;
+  grid-gap: 0;
+  overflow: auto;
+}
+
+#content {
+  background: whitesmoke;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  overflow-wrap: break-word;
+}
+
+#footer {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+/*# sourceMappingURL=main.css.map */