fr/web-semprace
1
0
Fork 0
Code Pull Requests Activity

jarda web

Browse Source
This commit is contained in:
Adam Ryslavy 2022-11-25 18:12:28 +01:00
parent 79bd4bdc1d
commit 627f674bf8
22 changed files with 453 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

268
css/styles.css Normal file
View File

@ -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;
}

76
css/styles_v4.css
View File

@ -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;
}
}

226
index.html
View File

@ -1,44 +1,188 @@
<!DOCTYPE html>
<html lang="en">
<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="icon" type="image/png" href="/img/favicon-16x16.png" />
<link rel="stylesheet" href="/css/styles_v4.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" />
</head>
<body>
<div class="content" data-nosnippet>
<img src="/img/pruh-web-1500-new.png" alt="sponzoři" class="img_1" />
<img src="/img/polaroid-web-750-new.png" alt="foto pozvánka" class="img_2" />
<div class="link">
<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>
</div>
</div>
</body>
<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="icon" type="image/png" href="/img/favicon-16x16.png" />
<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">
</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>
<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>

BIN
pkmples-web-new-material/header/party-ples-large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
pkmples-web-new-material/header/party-ples-medium.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
pkmples-web-new-material/header/pruh-large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
pkmples-web-new-material/header/pruh-medium.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
pkmples-web-new-material/ikony/beerpong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
pkmples-web-new-material/ikony/doleva.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
pkmples-web-new-material/ikony/doprava.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
pkmples-web-new-material/ikony/fotokoutek.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
pkmples-web-new-material/ikony/muzika.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
pkmples-web-new-material/ikony/prekvapeni.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
pkmples-web-new-material/ikony/tombola.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
pkmples-web-new-material/ikony/uvod.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
pkmples-web-new-material/plakat/pkmples-plakat-new-web-large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

BIN
pkmples-web-new-material/plakat/pkmples-plakat-new-web-medium.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
pkmples-web-new-material/plakat/pkmples-plakat-new-web-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 KiB

BIN
pkmples-web-new-material/polaroid/polaroid-web-1000-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
pkmples-web-new-material/polaroid/polaroid-web-1500-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
pkmples-web-new-material/polaroid/polaroid-web-2500-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 MiB

BIN
pkmples-web-new-material/polaroid/polaroid-web-750-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 705 KiB