Recreated webstie in Dotnet

douwco_website.cpp/static/css/douwco_styling.css

@@ -0,0 +1,167 @@
+@font-face {
+    font-family: righteous;
+    src: url(../font/Righteous-Regular.ttf);
+}
+
+@font-face {
+    font-family: monsterrat_regular;
+    src: url(../font/Montserrat-Regular.ttf);
+}
+
+@font-face {
+    font-family: monsterrat_bold;
+    src: url(../font/Montserrat-Bold.ttf);
+}
+
+
+body {
+    font-family: monsterrat_regular;
+    font-size: 24px;
+    background-color: #283e3e;
+    color: white;
+}
+
+.root_div{
+    display: flex;
+    flex-direction: column;
+}
+.root_div > .side_panel_div{
+    width: 100%;
+}
+
+.title_div{
+    margin-left: 50px;
+    display: flex; 
+    align-items: center;
+    flex-direction: row; 
+    align-content: center;
+}
+.title_div > img {
+    width:150px; 
+    height: 150px;
+    margin-right: 50px;
+}
+.title_div > h1 {
+    font-family: righteous;
+    font-size: 120px;
+}
+
+.apps_title_div {
+    margin-top: 100px;
+}
+.apps_title_div > h2 {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    text-align: center;
+}
+.apps_title_div > hr {
+    height: 6px;
+    width:75%;
+    background-color: white;
+    border-width: 0px;
+    border-radius: 3px;
+    align-self: center;
+}
+
+.app_option_div { 
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin: 25px;
+    border-radius: 25px;
+    background-color: #304b4bFF;
+}
+.app_option_div > img {
+    height: 200px;
+    width: 200px;
+    margin: 25px;
+}
+.app_option_div > div > h3 {
+    font-family: monsterrat_bold;
+    font-size: 36px;
+}
+.app_option_div > div > p {
+    font-family: monsterrat_regular;
+    font-size: 24px;
+}
+.app_option_div > div > p > a {
+    color: #6dde99; 
+    font-family: monsterrat_bold;
+}
+.app_option_div > a {
+    position: absolute;
+    height: 50px;
+    width: 125px;
+    bottom: 25px;
+    right: 25px;
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    border: none;
+    background-color: #6dde99;
+}
+.app_option_div > a > p {
+    font-family: monsterrat_bold;
+    font-size: 18px;
+    width: 100%;
+    color: white;
+    text-align: center;
+}
+
+
+a {
+    font-family: monsterrat_regular;
+    color: white;
+    text-decoration:none;
+    cursor: pointer;
+}
+.menu_option_a {
+    font-family: monsterrat_bold;
+    font-size: 48px;
+    
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+    
+    display: flex; 
+    align-items: center;
+
+    margin-left: 50px; 
+    padding-left: 50px;
+    padding-right: 50px;
+}
+.menu_option_a:hover{
+    background-color: #304b4bFF;;
+}
+.menu_option_a > img {
+    width:100px; 
+    height:75px;
+    margin-right: 50px;
+}
+.menu_option_a > p > span {
+    color: #88d4d4;
+}
+
+
+@media (min-width: 1300px) {
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+    }
+    
+    .root_div{
+        display: flex;
+        flex-direction: row;
+    }
+    .root_div > .side_panel_div{
+        width: 50%;
+    }
+
+    .apps_selection_div {
+        max-height: 75vh;
+        overflow-y: auto;   
+    }
+}