diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..b0177ee --- /dev/null +++ b/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; +} diff --git a/css/styles_v4.css b/css/styles_v4.css deleted file mode 100644 index f580af7..0000000 --- a/css/styles_v4.css +++ /dev/null @@ -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; - } -} diff --git a/index.html b/index.html index 0c2948f..4b5ac7a 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,188 @@ - - - - - - - - - - - - - - - - - - - - - PKM PARTY PLES - - - - - - - - -
- sponzoři - foto pozvánka -
- LÍSTKY KUPUJ ZDE - odkaz na událost -
-
- + + + + + + + + + + + + + + + + + + + + + PKM PARTY PLES + + + + + + + + + +
+ pkm pruh +
+
+ party-ples-large +
+ + Vstupenky + + double_arrow + + šipka doprava + šipka doleva + +
+ polaroid-web +
+
+

Před Štedřým dnem do 24.prosince

+

180 Kč / 200 Kč

+
+
+

Před silvesterem od 25. do 31.prosince

+

200 Kč / 220 Kč

+
+
+

Během ledna od 1.ledna do plesu

+

220 Kč / 240 Kč

+
+
+
+ + Facebook Událost + + double_arrow + + +
+ +
+
+

Na co se můžete těšit?

+
+
+ ikonka +
+

Slavnostní úvod

+

+ Na rozehřátí ti něco pěknýho řeknem a možná se dočkáš i nějakýho toho videjka. +

+
+
+
+ ikonka +
+

Fotokoutek

+

+ Vyblejsknem tě samotnýho nebo s celou partou. A to v našem koutku i na tanečním place! +

+
+
+
+ ikonka +
+

Kvalitní muzika

+

+ “Proč nehrají, preceptore?” na našem plese rozhodně neuslyšíš. Zahraje nám BigBand ZUŠ Turnov, kterej do toho umí hrábnout. +

+
+
+
+ ikonka +
+

Beer pong

+

+ Zahraj si o super ceny v týhle obdobě americkýho fenoménu. +

+
+
+
+ ikonka +
+

Tombola

+

+ Už teď ty ceny nemáme kam dávat. Tak nám přijď pomoct a nějakou si odnes domu! +

+
+
+
+ ikonka +
+

Půlnoční překvapení

+

+ No, máš se prostě na co těšit. Bude to velký! Co? To už by přece nebylo překvápko. +

+
+
+
+
+ pkmples-plakat-new-web-large + + diff --git a/pkmples-web-new-material/header/party-ples-large.png b/pkmples-web-new-material/header/party-ples-large.png new file mode 100644 index 0000000..6067415 Binary files /dev/null and b/pkmples-web-new-material/header/party-ples-large.png differ diff --git a/pkmples-web-new-material/header/party-ples-medium.png b/pkmples-web-new-material/header/party-ples-medium.png new file mode 100644 index 0000000..09a5ed7 Binary files /dev/null and b/pkmples-web-new-material/header/party-ples-medium.png differ diff --git a/pkmples-web-new-material/header/pruh-large.png b/pkmples-web-new-material/header/pruh-large.png new file mode 100644 index 0000000..8297b17 Binary files /dev/null and b/pkmples-web-new-material/header/pruh-large.png differ diff --git a/pkmples-web-new-material/header/pruh-medium.png b/pkmples-web-new-material/header/pruh-medium.png new file mode 100644 index 0000000..0a1a148 Binary files /dev/null and b/pkmples-web-new-material/header/pruh-medium.png differ diff --git a/pkmples-web-new-material/ikony/beerpong.png b/pkmples-web-new-material/ikony/beerpong.png new file mode 100644 index 0000000..ee616fa Binary files /dev/null and b/pkmples-web-new-material/ikony/beerpong.png differ diff --git a/pkmples-web-new-material/ikony/doleva.png b/pkmples-web-new-material/ikony/doleva.png new file mode 100644 index 0000000..f946df7 Binary files /dev/null and b/pkmples-web-new-material/ikony/doleva.png differ diff --git a/pkmples-web-new-material/ikony/doprava.png b/pkmples-web-new-material/ikony/doprava.png new file mode 100644 index 0000000..885f128 Binary files /dev/null and b/pkmples-web-new-material/ikony/doprava.png differ diff --git a/pkmples-web-new-material/ikony/fotokoutek.png b/pkmples-web-new-material/ikony/fotokoutek.png new file mode 100644 index 0000000..87113dc Binary files /dev/null and b/pkmples-web-new-material/ikony/fotokoutek.png differ diff --git a/pkmples-web-new-material/ikony/muzika.png b/pkmples-web-new-material/ikony/muzika.png new file mode 100644 index 0000000..0bae572 Binary files /dev/null and b/pkmples-web-new-material/ikony/muzika.png differ diff --git a/pkmples-web-new-material/ikony/prekvapeni.png b/pkmples-web-new-material/ikony/prekvapeni.png new file mode 100644 index 0000000..f02169b Binary files /dev/null and b/pkmples-web-new-material/ikony/prekvapeni.png differ diff --git a/pkmples-web-new-material/ikony/tombola.png b/pkmples-web-new-material/ikony/tombola.png new file mode 100644 index 0000000..8def0dc Binary files /dev/null and b/pkmples-web-new-material/ikony/tombola.png differ diff --git a/pkmples-web-new-material/ikony/uvod.png b/pkmples-web-new-material/ikony/uvod.png new file mode 100644 index 0000000..7b3ac8f Binary files /dev/null and b/pkmples-web-new-material/ikony/uvod.png differ diff --git a/pkmples-web-new-material/plakat/pkmples-plakat-new-web-large.png b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-large.png new file mode 100644 index 0000000..e88c33c Binary files /dev/null and b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-large.png differ diff --git a/pkmples-web-new-material/plakat/pkmples-plakat-new-web-medium.png b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-medium.png new file mode 100644 index 0000000..9a4bf9a Binary files /dev/null and b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-medium.png differ diff --git a/pkmples-web-new-material/plakat/pkmples-plakat-new-web-small.png b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-small.png new file mode 100644 index 0000000..3249080 Binary files /dev/null and b/pkmples-web-new-material/plakat/pkmples-plakat-new-web-small.png differ diff --git a/pkmples-web-new-material/polaroid/polaroid-web-1000-new.png b/pkmples-web-new-material/polaroid/polaroid-web-1000-new.png new file mode 100644 index 0000000..af84568 Binary files /dev/null and b/pkmples-web-new-material/polaroid/polaroid-web-1000-new.png differ diff --git a/pkmples-web-new-material/polaroid/polaroid-web-1500-new.png b/pkmples-web-new-material/polaroid/polaroid-web-1500-new.png new file mode 100644 index 0000000..93452cf Binary files /dev/null and b/pkmples-web-new-material/polaroid/polaroid-web-1500-new.png differ diff --git a/pkmples-web-new-material/polaroid/polaroid-web-2500-new.png b/pkmples-web-new-material/polaroid/polaroid-web-2500-new.png new file mode 100644 index 0000000..39f9461 Binary files /dev/null and b/pkmples-web-new-material/polaroid/polaroid-web-2500-new.png differ diff --git a/pkmples-web-new-material/polaroid/polaroid-web-750-new.png b/pkmples-web-new-material/polaroid/polaroid-web-750-new.png new file mode 100644 index 0000000..267f46f Binary files /dev/null and b/pkmples-web-new-material/polaroid/polaroid-web-750-new.png differ