jarda web

css/styles.css

@@ -0,0 +1,268 @@
+* {
+  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;
+}

css/styles_v4.css

@@ -1,76 +0,0 @@
-* {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-}
-
-.red {
-    color: #e63946;
-}
-
-body {
-    background-color: #FFF7E1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column; 
-    height: 100vh;
-    max-height: -webkit-fill-available;
-    max-width: 100vw;
-    font-family: 'Source Code Pro', monospace;
-    overflow: hidden;
-}
-.content{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column; 
-    gap: 3rem;
-    max-width: 30vw;
-}
-.link {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 16px;
-}
-
-.img_1 {
-    max-width: 100%;
-    max-height: 6vh;
-}
-.img_2 {
-    max-width: 100%;
-    max-height: 45vh;
-}
-
-/* .udalost:hover {
-    text-decoration: line-through;
-} */
-.udalost {
-    color: #6B2A25;
-    font-weight: bold;
-    font-size: 1.5rem;
-}
-
-@media only screen and (max-width: 768px) {
-   .content {
-        max-width: 100vw;
-        height: calc(100vh - 10rem);
-   }
-
-   .link {
-        display: flex;
-        justify-content: center;
-        height: 20vh;
-   }
-
-   .udalost {
-    font-size: 1.5rem;
-   }
-
-   .img_1 {
-    max-height: 5vh;
-   }
-}

index.html

@@ -3,17 +3,26 @@
   <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
+      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
+      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: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" />
@@ -22,23 +31,158 @@
     <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" />
+    <meta
+      name="google-site-verification"
+      content="95ajJo4LsoVNgG60HxS8CVzmIFHoj3w2NQ-H-YyijIw"
+    />
     <title>PKM PARTY PLES</title>
     <link rel="canonical" href="https://www.pkmples.cz/" />
     <link rel="icon" type="image/png" href="/img/favicon-16x16.png" />
-		<link rel="stylesheet" href="/css/styles_v4.css" />
+    <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=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet" />
+    <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">
   </head>
   <body>
-		<div class="content" data-nosnippet>
+    <header>
-			<img src="/img/pruh-web-1500-new.png" alt="sponzoři" class="img_1" />
+      <img
-			<img src="/img/polaroid-web-750-new.png" alt="foto pozvánka" class="img_2" />
+        src="pkmples-web-new-material/header/pruh-medium.png"
-			<div class="link">
+        alt="pkm pruh"
-                <a href="https://www.kcturnov.cz/ostatni-akce/pkm-party-ples" target="_blank" class="udalost" style="color: #ff0000;">LÍSTKY KUPUJ ZDE</a>
+      />
-				<a href="https://www.facebook.com/events/616074790100388" target="_blank" class="udalost">odkaz na událost</a>
+    </header>
+    <section class="party__ples">
+      <img
+        src="pkmples-web-new-material/header/party-ples-medium.png"
+        alt="party-ples-large"
+      />
+    </section>
+    <a
+      class="hero__button"
+      href="https://www.kcturnov.cz/ostatni-akce/pkm-party-ples"
+      target="_blank"
+    >
+      Vstupenky
+	  <span class="material-icons">
+		double_arrow
+		</span>
+      <img
+        src="pkmples-web-new-material/ikony/doprava.png"
+        alt="šipka doprava"
+		class="doprava"
+      />
+      <img src="pkmples-web-new-material/ikony/doleva.png" alt="šipka doleva"class="doleva"/>
+    </a>
+    <section class="cenik__img">
+      <img
+        src="pkmples-web-new-material/polaroid/polaroid-web-750-new.png"
+        alt="polaroid-web"
+      />
+      <div class="cenik">
+        <div>
+          <p>Před Štedřým dnem <span>do 24.prosince</span></p>
+          <p>180 Kč / 200 Kč</p>
+        </div>
+        <div>
+          <p>Před silvesterem <span>od 25. do 31.prosince</span></p>
+          <p>200 Kč / 220 Kč</p>
+        </div>
+        <div>
+          <p>Během ledna <span>od 1.ledna do plesu</span></p>
+          <p>220 Kč / 240 Kč</p>
         </div>
       </div>
+    </section>
+    <a
+      class="hero__button"
+      href="https://www.facebook.com/events/616074790100388"
+      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?</h2>
+      <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 domu!
+            </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>
+	<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>