css layout

sass/global.scss

@@ -0,0 +1,13 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Kanit', sans-serif;
+}
+
+main {
+    margin: 0 var(--container-size);
+}

sass/header.scss

@@ -1,11 +1,27 @@
 nav {
     display: flex;
-    justify-content: center;
-    gap: 1rem;
+    justify-content: space-between;
+    background-color: var(--clr-melon);
+    padding: 1rem var(--container-size);
+
+    .nav-right, .nav-left {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+    }
 
     a {
         text-decoration: none;
         font-size: 1.5rem;
-        color: navy;
+        font-weight: bold;
+        color: var(--clr-murrey);
+    }
+
+    img {
+        height: 2rem;
+    }
+
+    .nav-left img {
+        height: 4rem;
     }
 }

sass/main.scss

@@ -0,0 +1,27 @@
+main {
+    display: flex;
+    section#news {
+        width: 60vw;
+    }
+    aside {
+        width: 40vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 2rem 0;
+
+        a.vstupenky {
+            background-color: orange;
+            width: 80%;
+            padding: 1rem 2rem;
+            color: var(--clr-murrey);
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 3rem;
+            border-color: var(--clr-murrey);
+            border-radius: 15px;
+            border-style: solid;
+            border-width: 3px;
+        }
+    }
+}

sass/vars.scss

@@ -0,0 +1,8 @@
+:root {
+    --clr-blue: #576ca8;
+    --clr-lavender: #d3d2ef;
+    --clr-murrey: #79214c;
+    --clr-blush: #cf6379;
+    --clr-melon: #ffadad;
+    --container-size: 40rem;
+}