added: aside infotable, fixed: nav and others

sass/footer.scss

@@ -1,10 +0,0 @@
-footer {
-    display: flex;
-    justify-content: center;
-    padding: 1rem;
-
-    a {
-        color: blue;
-        text-decoration: none;
-    }
-}

sass/global.scss

@@ -6,6 +6,7 @@
 
 body {
     font-family: 'Kanit', sans-serif;
+    background-color: var(--clr-lavender);
 }
 
 main {

sass/header.scss

@@ -9,7 +9,9 @@ nav {
         align-items: center;
         gap: 2rem;
     }
-
+    .nav-right > a {
+        display: flex;
+    }
     a {
         text-decoration: none;
         font-size: 1.5rem;

sass/main.scss

@@ -1,27 +1,73 @@
 main {
     display: flex;
+    gap: 2rem;
+    margin-top: 2rem;
+
     section#news {
         width: 60vw;
     }
-    aside {
+
+    aside{
         width: 40vw;
         display: flex;
         flex-direction: column;
         align-items: center;
-        margin: 2rem 0;
+        padding: 2rem;
+        background-color: var(--clr-cards);
+        border-radius: 15px;
 
+        section#vstupenky-wrapper {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            margin-bottom: 2rem;
+        }
         a.vstupenky {
-            background-color: orange;
             width: 80%;
+            background-color: orange;
             padding: 1rem 2rem;
             color: var(--clr-murrey);
             text-decoration: none;
             font-weight: bold;
-            font-size: 3rem;
+            font-size: 2rem;
+            text-align: center;
             border-color: var(--clr-murrey);
             border-radius: 15px;
             border-style: solid;
             border-width: 3px;
         }
+
+        .infotable {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        .info-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4rem;
+            color: var(--clr-murrey);
+            text-align: left;
+
+            img {
+                width: 100px;
+            }
+        }
+
+        .info-wrapper:nth-child(even) {
+            flex-direction: row-reverse;
+            text-align: right;
+        }
+    }
+
+    footer {
+        display: flex;
+        justify-content: center;
+        a {
+            color: blue;
+            text-decoration: none;
+        }
     }
 }

sass/vars.scss

@@ -4,5 +4,6 @@
     --clr-murrey: #79214c;
     --clr-blush: #cf6379;
     --clr-melon: #ffadad;
-    --container-size: 40rem;
+    --clr-cards: #e4e3ff;
+    --container-size: 10vw;
 }

templates/base.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="/vars.css">
     <link rel="stylesheet" href="/global.css">
     <link rel="stylesheet" href="/header.css">
-    <link rel="stylesheet" href="/footer.css">
     <link rel="stylesheet" href="/main.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -32,13 +31,15 @@
         <section id="news">
             {% block news %} {% endblock %}
         </section>
-        <aside>
+        <section class="aside-wrapper">
-            <section class="asidebox">
+            <aside>
-                <a href="#" class="vstupenky">VSTUPENKY &gt;&gt;</a>
+                <section id="vstupenky-wrapper">
-                <h1>Na co se můžete těšit?</h1>
+                    <a href="#" class="vstupenky">VSTUPENKY &gt;&gt;</a>
+                </section>
+
                 <section class="infotable">
-                    <div>
+                    <div class="info-wrapper">
-                        <img src="pkmples-web-new-material/ikony/uvod.png" alt="ikonka" />
+                        <img src="/img/uvod.png" alt="ikonka" />
                         <div class="text">
                             <h3>Slavnostní úvod</h3>
                             <p>
@@ -46,17 +47,8 @@
                             </p>
                         </div>
                     </div>
-                    <div>
+                    <div class="info-wrapper">
-                        <img src="pkmples-web-new-material/ikony/fotokoutek.png" alt="ikonka" />
+                        <img src="/img/muzika.png" alt="ikonka" />
-                        <div class="text">
-                            <h3>Fotokoutek</h3>
-                            <p>
-                                Vyblejsknem tě samotnýho nebo s celou partou. A to v našem koutku i na tanečním place!
-                            </p>
-                        </div>
-                    </div>
-                    <div>
-                        <img src="pkmples-web-new-material/ikony/muzika.png" alt="ikonka" />
                         <div class="text">
                             <h3>Kvalitní muzika</h3>
                             <p>
@@ -65,17 +57,8 @@
                             </p>
                         </div>
                     </div>
-                    <div>
+                    <div class="info-wrapper">
-                        <img src="pkmples-web-new-material/ikony/beerpong.png" alt="ikonka" />
+                        <img src="/img/tombola.png" alt="ikonka" />
-                        <div class="text">
-                            <h3>Beer pong</h3>
-                            <p>
-                                Zahraj si o super ceny v týhle obdobě americkýho fenoménu.
-                            </p>
-                        </div>
-                    </div>
-                    <div>
-                        <img src="pkmples-web-new-material/ikony/tombola.png" alt="ikonka" />
                         <div class="text">
                             <h3>Tombola</h3>
                             <p>
@@ -83,8 +66,26 @@
                             </p>
                         </div>
                     </div>
-                    <div>
+                    <div class="info-wrapper">
-                        <img src="pkmples-web-new-material/ikony/prekvapeni.png" alt="ikonka" />
+                        <img src="/img/fotokoutek.png" alt="ikonka" />
+                        <div class="text">
+                            <h3>Fotokoutek</h3>
+                            <p>
+                                Vyblejsknem tě samotnýho nebo s celou partou. A to v našem koutku i na tanečním place!
+                            </p>
+                        </div>
+                    </div>
+                    <div class="info-wrapper">
+                        <img src="/img/beerpong.png" alt="ikonka" />
+                        <div class="text">
+                            <h3>Beer pong</h3>
+                            <p>
+                                Zahraj si o super ceny v týhle obdobě americkýho fenoménu.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="info-wrapper">
+                        <img src="/img/prekvapeni.png" alt="ikonka" />
                         <div class="text">
                             <h3>Půlnoční překvapení</h3>
                             <p>
@@ -92,13 +93,12 @@
                             </p>
                         </div>
                     </div>
-                    </div>
                 </section>
-            </section>
+            </aside>
             <footer>
                 <a href="https://www.fofrweb.com/" target="_blank">Vytvořeno týmem Fofrweb</a>
             </footer>
-        </aside>
+        </section>
     </main>
 </body>