First version of the new layout.

DouwcoWebsite/wwwroot/css/douwco.css

@@ -0,0 +1,37 @@
+@font-face {
+    font-family: righteous;
+    src: url(/fonts/Righteous-Regular.ttf);
+    format('truetype');
+}
+
+@font-face {
+    font-family: monsterrat_regular;
+    src: url(/fonts/Montserrat-Regular.ttf);
+    format('truetype');
+}
+
+@font-face {
+    font-family: monsterrat_bold;
+    src: url(/fonts/Montserrat-Bold.ttf);
+    format('truetype');
+}
+
+:root {
+    --background-clr: #283e3e;
+    --background-accent-clr: #324f4f;
+    --blue-clr: #47bcdf;
+    --green-clr: #6ede9a;
+    --purple-clr: #a48da;
+    --orange-clr: #e2a661;
+    --white-clr: #ffffff;
+}
+
+body {
+    font-family: monsterrat_regular;
+    background-color: var(--background-clr);
+    color: var(--white-clr);;
+}
+
+.title{
+    font-family: righteous;
+}

DouwcoWebsite/wwwroot/css/home.css

@@ -0,0 +1,65 @@
+.container {
+    display: flex;
+}
+
+.left-section {
+    width: 60%;
+}
+
+.logo-section {
+    display: flex;
+    align-items: flex-start;
+    height: 250px;
+}
+
+.logo-section img {
+    width: 250px;
+    margin-left: 50px;
+}
+
+.text-section {
+    margin-left: 50px;
+}
+
+.title {
+    font-size: 128px;
+    margin: 0;
+    line-height: 1;
+    text-wrap: balance;
+}
+
+.tagline {
+    display: flex;
+    font-size: 36px;
+    font-weight: bold;
+    width: 500px;
+}
+
+.tagline .green-text {
+    color: var(--green-clr);
+}
+
+.tagline .normal-text {
+    margin-left: 7px;
+}
+
+.content-box {
+    background-color: var(--background-accent-clr);
+    margin: 50px 20px 20px;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+.content-box p {
+    margin: 0;
+}
+
+.content-box .intro-text {
+    font-weight: bolder;
+    font-size: 28px;
+}
+
+.server-image {
+    width: 500px;
+    height: 500px;
+}

DouwcoWebsite/wwwroot/css/index.css

@@ -0,0 +1,73 @@
+/*  Navigation menu  */
+.hide_header {
+    display: none;
+}
+
+.nav_option {
+    font-family: monsterrat_bold;
+    color: var(--white-clr);
+    text-decoration: none;
+    font-size: 36px;
+
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+
+    display: flex;
+    align-items: center;
+    margin: 10px;
+    padding-right: 10px;
+}
+
+.nav_option:hover{
+    background-color: var(--background-accent-clr);
+}
+
+.nav_option.active {
+    background-color: var(--background-accent-clr);
+}
+
+.nav_option > p > span {
+    color: var(--green-clr);
+}
+
+.logo {
+    height: 100px;
+    vertical-align: middle;
+    padding: 10px;
+}
+
+.icon {
+    height: 45px;
+    vertical-align: middle;
+    padding: 0 20px 0 10px;
+}
+
+/*   Main   */
+
+body{
+    display: flex;
+    flex-direction: column;
+}
+
+main {    
+    flex: 1;
+    margin: 20px;
+}
+
+/*   Footer   */
+footer {
+    flex-shrink: 0;
+    background: var(--background-clr);
+    width: 100%;
+}
+
+
+footer > Div {
+    justify-content: space-between
+}
+
+footer > Div > p {
+    font-size: 16px;
+    margin: 10px 25px 10px 25px;
+}

DouwcoWebsite/wwwroot/css/style.css

@@ -0,0 +1,24 @@
+html, body{
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 25px;
+    scroll-behavior: smooth;
+}
+
+/*  Container types  */
+.vert_container{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.scroll_container {
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+}
+
+.scroll_section {
+    height: 100vh;
+    scroll-snap-align: start;
+}