fix conflict

2023-12-01 19:06:23 +01:00 · 2023-12-01 19:06:23 +01:00 · 8c8531c1ca
commit 8c8531c1ca
parent 357a82178e 117b703299
74 changed files with 919 additions and 465 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -0,0 +1,41 @@
+---
+kind: pipeline
+name: default
+
+steps:
+  - name: build
+    image: ghcr.io/getzola/zola:v0.17.2
+    entrypoint: ["/bin/zola"]
+    command: ["build"]
+
+  - name: deploy-master
+    image: drillster/drone-rsync
+    settings:
+      hosts: ["s3.fofrweb.com"]
+      user: drone
+      source: public/*
+      target: /srv/www/cz/pkmples/www/
+      recursive: true
+      delete: true
+    environment:
+      RSYNC_KEY:
+        from_secret: rsync_private_key
+    when:
+      branch:
+        - master
+
+  - name: deploy-dev
+    image: drillster/drone-rsync
+    settings:
+      hosts: ["s3.fofrweb.com"]
+      user: drone
+      source: public/*
+      target: /srv/www/cz/pkmples/dev/
+      recursive: true
+      delete: true
+    environment:
+      RSYNC_KEY:
+        from_secret: rsync_private_key
+    when:
+      branch:
+        - dev
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+public/
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,15 @@
+{
+	"tabWidth": 2,
+	"useTabs": false,
+	"singleQuote": false,
+	"semi": true,
+	"trailingComma": "none",
+	"jsxSingleQuote": false,
+	"jsxBracketSameLine": true,
+	"printWidth": 200,
+	"bracketSpacing": true,
+	"vueIndentScriptAndStyle": true,
+	"arrowParens": "always",
+	"bracketSameLine": false,
+	"endOfLine": "lf"
+}
--- a/README.md
+++ b/README.md
@ -1 +0,0 @@
-# com_pkmples.cz
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,20 @@
+# The URL the site will be built for
+base_url = "https://www.pkmples.cz"
+
+title = "PKM PARTY PLES"
+description = "PKM, kamarádi z Gymnázia Turnov pořádají ples pro studenty v KC Střelnice v Turnově! Ne Maturitní ples GyTu, Maturitní ples OHS, nebo Absolventský ples Gymnázia Turnov, ale PKM PARTY PLES!"
+default_language = "cs"
+
+compile_sass = true
+minify_html = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = false
+
+[extra]
+# Put all your custom variables here
--- a/content/_1_15092023_pozvanka.md
+++ b/content/_1_15092023_pozvanka.md
@ -0,0 +1,9 @@
+++
+title = "Pozvánka na další ročník"
+date = 2023-09-15
+
+[extra]
+author = "Jaroslav Valkoun"
+++
+
+Již nyní pro Vás připravujeme další ročník __PARTY PLESU!__ Zapište si __24. 2. 2024__ do kalendáře, protože už teď víme, že se máte na co těšit. Sledujte nově náš [instagram](https://www.instagram.com/pkm.hub), kde kromě novinek o plesu přidáváme i různé fotky a videa ze zákulisí.
--- a/content/_2_01112023_kapela.md
+++ b/content/_2_01112023_kapela.md
--- a/content/_3_04112023_filler1.md
+++ b/content/_3_04112023_filler1.md
--- a/content/_4_11112023_nataceni1.md
+++ b/content/_4_11112023_nataceni1.md
@ -0,0 +1,11 @@
+++
+title = "Nová videa jsou už na cestě!"
+date = 2023-11-11
+
+[extra]
+author = "Jaroslav Valkoun"
+++
+
+Nějákou fotku hodíme i exkluzivně sem na web, ale nezapomeň sledovat náš [instagram](https://www.instagram.com/pkm.hub), kde toho je mnohem víc!
+<br>
+<img src="/img/posts/pkm_nataceni_1.jpg" alt="pkm nataceni">
--- a/content/_5_17112023_filler2.md
+++ b/content/_5_17112023_filler2.md
--- a/content/_6_28112023_filler3.md
+++ b/content/_6_28112023_filler3.md
--- a/content/_7_30112023_oldvideos.md
+++ b/content/_7_30112023_oldvideos.md
@ -0,0 +1,11 @@
+++
+title = "Promo videa z minulého roku!"
+date = 2023-11-30
+
+[extra]
+author = "Jaroslav Valkoun"
+++
+
+Připomeňte si promo videa z minulého roku! Na kanále najdete všechny 4, co říkáte na náhledovky? :D
+<br>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/cmnqp2M_21Q?si=rzZ4skoIBs7i6Cg7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
--- a/content/_8_01122023_vstupenky.md
+++ b/content/_8_01122023_vstupenky.md
@ -0,0 +1,12 @@
+++
+title = "Předprodej vstupenek spuštěn!"
+date = 2023-12-01
+
+[extra]
+author = "Jaroslav Valkoun"
+pinned = true
+++
+
+Vstupenky nyní můžete koupit [ZDE](https://www.kulturaturnov.cz/program/pkm-party-ples-2024) v předprodeji na stránkách KC Turnov!
+<br>
+<img src="/img/posts/party_ples_2024_plakat.jpg" alt="pkm plakat 2024">
--- a/content/_index.md
+++ b/content/_index.md
@ -0,0 +1,5 @@
+++
+title = "List of blog posts"
+sort_by = "date"
+template = "news.html"
+++
--- a/css/styles.css
+++ b/css/styles.css
@ -1,268 +0,0 @@
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  font-family: "Kanit", sans-serif;
-}
-
-:root {
-  --clrBlue: #444b64;
-  --clrRed: #d65343;
-  --clrGreen: #90a9a1;
-  --clrGrey400: #e2ba84;
-  --clrGrey200: #f2dfc7;
-}
-
-body,
-html {
-  height: 100%;
-}
-body {
-  background-color: var(--clrGrey200);
-  display: flex;
-  flex-direction: column;
-  color: var(--clrBlue);
-}
-
-h1 {
-  color: var(--clrRed);
-}
-
-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-block: 1rem;
-  position: relative;
-}
-
-header::before {
-  content: "";
-  position: absolute;
-  inset: 2rem 0 2rem 0;
-  background-color: var(--clrGreen);
-  z-index: -1;
-}
-
-header img {
-  width: 100%;
-  height: 80px;
-  object-fit: contain;
-}
-
-a {
-  cursor: pointer;
-  font: inherit;
-  text-decoration: none;
-  font-size: 1rem;
-}
-
-a span {
-  font-size: 0.8rem !important;
-  transition: 300ms ease;
-}
-a:hover span {
-  transform: translateX(0.2rem);
-}
-
-.party__ples {
-  text-align: center;
-  margin-top: 4rem;
-}
-
-.party__ples img {
-  height: 6rem;
-}
-
-.hero__button {
-  padding: 0.5rem 1rem;
-  border: 3px solid var(--clrBlue);
-  font-weight: 800;
-  color: var(--clrRed);
-  border-radius: 5px;
-  background-color: var(--clrGrey400);
-  text-transform: uppercase;
-  font-size: 1.2rem;
-  width: fit-content;
-  margin: 4rem auto;
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-
-.hero__button img {
-  position: absolute;
-  height: 4rem;
-}
-
-.hero__button .doprava {
-  left: -1rem;
-  top: 50%;
-  transform: translate(-100%) translateY(-50%) rotate(10deg);
-  height: 3rem;
-  animation: p 1s linear infinite alternate-reverse;
-}
-
-@keyframes p {
-  from {
-    transform: translate(-90%) translateY(-50%) rotate(10deg);
-  }
-  to {
-    transform: translate(-100%) translateY(-50%) rotate(10deg);
-  }
-}
-
-.hero__button .doleva {
-  right: -1rem;
-  top: 50%;
-  animation: l 1s linear infinite alternate-reverse;
-}
-
-@keyframes l {
-  from {
-    transform: translate(90%) translateY(-50%);
-  }
-  to {
-    transform: translate(100%) translateY(-50%);
-  }
-}
-
-@media (max-width: 510px) {
-  header::before {
-    inset: 2.7rem 0 2.7rem 0;
-  }
-}
-
-.cenik__img {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 1rem;
-}
-
-.cenik__img img {
-  max-width: 100%;
-  width: 30rem;
-  object-fit: contain;
-}
-.cenik {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--clrRed);
-  width: 30rem;
-  padding-inline: 1rem;
-  color: var(--clrRed);
-  border-radius: 10px;
-}
-
-.cenik div {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  justify-content: space-between;
-  padding-block: 1rem;
-  position: relative;
-}
-
-.cenik div p {
-  display: grid;
-  text-align: right;
-  gap: 0.3rem;
-  font-weight: 600;
-  width: min(190px, 100%);
-}
-
-.cenik div p:last-child {
-  font-weight: 800;
-  font-size: 1.2em;
-}
-
-.cenik div + div {
-  border-top: 1px solid var(--clrRed);
-}
-
-.cenik div p span {
-  color: var(--clrBlue);
-  font-size: 0.9em;
-}
-
-@media (max-width: 400px) {
-  .cenik div {
-    font-size: 14px;
-  }
-}
-
-.video__section {
-  background-color: var(--clrGrey400);
-  display: grid;
-  place-items: center;
-  padding: 1rem;
-}
-
-iframe {
-  border-radius: 5px;
-  aspect-ratio: 16/9;
-  width: min(560px, 100%);
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 3rem;
-  gap: 3rem;
-  padding: 1rem;
-}
-.info__table {
-  display: grid;
-
-  gap: 2rem;
-}
-
-@media (min-width: 963px) {
-  .info__table {
-    grid-template-columns: repeat(2, 450px);
-  }
-}
-
-@media (max-width: 963px) {
-  .info__table {
-    max-width: 600px;
-  }
-}
-
-@media (max-width: 403px) {
-  .party__ples img {
-    height: 5rem;
-  }
-}
-
-.info__table h3 {
-  color: var(--clrRed);
-}
-
-.info__table > * {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-}
-
-.info__table img {
-  height: 4rem;
-}
-
-.plakat {
-  max-width: calc(100% - 2rem);
-  width: 30rem;
-  margin: 4rem auto;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
-    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
-}
-
-footer {
-  text-align: center;
-  padding: 5rem 1rem 2rem 1rem;
-}
--- a/img/favicon-16x16.png
+++ b/img/favicon-16x16.png
--- a/img/polaroid-thanks-web-750.png
+++ b/img/polaroid-thanks-web-750.png
--- a/img/polaroid-web-750-new.png
+++ b/img/polaroid-web-750-new.png
--- a/img/polaroid-web-750.png
+++ b/img/polaroid-web-750.png
--- a/img/pruh-web-1500-new.png
+++ b/img/pruh-web-1500-new.png
--- a/img/pruh-web-1500.png
+++ b/img/pruh-web-1500.png
--- a/index.html
+++ b/index.html
@ -1,193 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0"
-    />
-    <meta id="contentLanguage" http-equiv="Content-Language" content="cs_CZ" />
-    <meta
-      name="keywords"
-      content="pkm, pkm ples, pkm party ples, pkm party ples 2023, gytu pkm, gytu ples, gytuples, absolvenťák, absolventský ples, absolventský ples gytu, gytu absolventský ples, maturitní ples 8. A gytu, maturitní ples 4. C gytu, pavel mlejnek, pavel mlejnek ples, jarda valkoun, jarda valkoun ples, filip janeček, filip janeček ples, maturitní ples OHS, maturitní ples SUPŠ, maturitní ples VOŠ turnov, maturitní ples SUPŠ a VOŠ turnov špéra, maturitní ples špéra, ples pro studenty, studentský ples, malé divy, nadační fond malé divy, ples, bigband zuš turnov, bigband turnov, bigband turnov ples, kc turnov ples, kc turnov pkm ples, kc turnov pkm party ples, kc turnov pkm party ples 2023, turnov střelnice ples, střelnice pkm ples, střelnice pkm party ples, střelnice ples, střelnice pkm, kc střelnice ples, kc střelnice pkm party ples, kc střelnice ples, kc střelnice pkm, kc střelnice, kc turnov, kc střelnice"
-    />
-    <meta
-      name="description"
-      content="PKM, kamarádi z Gymnázia Turnov pořádají ples pro studenty v KC Střelnice v Turnově! Ne Maturitní ples GyTu, Maturitní ples OHS, nebo Absolventský ples Gymnázia Turnov, ale PKM PARTY PLES!"
-    />
-    <meta property="og:locale" content="cs_CZ" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="PKM PARTY PLES" />
-    <meta
-      property="og:description"
-      content="PKM, kamarádi z Gymnázia Turnov pořádají ples pro studenty v KC Střelnice v Turnově! Ne Maturitní ples GyTu, Maturitní ples OHS, nebo Absolventský ples Gymnázia Turnov, ale PKM PARTY PLES!"
-    />
-    <meta property="og:site_name" content="pkmples.cz" />
-    <meta name="author" content="Fofrweb | https://fofrweb.com" />
-    <meta name="email" content="webmaster(@)fofrweb.com" />
-    <meta name="copyright" content="(c) pkmples.cz" />
-    <meta name="expires" content="never" />
-    <meta name="robots" content="index,follow" />
-    <meta name="Seznambot" content="index,follow" />
-    <meta name="Googlebot" content="index,follow" />
-    <meta
-      name="google-site-verification"
-      content="95ajJo4LsoVNgG60HxS8CVzmIFHoj3w2NQ-H-YyijIw"
-    />
-    <title>PKM PARTY PLES</title>
-    <link rel="canonical" href="https://www.pkmples.cz/" />
-    <link rel="stylesheet" href="/css/styles.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;800&display=swap"
-      rel="stylesheet"
-    />
-	<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
-	<link rel="icon" type="image/png" sizes="16x16" href="new-favicon/favicon-16x16.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="new-favicon/favicon-32x32.png">
-	<link rel="apple-touch-icon" href="new-favicon/apple-touch-icon.png">
-	<link rel="icon" sizes="192x192" href="new-favicon/android-chrome-192x192.png">
-	<link rel="icon" sizes="512x512" href="new-favicon/android-chrome-512x512.png">
-</head>
-  <body>
-    <header>
-      <img
-        src="pkmples-web-new-material/header/pruh-medium.png"
-        alt="pkm pruh"
-      />
-    </header>
-    <section class="party__ples">
-      <img
-        src="pkmples-web-new-material/header/party-ples-medium.png"
-        alt="party-ples-large"
-      />
-    </section>
-	<section class="party__thanks" style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; margin: 100px 25px 50px 25px">
-		<p style="max-width: 500px; text-align: center" >Již nyní pro Vás připravujeme další ročník <b>PARTY PLESU!</b> Zapište si <b>24. 2. 2024</b> do kalendáře, protože už teď víme, že se máte na co těšit.</p>
-		<p style="max-width: 500px; text-align: center">Sledujte nově náš <a href="https://www.instagram.com/pkm.hub" target="_blank" style="color: var(--clrRed); text-decoration: underline">instagram</a>, kde kromě novinek o plesu přidáváme i různé fotky a videa ze zákulisí.</p>
-	</section>
-
-	<section class="party__links">
-		<a
-			class="hero__button"
-			href="https://photos.app.goo.gl/Ff62vodzyRFNrMsY7"
-			target="_blank"
-			style="margin: 1rem auto;"
-		>
-			FOTKY Z FOTOKOUTKU
-			<span class="material-icons">
-				double_arrow
-			</span>
-		</a>
-		<a
-			class="hero__button"
-			href="https://photos.app.goo.gl/DdxK5VqvjAWkavSK6"
-			target="_blank"
-			style="margin: 1rem auto;"
-		>
-			FOTKY Z PARKETU
-			<span class="material-icons">
-				double_arrow
-			</span>
-		</a>
-	</section>
-    <section class="cenik__img">
-      <img
-        src="/img/polaroid-thanks-web-750.png"
-        alt="polaroid-web"
-      />
-    </section>
-    <a
-      class="hero__button"
-      href="https://www.facebook.com/events/823114292589147/?active_tab=discussion"
-      target="_blank"
-    >
-      Facebook Událost
-	  <span class="material-icons">
-		double_arrow
-		</span>
-    </a>
-    <section class="video__section">
-      <iframe
-        class="video"
-        height="315"
-        src="https://www.youtube.com/embed/YXbvzCNCBt0"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen
-      ></iframe>
-    </section>
-    <section class="info">
-      <h1>Na co se můžete těšit?</h1>
-      <div class="info__table">
-        <div>
-          <img src="pkmples-web-new-material/ikony/uvod.png" alt="ikonka" />
-          <div class="text">
-            <h3>Slavnostní úvod</h3>
-            <p>
-				Na rozehřátí ti něco pěknýho řeknem a možná se dočkáš i nějakýho toho videjka.
-            </p>
-          </div>
-        </div>
-        <div>
-          <img
-            src="pkmples-web-new-material/ikony/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>
-          <img src="pkmples-web-new-material/ikony/muzika.png" alt="ikonka" />
-          <div class="text">
-            <h3>Kvalitní muzika</h3>
-            <p>
-				“Proč nehrají, preceptore?” na našem plese rozhodně neuslyšíš. Zahraje nám BigBand ZUŠ Turnov, kterej do toho umí hrábnout.
-            </p>
-          </div>
-        </div>
-        <div>
-          <img src="pkmples-web-new-material/ikony/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>
-          <img src="pkmples-web-new-material/ikony/tombola.png" alt="ikonka" />
-          <div class="text">
-            <h3>Tombola</h3>
-            <p>
-				Už teď ty ceny nemáme kam dávat. Tak nám přijď pomoct a nějakou si odnes domů!
-            </p>
-          </div>
-        </div>
-        <div>
-          <img
-            src="pkmples-web-new-material/ikony/prekvapeni.png"
-            alt="ikonka"
-          />
-          <div class="text">
-            <h3>Půlnoční překvapení</h3>
-            <p>
-				No, máš se prostě na co těšit. Bude to velký! Co? To už by přece nebylo překvápko.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-    <h3 style="color: var(--clrRed); text-align: center; margin-top: 2rem;">a více...</h3>
-	<img src="pkmples-web-new-material/plakat/pkmples-plakat-new-web-large.png" alt="pkmples-plakat-new-web-large" class="plakat">
-	<footer><a href="https://www.fofrweb.com/" target="_blank">Vytvořeno týmem Fofrweb</a></footer>
-  </body>
-</html>
-
--- a/new-favicon/android-chrome-512x512.png
+++ b/new-favicon/android-chrome-512x512.png
--- a/new-favicon/apple-touch-icon.png
+++ b/new-favicon/apple-touch-icon.png
--- a/new-favicon/favicon-16x16.png
+++ b/new-favicon/favicon-16x16.png
--- a/new-favicon/favicon-32x32.png
+++ b/new-favicon/favicon-32x32.png
--- a/new-favicon/favicon.ico
+++ b/new-favicon/favicon.ico
--- a/new-favicon/site.webmanifest
+++ b/new-favicon/site.webmanifest
@ -1 +0,0 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/pkmples-web-new-material/header/party-ples-large.png
+++ b/pkmples-web-new-material/header/party-ples-large.png
--- a/pkmples-web-new-material/header/party-ples-medium.png
+++ b/pkmples-web-new-material/header/party-ples-medium.png
--- a/pkmples-web-new-material/header/pruh-large.png
+++ b/pkmples-web-new-material/header/pruh-large.png
--- a/pkmples-web-new-material/header/pruh-medium.png
+++ b/pkmples-web-new-material/header/pruh-medium.png
--- a/pkmples-web-new-material/plakat/pkmples-plakat-new-web-large.png
+++ b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-large.png
--- a/pkmples-web-new-material/plakat/pkmples-plakat-new-web-medium.png
+++ b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-medium.png
--- a/pkmples-web-new-material/plakat/pkmples-plakat-new-web-small.png
+++ b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-small.png
--- a/pkmples-web-new-material/polaroid/polaroid-web-1000-new.png
+++ b/pkmples-web-new-material/polaroid/polaroid-web-1000-new.png
--- a/pkmples-web-new-material/polaroid/polaroid-web-1500-new.png
+++ b/pkmples-web-new-material/polaroid/polaroid-web-1500-new.png
--- a/pkmples-web-new-material/polaroid/polaroid-web-2500-new.png
+++ b/pkmples-web-new-material/polaroid/polaroid-web-2500-new.png
--- a/pkmples-web-new-material/polaroid/polaroid-web-750-new.png
+++ b/pkmples-web-new-material/polaroid/polaroid-web-750-new.png
--- a/robots.txt
+++ b/robots.txt
@ -1,2 +0,0 @@
-User-Agent: *
-Allow: /
--- a/sass/global.scss
+++ b/sass/global.scss
@ -0,0 +1,33 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Kanit', sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  color: var(--clr-Murrey);
+  background-color: var(--clr-Lavender);
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin: .5rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 300;
+  a, p {
+    color: var(--clr-Murrey);
+  }
+}
+
+.footer-mobile {
+  display: none;
+  margin: 0 var(--container-size);
+}
+
--- a/sass/header.scss
+++ b/sass/header.scss
@ -0,0 +1,38 @@
+nav {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--clr-Melon);
+  padding: 1rem var(--container-size);
+  font-family: 'coolvetica';
+
+  .nav-right, .nav-left {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-right > a {
+    display: flex;
+  }
+
+  .nav-btn {
+    display: none;
+  }
+
+  a {
+    text-decoration: none;
+    font-size: 1.5rem;
+    font-weight: 700;
+    font-size: normal;
+    color: var(--clr-Murrey);
+  }
+
+  img {
+    height: 2rem;
+  }
+
+  .nav-left img {
+    height: 4rem;
+  }
+}
+
--- a/sass/main.scss
+++ b/sass/main.scss
@ -0,0 +1,86 @@
+main {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding: 0 var(--container-size);
+
+  .aside-wrapper {
+      min-width: 20vw;
+  }
+
+  aside{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    background-color: var(--clr-LavenderLight);
+    border-radius: 15px;
+    top: 0;
+
+    section#vstupenky-wrapper {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+
+    a.vstupenky {
+      width: 80%;
+      background-color: var(--clr-Melon);
+      padding: 1rem 2rem;
+      color: var(--clr-Murrey);
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 2rem;
+      text-align: center;
+      border-color: var(--clr-Murrey);
+      border-radius: 15px;
+      border-style: solid;
+      border-width: 3px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .vstupenky:hover span{
+      transform: translateX(0.5rem);
+    }
+    .vstupenky span {
+      transition: 300ms ease;
+    }
+    .infotable {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    .info-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2rem;
+      color: var(--clr-Murrey);
+      text-align: left;
+
+      .text {
+        h3 {
+          font-weight: 900;
+        }
+
+        p {
+          font-weight: 500;
+        }
+      }
+
+      img {
+        width: 100px;
+      }
+    }
+
+    .info-wrapper:nth-child(even) {
+      flex-direction: row-reverse;
+      text-align: right;
+    }
+  }
+}
+
--- a/sass/news.scss
+++ b/sass/news.scss
@ -0,0 +1,42 @@
+.news-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: var(--clr-Murrey);
+
+  .news-card {
+    position: relative;
+    background-color: var(--clr-LavenderLight);
+    border-radius: 1rem;
+    padding: 1rem;
+    .pin-img {
+      width: 1rem;
+      position: absolute;
+      right: 1rem;
+      display: none;
+    } 
+    h3 {
+      font-family: "coolveltica", sans-serif;
+      font-weight: 900;
+      font-style: normal;
+    }
+    .date {
+      margin-bottom: 1rem;
+    }
+  }
+  .pinned {
+    order: -1;
+  }
+  .pinned .pin-img {
+    display: block;
+  }
+  iframe.video {
+    aspect-ratio: 16/9;
+  }
+  .instagram-media, img:not(.pin-img), iframe.video {
+    border-radius: 15px !important;
+  	width: 100% !important;
+  	max-width: none !important;
+  	min-width: 0 !important;
+  }
+}
--- a/sass/responsivity.scss
+++ b/sass/responsivity.scss
@ -0,0 +1,124 @@
+@media only screen and (min-width: 0px) and (max-width: 954px) {
+  nav {
+    flex-wrap: wrap;
+  }
+  .nav-right {
+    display: none !important;
+  }
+  .mobile-visible {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    gap: 0rem !important;
+  }
+  .mobile-visible > *:first-child{
+    border-top: 1px solid var(--clr-Murrey);
+
+  }
+  .mobile-visible > * {
+    display: grid;
+    place-content: center;
+    width: 100%;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--clr-Murrey);
+  }
+
+  .nav-btn {
+    display: flex !important;
+    align-items: center;
+
+    img {
+      height: 3rem;
+      cursor: pointer;
+    }
+  }
+
+  .vstupenky {
+    font-size: 1.5rem !important;
+    width: 70vw !important;
+  }
+  main {
+    flex-direction: column;
+    align-items: center;
+  }
+  main aside .info-wrapper img {
+    width: 50px;
+  }
+  .aside-wrapper {
+    order: -1;
+  }
+  .info-wrapper {
+    gap: 1rem !important;
+  }
+
+  footer:not(.footer-mobile) {
+    display: none !important;
+  }
+  .footer-mobile {
+    display: flex !important; 
+  }
+}
+
+@media only screen and (min-width: 955px) and (max-width: 1090px) {
+.vstupenky {
+    font-size: 1.5rem !important;
+  }
+  main {
+      flex-direction: column;
+      align-items: center;
+  }
+  .aside-wrapper {
+    order: -1;
+  }
+  .info-wrapper {
+    gap: 1rem !important;
+  }
+  :root {
+    --container-size: 20vw;
+  }
+  footer:not(.footer-mobile) {
+    display: none !important;
+  }
+  .footer-mobile {
+    display: flex !important; 
+  }
+}
+
+@media only screen and (min-width: 1091px) and (max-width: 1499px) {
+  :root {
+    --container-size: 10vw;
+  }
+  .aside-wrapper {
+    min-width: 40vw !important;
+  }
+  .news-wrapper {
+    max-width: 50vw !important;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1500px) and (max-width: 1999px) {
+  :root {
+    --container-size: 15vw;
+  }
+  .aside-wrapper {
+    min-width: 35vw !important;
+  }
+  .news-wrapper {
+    max-width: 50vw !important;
+  }
+}
+
+@media only screen and (min-width: 2000px) {
+  :root {
+    --container-size: 25vw;
+  }
+  .aside-wrapper {
+    min-width: 25vw !important;
+  }
+  .news-wrapper {
+    max-width: 50vw !important;
+  }
+}
+
--- a/sass/vars.scss
+++ b/sass/vars.scss
@ -0,0 +1,50 @@
+:root {
+    --clr-TrueBlue: #576ca8; /* TrueBlue */
+    --clr-TrueBlueDark: #444B64;
+    --clr-Lavender: #d3d2ef;
+    --clr-LavenderLight: #E3E2F7;
+    --clr-Murrey: #792a4c;
+    --clr-Blush: #cf6379;
+    --clr-Melon: #ffadad;
+    --clr-cards: #e4e3ff;
+    --container-size: 5vw;
+}
+
+
+/*
+
+TrueBlue - 576CA8H
+TrueBlueDarker - 444B64
+Lavender - D3D2EF
+LavenderLighter - E3E2F7
+Murrey - 792A4C
+Blush - CF6379
+Melon - FFADAD
+
+Coolvetica Light
+font-family: "coolvetica", sans-serif;
+font-weight: 300;
+font-style: normal;
+
+Coolvetica Book
+font-family: "coolvetica", sans-serif;
+font-weight: 400;
+font-style: normal;
+
+Coolvetica Regular
+font-family: "coolvetica", sans-serif;
+font-weight: 500;
+font-style: normal;
+
+Coolvetica Bold
+font-family: "coolvetica", sans-serif;
+font-weight: 700;
+font-style: normal;
+
+Coolvetica Heavy
+font-family: "coolvetica", sans-serif;
+font-weight: 900;
+font-style: normal;
+use.typekit.net
+
+*/
--- a/pkmples-web-new-material/ikony/beerpong.png
+++ b/pkmples-web-new-material/ikony/beerpong.png
--- a/pkmples-web-new-material/ikony/doleva.png
+++ b/pkmples-web-new-material/ikony/doleva.png
--- a/pkmples-web-new-material/ikony/doprava.png
+++ b/pkmples-web-new-material/ikony/doprava.png
--- a/new-favicon/android-chrome-192x192.png
+++ b/new-favicon/android-chrome-192x192.png
--- a/pkmples-web-new-material/ikony/fotokoutek.png
+++ b/pkmples-web-new-material/ikony/fotokoutek.png
--- a/pkmples-web-new-material/ikony/muzika.png
+++ b/pkmples-web-new-material/ikony/muzika.png
--- a/static/img/pkmples_logo.png
+++ b/static/img/pkmples_logo.png
--- a/static/img/posts/party_ples_2024_plakat.jpg
+++ b/static/img/posts/party_ples_2024_plakat.jpg
--- a/static/img/posts/pkm_nataceni_1.jpg
+++ b/static/img/posts/pkm_nataceni_1.jpg
--- a/pkmples-web-new-material/ikony/prekvapeni.png
+++ b/pkmples-web-new-material/ikony/prekvapeni.png
--- a/pkmples-web-new-material/ikony/tombola.png
+++ b/pkmples-web-new-material/ikony/tombola.png
--- a/pkmples-web-new-material/ikony/uvod.png
+++ b/pkmples-web-new-material/ikony/uvod.png
--- a/static/svg/dancing.svg
+++ b/static/svg/dancing.svg
@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#444B64;}
+</style>
+<path class="st0" d="M89,88.6c-1.1,0.3-2.2,0.6-3.3,1c-0.1,0-0.2,0.3-0.2,0.5c0.2,2.5,0.3,5,0.5,7.6c0.1,0.9,0.1,1.8,0.2,2.5
+	c-1.2-1.2-2.6-2.4-3.9-3.7c-2.2-2.2-4.3-4.4-6.4-6.6c-0.3-0.3-0.5-0.7-0.5-1.1c-0.2-4-0.3-8-0.6-12c-0.4-4.7-0.7-9.4-0.6-14.1
+	c0.1-5.1,0.4-10.1,1.1-15.1c0.1-0.6-0.2-0.8-0.6-1.2C70.4,42.6,66.5,38.5,63,34c-4.5-5.6-8.3-11.7-11.6-18.1c-0.2-0.4-0.2-0.7,0-1.1
+	c0.3-0.7,0.6-1.4,0.8-2.1c0.4-1.8-0.3-3.3-1.4-4.6c-0.2-0.3-0.5-0.5-0.7-0.8c1.2-2.2,4.3-3,6.5-1.8c1,0.6,1.8,1.3,2.2,2.4
+	c3.4,7.6,7.8,14.5,13,21c3.9,4.8,8.3,9.2,13.3,12.9c0.9,0.7,2.1,1.1,3.3,1.5c2.8,0.9,5.7,1.7,8.5,2.4c1.4,0.4,2.5,1.1,3.4,2.2
+	c4.4,5.7,8.7,11.5,13.1,17.2c2.1,2.8,1,6.6-2.3,7.8c-6.6,2.4-13.3,4.8-19.9,7.1c-1,0.3-2,0.7-3,0.7c-2.9,0.2-4.3-1.7-4.8-4
+	c-0.5-2.5,1.2-4.5,3-5.2c4.9-1.8,9.7-3.7,14.5-5.5c0.1-0.1,0.3-0.1,0.5-0.2c-1.7-2.2-3.3-4.3-5-6.6c0,0.4-0.1,0.7-0.1,0.9
+	c0,1.7-0.1,3.4-0.1,5.1c0,0.4-0.1,0.5-0.5,0.6c-3.3,1.3-6.7,2.5-10,3.8c-2.5,1-4,2.8-4.4,5.4c-0.4,2.6,0.5,4.9,2.6,6.6
+	c2,1.5,4.3,1.5,6.6,0.7c2.1-0.7,4.2-1.5,6.3-2.2c0.1,0,0.3-0.1,0.5-0.2c0.1,0.3,0.1,0.6,0.2,0.9c1.5,7.7,4,15.1,7,22.3
+	c3.4,8.3,7.6,16.2,12.5,23.7c2,3.1,4,6.2,6,9.4c1.4,2.3,0.9,5.2-1.2,6.7c-2.4,1.7-5.6,1.1-7.2-1.4c-1.5-2.3-3-4.7-4.5-7.1
+	c-2.5-4-5-7.9-7.3-11.9c-3.9-6.8-7.1-13.8-9.7-21.2c-1.5-4.2-2.7-8.4-4.1-12.6C89,88.8,89,88.7,89,88.6z"/>
+<path class="st0" d="M31.1,117.6c1.1-2.8,2.2-5.6,3.1-8.4c1.7-5,3.1-10.2,3.9-15.4c0.4-2.8,0.7-5.6,1.1-8.4c0-0.2,0.3-0.4,0.4-0.4
+	c3.7-1.1,7.4-2.2,11.1-3.3c3.7-1.1,7.5-2.2,11.2-3.3c0.4-0.1,0.6-0.1,0.9,0.2c3.2,3.6,6.4,7.2,9.7,10.7c3.2,3.4,6.4,6.7,9.7,10
+	c1.9,2,3.8,4,5.8,5.9c-4.2,7.5-10.7,12.3-18.6,15.3c0,0.1,0,0.2,0.1,0.4c2.2,5.3,4.8,10.4,8,15.1c0.2,0.3,0.5,0.7,0.7,1
+	c1.6,2.3,1.2,5.4-1.1,7c-2.3,1.7-5.4,1.1-7.1-1.2c-2.8-3.9-5.2-8-7.2-12.3c-1.1-2.4-2.1-4.8-3.2-7.2c-0.1-0.2-0.3-0.4-0.4-0.3
+	c-1.6,0.1-3.2,0.3-4.8,0.5c-0.1,0-0.1,0-0.2,0.1c0.1,1.4,0.2,2.7,0.4,4.1c0.4,3.6,0.8,7.1,1.3,10.7c0.1,1,0.3,2,0,3.1
+	c-0.6,2.4-2.7,3.9-5.2,3.7c-2.3-0.2-4.3-2-4.6-4.3c-0.4-2.9-0.8-5.8-1.1-8.6c-0.3-2.9-0.6-5.8-0.9-8.7c0-0.4-0.2-0.5-0.5-0.6
+	c-4.3-0.8-8.4-2.4-12.1-4.9C31.4,117.8,31.3,117.7,31.1,117.6C31.2,117.6,31.1,117.6,31.1,117.6z"/>
+<path class="st0" d="M57.9,69.1c-0.3-1.5-0.6-2.9-0.8-4.3c-0.1,0-0.1,0-0.2,0c-0.2,0.7-0.5,1.5-0.7,2.2c-0.1,0.4-0.3,0.6-0.7,0.8
+	c-5.3,1.6-10.6,3.2-15.9,4.8c-0.1,0-0.2,0.1-0.4,0.1c-0.1-0.6-0.1-1.2-0.2-1.7c-0.2-4.4,0.6-8.6,2.3-12.7c0.2-0.4,0.1-0.6-0.2-0.9
+	C33.8,51.8,28.8,44.8,26.3,36c-0.4-1.3-0.1-2.4,0.6-3.5C32.2,25,37.5,17.4,42.8,9.9c1.3-1.9,3.4-2.4,5.3-1.4c1.9,1,2.7,3.1,1.7,5
+	C49,14.9,48,16.4,47,17.7C43,23.5,39,29.3,34.9,35c-0.3,0.4-0.4,0.8-0.2,1.3c1.9,4.9,4.7,9.1,8.5,12.6c0.7,0.7,1.6,1.1,2.5,1.1
+	c2.1,0,4.1,0.5,6.2,0.8c2.6,0.4,5.2,0.9,7.8,1.4c1.9,0.3,3.1,1.5,3.5,3.4c1,5.1,2,10.2,3,15.3c0.5,2.5-0.6,4.3-3.1,5
+	c-7.8,2.3-15.6,4.6-23.4,6.9c-1,0.3-2.1,0.6-3.1,0.9c-2.2,0.6-4.4-0.5-5.1-2.6c-0.7-2.2,0.5-4.4,2.8-5.1c5-1.5,9.9-2.9,14.9-4.4
+	c2.7-0.8,5.4-1.6,8.1-2.4C57.6,69.2,57.7,69.1,57.9,69.1z"/>
+<path class="st0" d="M78.1,30.1c-0.1-5.5,4.3-10.2,10-10.1c5.6,0,10,4.5,10,10.3c0,5.6-4.5,10-10,10.1C82.5,40.3,78,35.6,78.1,30.1z
+	"/>
+<path class="st0" d="M49.7,30c6-2,10.9,2.2,11.4,6.8c0.7,5.2-2.9,9.7-7.8,10c-2.9,0.2-5.4-0.8-7.2-3.1c-1.9-2.2-2.3-4.8-1.7-7.7
+	c-1.7-0.1-3-0.8-3.9-2.2c-0.7-1-1-2-0.9-3.2c0.2-2.7,2-4.5,4.7-4.8C46.3,25.8,48.9,26.9,49.7,30z"/>
+<path class="st0" d="M87,110.3c0.1,0.9,0.2,1.7,0.3,2.5c0.4,2.9,0.7,5.8,1.1,8.7c0.5,3.7,1.1,7.4,1.8,11.1c0.4,2.1,0.9,4.3,1.3,6.4
+	c0.5,2.6-1.1,5.2-3.6,5.8c-2.6,0.7-5.3-0.8-6-3.4c-0.6-2.2-1-4.4-1.4-6.6c-0.7-3.9-1.3-7.9-2-11.9c-0.2-1.3-0.3-2.7-0.5-4
+	c-0.1-0.4,0.1-0.6,0.4-0.8c2-1.3,3.9-2.6,5.5-4.2c1-1,1.8-2.1,2.7-3.1C86.7,110.7,86.8,110.5,87,110.3z"/>
+</svg>
--- a/static/svg/facebook.svg
+++ b/static/svg/facebook.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#792A4C;}
+</style>
+<path class="st0" d="M86.3,140V83.1h19l3.6-23.5H86.3V44.3c0-6.4,3.2-12.7,13.3-12.7h10.3v-20c0,0-9.3-1.6-18.2-1.6
+	C73,10,60.9,21.3,60.9,41.7v17.9H40.2v23.5h20.7V140H86.3z"/>
+</svg>
--- a/static/svg/fotokoutek.svg
+++ b/static/svg/fotokoutek.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#444B64;}
+</style>
+<path class="st0" d="M26.5,41.4c0-0.6,0-1.3,0-2c0.1-2.1,1.2-3.3,3.3-3.4c4.3-0.1,8.5-0.1,12.8,0c2.5,0.1,3,1.2,3.4,5.6
+	c3.1,0,6.3,0.1,9.5-0.1c0.5,0,1.1-0.7,1.4-1.3c1.7-2.7,3.4-5.4,4.9-8.2c1-1.8,2.4-2.6,4.4-2.6c5.9,0.1,11.9,0.1,17.8,0
+	c2.1,0,3.4,0.8,4.4,2.6c1.5,2.7,3.2,5.3,4.7,8.1c0.6,1.2,1.4,1.5,2.7,1.5c9.3-0.1,18.6,0,27.9,0c6.5,0,9.9,3.4,9.9,9.8
+	c0,19.7,0,39.5,0,59.2c0,6.5-3.3,9.8-9.9,9.8c-32.5,0-64.9,0-97.4,0c-6.6,0-9.9-3.3-9.9-10.1c0-19.1,0-38.2,0-57.4
+	C16.5,45,18.4,42.7,26.5,41.4z M75,105.3c13.4,0,24.3-10.8,24.2-24.2c0-13.4-10.9-24.3-24.3-24.3c-13.3,0-24.2,10.9-24.2,24.3
+	C50.7,94.5,61.6,105.3,75,105.3z M114.4,52.5c-1.7,0-3.5,0-5.2,0c-2,0.1-3.4,1.4-3.5,3.2c-0.1,1.8,1.2,3.4,3.2,3.5
+	c3.6,0.1,7.3,0.1,10.9,0c2.1-0.1,3.3-1.5,3.2-3.4c0-1.8-1.3-3.2-3.4-3.3C117.9,52.5,116.2,52.5,114.4,52.5z"/>
+<path class="st0" d="M74.9,98c-9.4,0-16.9-7.6-16.9-17c0.1-9.3,7.6-16.8,16.9-16.9c9.4,0,17.1,7.7,17,17.2
+	C91.9,90.6,84.3,98,74.9,98z"/>
+</svg>
--- a/static/svg/instagram.svg
+++ b/static/svg/instagram.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#792A4C;}
+</style>
+<path class="st0" d="M109.4,33.2c-4.2,0-7.6,3.4-7.6,7.6c0,4.2,3.4,7.6,7.6,7.6c4.2,0,7.6-3.4,7.6-7.6
+	C117,36.6,113.6,33.2,109.4,33.2z"/>
+<path class="st0" d="M75.5,43c-17.7,0-32,14.4-32,32c0,17.7,14.4,32,32,32c17.7,0,32-14.4,32-32C107.5,57.3,93.2,43,75.5,43z
+	 M75.5,95.5C64.2,95.5,55,86.3,55,75c0-11.3,9.2-20.5,20.5-20.5C86.8,54.5,96,63.7,96,75C96,86.3,86.8,95.5,75.5,95.5z"/>
+<path class="st0" d="M100.9,140H49c-21.5,0-39-17.5-39-39V49c0-21.5,17.5-39,39-39h51.9c21.5,0,39,17.5,39,39V101
+	C140,122.5,122.5,140,100.9,140z M49,22.2c-14.8,0-26.8,12-26.8,26.8V101c0,14.8,12,26.8,26.8,26.8h51.9c14.8,0,26.8-12,26.8-26.8
+	V49c0-14.8-12-26.8-26.8-26.8H49z"/>
+</svg>
--- a/static/svg/menu.svg
+++ b/static/svg/menu.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#792a4c" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
--- a/static/svg/muzika.svg
+++ b/static/svg/muzika.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#444B64;}
+</style>
+<path class="st0" d="M126.6,93.2c0-8.6,0-17.8,0-27.2c-13.9,3.9-27.6,7.8-41.5,11.7c0,3.9,0,7.7,0,11.5c0,10.1,0,20.3,0,30.4
+	c0,7.2-5.4,13.1-12.4,13.8c-6.9,0.7-13.2-4-14.7-10.9c-1.1-5.1,0.5-9.5,4.4-13c3.9-3.4,8.4-4.4,13.4-2.7c0.8,0.3,1.5,0.6,2.5,0.9
+	c0-1,0-1.8,0-2.7c0-14.2,0-28.3,0-42.5c0-3,0.6-3.8,3.6-4.7c15.4-4.4,30.9-8.8,46.3-13.1c3.7-1,5.4,0.3,5.4,4c0,19,0,38.1,0,57.1
+	c0,7.4-5.6,13.4-12.8,13.9c-7.2,0.5-13.6-4.8-14.6-12c-0.9-7.1,3.9-13.9,11.2-15.1C120.3,92.1,123.4,93,126.6,93.2z"/>
+<path class="st0" d="M43.9,32.1c0,0.5,0,1.3,0,2.1c0,17.1,0,34.1,0,51.2c0,5.4-2.6,9.5-7.3,12c-4.6,2.4-9.3,2.2-13.7-0.6
+	c-6-3.7-8.1-11.4-5-17.6c3.2-6.4,10.6-9.2,17.3-6.7c0.6,0.2,1.1,0.4,1.9,0.8c0-1,0-1.9,0-2.7c0-16.5,0-32.9,0-49.4
+	c0-0.7-0.2-1.5,0.1-2c0.6-1,1.4-2.4,2.4-2.7c1-0.3,2.4,0.4,3.5,0.9c0.6,0.3,1,1.2,1.3,1.8c5.1,8.5,11.9,15.3,19.8,21.2
+	c8.5,6.4,9.7,17.9,2.7,25.5c-3.2,3.5-7.2,5.3-11.9,5.6c-2.4,0.1-4.1-1.2-4.2-3.2c-0.1-2,1.3-3.4,3.8-3.6c4.6-0.4,8.1-3.1,9.4-7.1
+	c1.3-4.2,0-8.3-3.5-11.3C54.9,41.7,49.4,36.9,43.9,32.1z"/>
+</svg>
--- a/static/svg/party_ples.svg
+++ b/static/svg/party_ples.svg
@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 50" style="enable-background:new 0 0 150 50;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#792A4C;}
+</style>
+<path class="st0" d="M2.5,45.4v-25h4.8l0,2c1-1.7,2.7-2.4,4.4-2.4c4.3,0,7.3,3.4,7.3,9.1c0,5-2.5,8.7-6.9,8.7c-2,0-3.7-0.7-4.8-2.5
+	v10.1H2.5z M14,28.8c0-3.1-1.3-4.8-3.4-4.8c-2,0-3.4,1.7-3.4,4.6c0,3.4,1.2,4.9,3.4,4.9C12.8,33.5,14,32.1,14,28.8z"/>
+<path class="st0" d="M31.2,37.3c-0.2-0.4-0.3-0.9-0.3-1.4c-0.9,1.1-2.5,1.9-5.1,1.9c-3.9,0-5.6-1.9-5.6-4.9c0-4.4,3.3-5.2,7.9-5.9
+	c1.9-0.3,2.5-0.7,2.5-1.7c0-1-1.1-1.5-2.5-1.5c-1.9,0-2.6,0.9-2.8,2.1h-4.5c0.1-3.5,2-6,7.5-6c5.4,0,7.3,2.4,7.3,6.7v10.7H31.2z
+	 M30.6,29.4c-0.4,0.3-1,0.6-2.5,0.9c-2.4,0.5-3.1,1.2-3.1,2.4c0,1.1,0.7,1.6,1.8,1.6c2.4,0,3.7-1.7,3.7-3.4L30.6,29.4z"/>
+<path class="st0" d="M37.5,37.3v-17h4.7v1.6c1.5-1.9,3-2,4.8-2h0.5V25c-0.4-0.1-0.8-0.1-1.2-0.1c-2.5,0-3.7,1-3.7,3.5v8.9H37.5z"/>
+<path class="st0" d="M62.5,31c0,3.6-1.9,6.8-7,6.8c-5.1,0-7-3.1-7-6.8V15.8h4.9v4.6h9.1v3.5h-9.1v6.9c0,1.8,0.7,2.7,2.2,2.7
+	c1.5,0,2.2-0.9,2.2-2.7v-4.6h4.7V31z"/>
+<path class="st0" d="M74.6,35.4c-0.7,1.4-2.5,2.1-4.3,2.1c-3.9,0-6.2-2.5-6.2-6V20.4h5v10.4c0,1.8,0.8,2.7,2.4,2.7
+	c1.7,0,3-1.2,3-2.7V20.4h5v17.4c0,4.8-3.1,7.5-7.9,7.5c-5.2,0-7.5-2.7-7.5-7.1h4.7c0,1.7,1,2.8,3,2.8c1.6,0,2.8-1,2.8-3.2V35.4z"/>
+<path class="st0" d="M90,45.4v-25h4.8l0,2c1-1.7,2.7-2.4,4.4-2.4c4.3,0,7.3,3.4,7.3,9.1c0,5-2.5,8.7-6.9,8.7c-2,0-3.7-0.7-4.8-2.5
+	v10.1H90z M101.5,28.8c0-3.1-1.3-4.8-3.4-4.8c-2,0-3.4,1.7-3.4,4.6c0,3.4,1.2,4.9,3.4,4.9C100.3,33.5,101.5,32.1,101.5,28.8z"/>
+<path class="st0" d="M108.1,37.3V14.2h5v23.2H108.1z"/>
+<path class="st0" d="M119.5,30.1c0.1,2.1,1.4,3.7,3.3,3.7c1.2,0,2.4-0.6,2.6-1.5h5.1c-1,3.5-3.9,5.4-7.5,5.4c-5.7,0-8.6-3.1-8.6-9.2
+	c0-5.2,3-8.6,8.3-8.6c5.2,0,8,3.2,8,9.5v0.7H119.5z M125.8,27.1c-0.1-2.2-1.4-3.2-3.1-3.2c-1.7,0-2.9,1.1-3.1,3.2H125.8z"/>
+<path class="st0" d="M142.3,25.5c-0.1-1.4-0.8-2.2-2.8-2.2c-1.7,0-2.4,0.6-2.4,1.4c0,0.9,1,1.3,2.4,1.7c1.6,0.4,3.6,0.8,5.3,1.6
+	c1.6,0.8,2.7,1.9,2.7,4.2c0,3.3-2.2,5.5-7.4,5.5c-5.3,0-8.2-2.3-8.3-5.9h5.1c0,1.3,1.1,2.3,3.2,2.3c1.4,0,2.5-0.4,2.5-1.6
+	c0-0.9-0.7-1.2-2.2-1.6c-2.9-0.7-3.9-1-5-1.6c-2.3-1.1-3-2.8-3-4.5c0-2.8,1.9-5,7.3-5c5,0,7.1,1.9,7.3,5.6H142.3z"/>
+<path class="st0" d="M2.9,16.1V4.6H8c2.3,0,3.8,1.4,3.8,3.7c0,2.2-1.4,3.6-3.8,3.6H5.6v4.1H2.9z M7.7,9.8c1.1,0,1.7-0.6,1.7-1.5
+	c0-0.8-0.6-1.4-1.7-1.4H5.6v2.9H7.7z"/>
+<path class="st0" d="M19,16.1l-3.2-5l-1,1v4h-2.6V4.6h2.6v4.2l3.9-4.2h3.4l-4.5,4.5l4.6,7H19z"/>
+<path class="st0" d="M31.4,16.1V8.7l-1.8,7.4H27l-1.8-7.4v7.4h-2.5V4.6h3.9l1.7,8l1.7-8h3.8v11.4H31.4z"/>
+</svg>
--- a/static/svg/pin.svg
+++ b/static/svg/pin.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#792A4C;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#CF6379;}
+</style>
+<polygon class="st0" points="64.4,100.9 49.4,85.9 2.7,145.2 5,147.5 "/>
+<path class="st1" d="M145.8,45.6L104.1,4c-3.5-3.5-9.2,0.1-10.8,3.2c-0.3,0.5,0.2,1-0.2,4.6c-0.6,4.5-1.6,9.4-3.2,13.4L71.3,43.7
+	c-7.4,7.4-18,4.1-27-0.4c-1.9-0.9-4.3-3-6.5-0.9L30,50.2c-1.1,1.1-1.1,3,0,4.2l65.8,65.8c1.1,1.1,3,1.1,4.2,0l7.8-7.8
+	c2.1-2.1-0.6-4.8-1.7-7.1c-4-8.3-7.6-19.4-0.9-26.1l19.3-19.3c3.8-1.2,8.7-2.3,13.4-3c3.6-0.6,4.1-0.1,4.6-0.5
+	C145.8,54.4,149.3,49.2,145.8,45.6L145.8,45.6z"/>
+</svg>
--- a/static/svg/prekvapeni.svg
+++ b/static/svg/prekvapeni.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#444B64;}
+</style>
+<path class="st0" d="M63.6,86c0-3.5,0-6.9,0-10.4c0.1-7.5,4.5-12,11.9-12.3C83.9,63,90.3,56.2,90.3,48c-0.1-8.2-6.9-15-15.1-15.1
+	c-8.3-0.1-15,6.4-15.4,14.8c-0.3,7.2-5.2,12.1-11.8,11.9c-6.7-0.2-11.2-5.4-11-12.6c0.4-19.2,16.2-35.6,35.5-36.8
+	c19.8-1.2,37.6,13.1,40.2,32.5c2.4,18.1-7.1,34.5-24.1,41c-1.8,0.7-2.2,1.6-2.2,3.3c0.1,4,0.2,8-0.2,11.9c-0.5,5.7-5.5,9.9-11.3,9.9
+	c-5.8,0-10.6-4.3-11.2-10c-0.2-2.5-0.1-5.1-0.2-7.6C63.6,89.4,63.6,87.7,63.6,86z"/>
+<path class="st0" d="M75,140c-6.3,0-11.4-5.2-11.3-11.6c0.1-6.4,5.2-11.4,11.6-11.3c6.2,0.1,11.2,5.2,11.2,11.4
+	C86.4,134.9,81.3,140,75,140z"/>
+</svg>
--- a/static/svg/tombola.svg
+++ b/static/svg/tombola.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#444B64;}
+</style>
+<path class="st0" d="M70.1,110c0,8.3,0,16.6,0,25c0,2.3-0.3,2.5-2.6,2.5c-13,0-26,0-39.1,0c-4.7,0-6.9-2.3-6.9-6.9
+	c0-13.9,0-27.8,0-41.7c0-4.7,2.3-7,6.9-7c12.8,0,25.7,0,38.5,0c2.7,0,3.2,0.4,3.2,3.1C70.1,93.4,70.1,101.7,70.1,110z"/>
+<path class="st0" d="M79.9,110c0-8.3,0-16.6,0-25c0-2.7,0.4-3.2,3.2-3.2c12.9,0,25.8,0,38.6,0c4.5,0,6.8,2.3,6.8,6.8c0,14,0,28,0,42
+	c0,4.5-2.3,6.8-6.8,6.8c-13.1,0-26.2,0-39.3,0c-2.2,0-2.4-0.3-2.4-2.5C79.9,126.7,79.9,118.4,79.9,110z"/>
+<path class="st0" d="M105.8,45.4c7.5,0,15.1,0,22.6,0c4.4,0,6.7,2.3,6.7,6.7c0,5.5,0,11.1,0,16.6c0,4.3-2.3,6.6-6.6,6.6
+	c-15.2,0-30.3,0-45.5,0c-2.7,0-3-0.3-3-3c0-8,0-16.1,0-24.1c0-2.5,0.4-2.9,2.8-2.9C90.4,45.4,98.1,45.4,105.8,45.4z"/>
+<path class="st0" d="M44.3,75.4c-7.5,0-15.1,0-22.6,0c-4.4,0-6.7-2.3-6.7-6.7c0-5.5,0-11.1,0-16.6c0-4.4,2.3-6.7,6.6-6.7
+	c15.3,0,30.5,0,45.8,0c2.2,0,2.7,0.5,2.7,2.7c0,8.3,0,16.6,0,24.8c0,2-0.4,2.4-2.5,2.4C59.8,75.4,52,75.4,44.3,75.4z"/>
+<path class="st0" d="M50.3,41.2c-4-0.2-7.9-0.6-11.7-1.9c-8.2-3-11.5-10.5-8.1-18.6c2.5-6.1,7.9-8.9,15.1-8c7,0.9,13.2,3.9,18.9,7.8
+	c2.5,1.8,4.9,3.8,6.9,6.2c3,3.5,2.1,7.6-1.8,10.1c-3.2,2.1-6.8,2.9-10.5,3.5C56.1,40.8,53.2,40.9,50.3,41.2z M61.5,30.3
+	c0-0.2,0-0.3,0-0.5c-4.2-3.2-8.6-6-13.8-7.2c-1.8-0.4-3.8-0.5-5.6-0.6c-1.5-0.1-2.4,0.8-2.8,2.2c-1.2,3.6-0.4,5.2,3.2,6.4
+	c0.4,0.1,0.7,0.2,1.1,0.3c3.9,0.9,7.9,0.9,11.9,0.4C57.4,31.1,59.4,30.6,61.5,30.3z"/>
+<path class="st0" d="M99.8,41c-5,0-9.9-0.5-14.5-2.2c-2.1-0.7-4.1-1.8-5.8-3.1c-2.8-2.2-3-5.7-1-8.6c1.9-2.7,4.4-4.7,7.1-6.6
+	c4.8-3.3,10-6,15.7-7.3c2.9-0.7,5.9-1,8.9-0.4c6.1,1.2,10,5.7,10.7,12.3c0.7,6.5-2.4,11.5-8.6,13.9C108.2,40.6,104,41,99.8,41z
+	 M88.7,29.8c0,0.2,0,0.3,0,0.5c2.1,0.3,4.2,0.8,6.3,1c4.3,0.5,8.5,0.6,12.7-0.7c3.6-1.1,4.4-2.8,3.3-6.4c0,0,0-0.1,0-0.1
+	c-0.4-1.2-1.3-1.9-2.5-2.1c-0.7-0.1-1.5-0.1-2.2-0.1C99.4,22.5,94,25.9,88.7,29.8z"/>
+</svg>
--- a/static/svg/uvod.svg
+++ b/static/svg/uvod.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#444B64;}
+</style>
+<path class="st0" d="M16.5,75c0-16.5,0-32.9,0-49.4c0-6,3.1-9.2,9.2-9.2c32.9,0,65.8,0,98.8,0c6,0,9.2,3.1,9.2,9.2
+	c0,32.9,0,65.9,0,98.8c0,6-3.1,9.2-9.2,9.2c-32.9,0-65.8,0-98.8,0c-6,0-9.2-3.1-9.2-9.2C16.5,107.9,16.5,91.5,16.5,75z M108.2,71.4
+	c0-16.1,0-32,0-48c-22.2,0-44.3,0-66.4,0c0,16.1,0,32,0,48C64,71.4,86.1,71.4,108.2,71.4z M108.3,78.6c-22.3,0-44.4,0-66.5,0
+	c0,16.1,0,32,0,47.9c22.3,0,44.4,0,66.5,0C108.3,110.5,108.3,94.7,108.3,78.6z M34.6,53.1c0-3.8,0-7.5,0-11.3c-3.8,0-7.5,0-11.1,0
+	c0,3.9,0,7.5,0,11.3C27.3,53.1,30.8,53.1,34.6,53.1z M115.4,41.7c0,3.9,0,7.5,0,11.3c3.8,0,7.5,0,11.1,0c0-3.8,0-7.5,0-11.3
+	C122.8,41.7,119.2,41.7,115.4,41.7z M23.5,60.1c0,3.8,0,7.5,0,11.2c3.8,0,7.4,0,11.1,0c0-3.8,0-7.5,0-11.2
+	C30.8,60.1,27.2,60.1,23.5,60.1z M126.6,60.2c-3.9,0-7.5,0-11.2,0c0,3.8,0,7.5,0,11.2c3.8,0,7.5,0,11.2,0
+	C126.6,67.6,126.6,64,126.6,60.2z M34.6,89.9c0-3.9,0-7.5,0-11.3c-3.8,0-7.4,0-11.2,0c0,3.8,0,7.5,0,11.3
+	C27.3,89.9,30.9,89.9,34.6,89.9z M126.6,78.6c-3.8,0-7.5,0-11.1,0c0,3.9,0,7.5,0,11.2c3.8,0,7.4,0,11.1,0
+	C126.6,86.1,126.6,82.5,126.6,78.6z M34.6,108.3c0-3.9,0-7.5,0-11.3c-3.8,0-7.5,0-11.1,0c0,3.8,0,7.5,0,11.3
+	C27.2,108.3,30.8,108.3,34.6,108.3z M126.6,97c-3.8,0-7.5,0-11.1,0c0,3.8,0,7.5,0,11.2c3.8,0,7.4,0,11.1,0
+	C126.6,104.5,126.6,100.9,126.6,97z M23.3,34.6c3.9,0,7.6,0,11.3,0c0-3.8,0-7.5,0-11.3c-3.3,0-6.4,0-9.5,0c-1.2,0-1.8,0.5-1.8,1.8
+	C23.4,28.2,23.3,31.3,23.3,34.6z M115.4,23.3c0,4,0,7.7,0,11.3c3.8,0,7.4,0,11.2,0c0-3.3,0.1-6.5-0.1-9.7c0-0.6-1-1.6-1.6-1.6
+	C121.9,23.2,118.7,23.3,115.4,23.3z M23.3,115.3c0,3.4-0.1,6.6,0.1,9.7c0,0.6,0.9,1.5,1.4,1.5c3.2,0.1,6.5,0.1,9.8,0.1
+	c0-3.9,0-7.6,0-11.4C30.9,115.3,27.3,115.3,23.3,115.3z M115.3,126.7c3.4,0,6.5,0.1,9.6-0.1c0.6,0,1.6-0.8,1.7-1.3
+	c0.1-3.3,0.1-6.6,0.1-9.9c-3.9,0-7.6,0-11.3,0C115.3,119.2,115.3,122.8,115.3,126.7z"/>
+</svg>
--- a/static/svg/youtube.svg
+++ b/static/svg/youtube.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#792A4C;}
+</style>
+<path class="st0" d="M148.2,55.9c0-17.8-14.4-32.1-32.1-32.1H33.9c-17.8,0-32.1,14.4-32.1,32.1v38.2c0,17.8,14.4,32.1,32.1,32.1
+	h82.2c17.8,0,32.1-14.4,32.1-32.1V55.9z M99.9,77.9L63,96.1c-1.4,0.8-6.4-0.3-6.4-1.9V56.8c0-1.7,5-2.7,6.4-1.9l35.3,19.2
+	C99.8,74.9,101.4,77.1,99.9,77.9z"/>
+</svg>
--- a/templates/404.html
+++ b/templates/404.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+</head>
+<body>
+    <h1>404 - Stránka nenalezena</h1>
+    <a href="/">Zpět na ples</a>
+</body>
+</html>
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="cs">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PKM PARTY PLES</title>
+  <link rel="icon" href="/img/favicon.png">
+  <link rel="stylesheet" href="/vars.css">
+  <link rel="stylesheet" href="/global.css">
+  <link rel="stylesheet" href="/header.css">
+  <link rel="stylesheet" href="/main.css">
+  <link rel="stylesheet" href="/news.css">
+  <link rel="stylesheet" href="/responsivity.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;800&amp;display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.typekit.net/yqq2dbq.css">
+</head>
+
+<body>
+  <nav>
+    <div class="nav-left">
+      <a href="/"><img src="/svg/party_ples.svg" alt="pkmples logo"></a>
+    </div>
+    <div class="nav-btn">
+      <img src="/svg/menu.svg" alt="menu icon">
+    </div>
+    <div class="nav-right NOmobile-visible">
+      <a href="https://www.facebook.com/events/823114292589147/?active_tab=discussion" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></a>
+      <a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></a>
+      <a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></a>
+      <!--<a href="/galerie">galerie</a>-->
+    </div>
+  </nav>
+
+  <main>
+    {% block main %} {% endblock main %}
+  </main>
+
+  <footer class="footer-mobile">
+    <p>Nadační fond maléDivy • <a href="https://www.kulturaturnov.cz" target="_blank">Kulturní centrum Turnov</a> • <a href="https://www.facebook.com/bigbandturnov" target="_blank">Big Band ZUŠ Turnov</a></p>
+    <p>&copy; <a href="https://fofrweb.com/" target="_blank">Fofrweb</a> + PKM</p>
+  </footer>
+
+  <script>
+    const navBtn = document.querySelector(".nav-btn img")
+    let navVisible = true
+    navBtn.addEventListener("click", () => {
+      if(navVisible) {
+        document.querySelector(".nav-right").classList.add("mobile-visible")
+      } else {
+        document.querySelector(".nav-right").classList.remove("mobile-visible")
+      }
+
+      navVisible = !navVisible
+    })
+  </script>
+</body>
+
+</html>
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,74 @@
+{% extends "base.html" %}
+{% block main %}
+<section id="news" class="news-wrapper">
+  {% block news %} {% endblock news %}
+</section>
+<section class="aside-wrapper">
+  <aside>
+    <section id="vstupenky-wrapper">
+      <a href="https://www.kulturaturnov.cz/program/pkm-party-ples-2024" target="_blank" class="vstupenky">VSTUPENKY<span>&nbsp;&gt;&gt;</span></a>
+    </section>
+
+    <section class="infotable">
+      <div class="info-wrapper">
+        <img src="/svg/uvod.svg" alt="ikonka" />
+        <div class="text">
+          <h3>Slavnostní úvod</h3>
+          <p>
+            Na rozehřátí ti něco pěknýho řeknem a možná se dočkáš i nějakýho toho videjka.
+          </p>
+        </div>
+      </div>
+      <div class="info-wrapper">
+        <img src="/svg/muzika.svg" alt="ikonka" />
+        <div class="text">
+          <h3>Kvalitní muzika</h3>
+          <p>
+            “Proč nehrají, preceptore?” na našem plese rozhodně neuslyšíš. Zahraje nám <b>BigBand ZUŠ Turnov</b>, kterej do toho umí hrábnout.
+          </p>
+        </div>
+      </div>
+      <div class="info-wrapper">
+        <img src="/svg/tombola.svg" alt="ikonka" />
+        <div class="text">
+          <h3>Tombola</h3>
+          <p>
+            Už teď ty ceny nemáme kam dávat. Tak nám přijď pomoct a nějakou si odnes domů!
+          </p>
+        </div>
+      </div>
+      <div class="info-wrapper">
+        <img src="/svg/fotokoutek.svg" 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="/svg/dancing.svg" alt="ikonka" />
+        <div class="text">
+          <h3>Unikátní program</h3>
+          <p>
+            V tomhle se musí najít úplně každej. Brikulí jsme si pro Tebe s kámošema připravili tolik, že by to měl i tvůj matikář problém spočítat.
+          </p>
+        </div>
+      </div>
+      <div class="info-wrapper">
+        <img src="/svg/prekvapeni.svg" alt="ikonka" />
+        <div class="text">
+          <h3>Půlnoční překvapení</h3>
+          <p>
+            No, máš se prostě na co těšit. Bude to velký! Co? To už by přece nebylo překvápko.
+          </p>
+        </div>
+      </div>
+    </section>
+  </aside>
+  <footer>
+    <p>Nadační fond maléDivy • <a href="https://www.kulturaturnov.cz" target="_blank">Kulturní centrum Turnov</a> • <a href="https://www.facebook.com/bigbandturnov" target="_blank">Big Band ZUŠ Turnov</a></p>
+    <p>&copy; <a href="https://fofrweb.com/" target="_blank">Fofrweb</a> + PKM</p>
+  </footer>
+</section>
+{% endblock main %}
--- a/templates/news.html
+++ b/templates/news.html
@ -0,0 +1,17 @@
+{% extends "index.html" %}
+
+{% block news %}
+    {% for page in section.pages %}
+        {% set article_class = "news-card" %}
+        {% if page.extra.pinned %}
+            {% set article_class = article_class ~ " pinned" %}
+        {% endif %}
+
+        <article class="news-card {{ article_class }}">
+            <img src="/svg/pin.svg" alt="pin icon" class="pin-img">
+            <h3>{{ page.title }}</h3>
+            <p class="date">{{ page.date | date(format="%d. %m. %Y")}}</p>
+            <p class="text">{{ page.content | safe }}</p>
+        </article>
+    {% endfor %}
+{% endblock news %}
				`@ -1 +0,0 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" fill="#792a4c" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>`