commit f1cae3ff9af861d98f67857feeb8e73920541726 Author: Lukáš Date: Wed Feb 14 00:04:31 2024 +0100 pohromadě diff --git a/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/.gitignore b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/.gitignore new file mode 100644 index 0000000..3b36439 --- /dev/null +++ b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/.gitignore @@ -0,0 +1,13 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Rider ignored files +/.idea.Lekce 3 prezentační web.iml +/contentModel.xml +/modules.xml +/projectSettingsUpdater.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/encodings.xml b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/encodings.xml new file mode 100644 index 0000000..df87cf9 --- /dev/null +++ b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/indexLayout.xml b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/indexLayout.xml new file mode 100644 index 0000000..f5a863a --- /dev/null +++ b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/indexLayout.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/prettier.xml b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/prettier.xml new file mode 100644 index 0000000..f6531a1 --- /dev/null +++ b/Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/prettier.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/Lekce 3 prezentační web/images/screenshot-1705584576967.png b/Lekce 3 prezentační web/images/screenshot-1705584576967.png new file mode 100644 index 0000000..1e95018 Binary files /dev/null and b/Lekce 3 prezentační web/images/screenshot-1705584576967.png differ diff --git a/Lekce 3 prezentační web/images/screenshot-1705584803459.png b/Lekce 3 prezentační web/images/screenshot-1705584803459.png new file mode 100644 index 0000000..589051b Binary files /dev/null and b/Lekce 3 prezentační web/images/screenshot-1705584803459.png differ diff --git a/Lekce 3 prezentační web/index.html b/Lekce 3 prezentační web/index.html new file mode 100644 index 0000000..0725154 --- /dev/null +++ b/Lekce 3 prezentační web/index.html @@ -0,0 +1,39 @@ + + + + + + + + Document + + + +
+ + +
+ +
+ +
+ +
+
+ Programovat můžeš i ty. Pusť se do toho! +
+

Základy programování se i jako úplný nováček naučíš už za pár týdnů. A po několika měsících studia můžeš získat + svoji první práci v IT nebo lepší pozici.
+ Vyber si některý z našich kurzů programování nebo se přidej na školení. Čekají tě interaktivní cvičení, projekty, + zkušení lektoři z praxe, možnost spolupráce s IT firmami a spoustu dalšího.

+
+ +
+ Logo Czech Starter +
Společnost ENGETO s.r.o. byla podpořená agenturou CzechInvest v rámci projektu Podpora start-upů.
+
Kontaktní email: info@engeto.com
+
+ + + + \ No newline at end of file diff --git a/Lekce 3 prezentační web/style.css b/Lekce 3 prezentační web/style.css new file mode 100644 index 0000000..780feba --- /dev/null +++ b/Lekce 3 prezentační web/style.css @@ -0,0 +1,67 @@ +.header { + text-align: center; + background-color: #fff; + width: 100%; + height: auto; + padding: 10px; +} +.logo { + width: 50px; + display: inline-block; +} +.heading-logo { + display: none; +} + +.content { + text-align: center; + position: relative; + margin: 0 auto; + padding: 10px; + width: 50%; +} + +.image { + width: 100%; + height: auto; + border-radius: 20%; +} + +.button { + position: absolute; + bottom: 25px; + right: 20px; + background-color: green; + color: #fff; + padding: 10px; + border-radius: 4px; + cursor: pointer; +} + +.article { + text-align: center; + width: 50%; + margin: 0 auto; + padding: 10px; +} +.heading { + font-size: 26px; + font-wight: 800; +} + +.footer { + font-size: 15px; + text-align: center; + background-color: #007fff; + padding: 10px; + color: #ffffff; +} + +/* Mobilní zobrazení */ + +@media only screen and (max-width: 576px) { + .heading-logo { + /* šchovaný logo */ + display: block; + } +} diff --git a/Lekce 3 prezentační web/zadani.md b/Lekce 3 prezentační web/zadani.md new file mode 100644 index 0000000..611081a --- /dev/null +++ b/Lekce 3 prezentační web/zadani.md @@ -0,0 +1,20 @@ +V rámci domácího úkolu ze teto lekce aplikuješ nově naučené poznatky a zopakuješ si učivo z předchozích lekcí – určení pozice, vnější odsazení a jiné. Úkolem bude upravit stávající stránku v CodePenu tak, aby splňovala příklad na obrázku a zadání níže. Úkol můžeš zpracovávat v CodePenu, ale doporučujeme vypracovat samostatně ve VS Code, abys sis procvičil/a vytvoření kostry HTML dokumentu a napojení CSS souboru. + +Úkolem bude vytvořit prezentační webovou stránku ENGETA: + +1. Třídě .header, .content, .article nastavíme vnitřní odsazení (padding). + +2. Použitím media query vytvoříme bod zlomu pro šířku od 576px a víc. + +3. Pro zařízení se šířkou do 576px (mobil) skryjeme třídu .heading-logo. + +4. Pro zařízení se šířkou nad 576px a víc (desktop) změníme šířku třídy .content na 50% a vycentrujeme element pomoci margin: 0 auto. + +5. Pro zařízení se šířkou nad 576px a víc (desktop) změníme šířku třídy .article na 50% a vycentrujeme element pomoci margin: 0 auto. + +6. Pro zařízení se šířkou nad 576px a víc (desktop) změníme tříde .heading velkost fontu na 26px. + +7. Třídě .image přidáme rámeček a zakulatíme mu rohy. + +8. Přidáme tlačítko, které bude umístěné v dolním pravém rohu obrázku. + diff --git a/NatureAndCulture_Engeto/.vscode/settings.json b/NatureAndCulture_Engeto/.vscode/settings.json new file mode 100644 index 0000000..d65ef38 --- /dev/null +++ b/NatureAndCulture_Engeto/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/NatureAndCulture_Engeto/images/PngItem_1608357.png b/NatureAndCulture_Engeto/images/PngItem_1608357.png new file mode 100644 index 0000000..f7dec9b Binary files /dev/null and b/NatureAndCulture_Engeto/images/PngItem_1608357.png differ diff --git a/NatureAndCulture_Engeto/images/photo-1512419180521-2c5585bdf851.avif b/NatureAndCulture_Engeto/images/photo-1512419180521-2c5585bdf851.avif new file mode 100644 index 0000000..efc2718 Binary files /dev/null and b/NatureAndCulture_Engeto/images/photo-1512419180521-2c5585bdf851.avif differ diff --git a/NatureAndCulture_Engeto/images/photo-1540503831458-3237544b2ce5.avif b/NatureAndCulture_Engeto/images/photo-1540503831458-3237544b2ce5.avif new file mode 100644 index 0000000..f9d866f Binary files /dev/null and b/NatureAndCulture_Engeto/images/photo-1540503831458-3237544b2ce5.avif differ diff --git a/NatureAndCulture_Engeto/index.html b/NatureAndCulture_Engeto/index.html new file mode 100644 index 0000000..1aca95c --- /dev/null +++ b/NatureAndCulture_Engeto/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + Hero + + + + + + + +
+
+
Exploring Icelandic Villages
+
+

Nature and Culture Converge

+
+
+
+ + + + +
+ +
+ + + \ No newline at end of file diff --git a/NatureAndCulture_Engeto/style.css b/NatureAndCulture_Engeto/style.css new file mode 100644 index 0000000..1574f9a --- /dev/null +++ b/NatureAndCulture_Engeto/style.css @@ -0,0 +1,115 @@ +:root { + --my-white: #fff; + --my-pink: #f08d8f; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + margin: 16px 32px; +} + +.hero-section { + height: 70vh; + background-image: url(images/photo-1540503831458-3237544b2ce5.avif); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 12px; + margin-bottom: 10px; + position: relative; +} + +.hero-text { + position: absolute; + left: 32px; + bottom: 16px; + color: var(--my-white); +} + +.hero-subtitle { + font-size: 20px; +} +.hero-title { + margin-top: 8px; +} + +.icon { + width: auto; + height: auto; + display: none; + padding: 14px; + margin-left: auto; + /* display: flex; */ +} +.icon img { + width: 100%; + height: 100%; + /* display: flex; */ + /* align-items: center; */ +} + +.image-container { + width: 50%; +} +.image-container img { + width: 100%; + height: 100%; + border-radius: 12px; +} +nav { + height: 55px; + background-color: var(--my-pink); + display: flex; + justify-content: space-evenly; + text-decoration: none; + margin-bottom: 10px; + border-radius: 12px; +} +nav a { + color: var(--my-white); + text-decoration: none; + font-size: 20px; + font-weight: bold; + list-style-type: none; +} + +ul { + display: flex; + list-style-type: none; + gap: 65px; + padding-top: 16px; + padding-bottom: 16px; +} + +/* Mobile - setting */ + +@media (max-width: 768px) { + body { + margin: 8px; + } + + .hero-subtitle { + font-size: 18px; + } + + .hero-title { + font-size: 14px; + } + + .icon { + display: block; + } + + .image-container { + width: 100%; + } + + nav a { + display: none; + } +} diff --git a/NatureAndCulture_Engeto/zadani.md b/NatureAndCulture_Engeto/zadani.md new file mode 100644 index 0000000..77e2bdf --- /dev/null +++ b/NatureAndCulture_Engeto/zadani.md @@ -0,0 +1,92 @@ +V rámci bonusového úkolu si zopakujeme, co jsme se naučili během dosavadní lekce. Úkol vypracujte ve VS Code a můžete si ho na konci zkontrolovat s referenčním řešením. + +Úkolem bude vytvořit jednoduchou responzivní stránku s hero sekci a obrázkem. Stránka by měla pro desktop a mobil vypadat jako na příkladu níže. + +1. Vytvoření souboru index.html a základni struktúry HTML + +vytvořte soubor index.html +základní struktúru HTML vytvoříme napsánim znaku ! a následním stisknutím ENTER na klávesnici +2. Přidáni obsahu + +odkaz na obrazek v hero sekci: obrázek +odkaz na druhy: obrázek +odkaz na ikonku: ikona +text v hero sekci: "Exploring Icelandic Villages" "Where Nature and Culture Converge" +menu sekce: Home, About Us, Explore, Contact Us +3. Vytvoření souboru styles.css + +vytvořite soubor s názvem styles.css +přelinkujte soubor index.html se souborem styles.css vložením nasledujíciho kusu kódu do hlavičky html souboru +4. Přidani třid + +přidejte do kódu sémantický element nav, který bude představovat navigaci. +položky navigace obalte elementem a s prázdnim atribútem href. +současti navigace bude ikonka menu pro mobilni verzi. Pro ikonku vytvořte blokový element
s třídou icon. Elementu přidáte img tag s atribútem src, který bude obsahovat odkaz na obrázek. +vytvořte blokový element
s třídou hero-section, kterému nastavíte obrázek na pozadi. Tento element bude obsahovat element s třídou hero-text. +Element hero-text bude obsahovat dve elementy. Jeden bude obalovat text "Exploring Icelandic Villages". Tomuto elementu nastavte třídu hero-subtitle. Druhý text "Where Nature and Culture Converge" bude nádpis první úrovně s třídou hero-title. +vytvořte další blokový element
s třídou image-container. Elementu přidáte img tag s atribútem src, který bude obsahovat odkaz na obrázek. +5. Přidejte selektory tříd + +přidejte selektory tříd do css souboru +6. Nastavení navigace + +nastavte tagu nav barvu pozadí pomocí vlastnosti background-color na #F08D8F. +nastavte velikost ikonky menu na width: 30px a height: 25px. Pozor ikonku vkládate jako obrázek, proto musíte nastavit obrázku responzívni chováni pomoci width: 100% a height: 100%. +pro umístnění položek menu vedle sebe nastavte vlastnosti display: flex a justify-content: space-evenly na tag nav. +položkam vypnete podtržení pomocí vlasntosti text-decoration: none. +skryjte iconu menu pro viewport větší než 768px a naopak zobrazte položky menu. Skrývani a zobrazení dosáhnete pomocí vlastnosti dislay: none, display: block a použití media query. +Ukázka kódu19 +ZKOPÍROVAT KÓD +/* pseudo kód */ +.icon { + display: none; +} +@media (max-width: 768px) { + .icon { + display: block; + } + .nav a { + display: none; + } +} +nastavte pro položky menu padding-top a padding-bottom hodnotu 16px, barvu písma na #fff, velikost na 20px a font-weight: bold. +pro ikonu nastavte padding: 8px. +jednou z možnosti jak napozicovat ikonku na levu stranu je nastavením margin-left: auto. +tagu nav nastavte border-radius: 8px. +tagu nav nastavte margin-bottom: 10px aby se vytvořil prostor mezi navigaci a obrázkem pod ní. +7. Nastavení hero sekce + +elementu s třídou hero-section nastavte vlastnosti: +background-image: url('link obrazku') +background-size +background-position +background-repeat +border-radius: 12px +elementu s třídou hero-section nastavte margin-bottom: 24px aby se vytvořil prostor mezi hero sekci a nasledujícim obrázkem. +napozicujte element s třídou hero-text do levého dolního rohu hero-section. V prvním kroku je potřebné nastavit position: relative pro element hero-section. V druhém kroku je potřebné nastavit position: absolute pro element hero-text. Element napozicujte z levého kraje 32px a dolního 16px. +elementu hero-text nastavte bílu barvu písma. +elementu s třídou hero-subtitle nastavte velkost písma na 20px. +elementu s třídou hero-title nastavte margin-top: 8px. +8. Nastavení obrázku + +obálke obrázku s třídou image-container nastavte šířku 50% z celkové šířky viewportu. +nastavte tagu img aby se přispůsobil velikosti sve obálky pomoci vlastnosti width: 100% a height: 100%. +obrázku nastavte border-radius na 12px. +9. Prostor kolem stránky + +nastavte na tagu body vnější okraj margin: 16px 32px. +10. Mobilní nastavení + +pro viewport menší než 768px upravte: +velkost písma pro nádpis na 24px a subtitle na 18px. +šířku obrázku na 100% viewportu +vnejší okraj na tagu body na 8px. +Ukázka kódu20 +ZKOPÍROVAT KÓD +@media (max-width: 768px) { +} +11. Rodina písma + +Nastavte rodinu písma Roboto pomoci vlastnosti font-family na selektoru body. +Nejdříve musite písmo Roboto naimportovat. +Úkol můžete dle návodu v linku nahrát na Github a odkaz poslat lektorům do soukromé zprávy na Discordu. \ No newline at end of file diff --git a/YourTravelAssistant/Readme.md b/YourTravelAssistant/Readme.md new file mode 100644 index 0000000..6f1c811 --- /dev/null +++ b/YourTravelAssistant/Readme.md @@ -0,0 +1,3 @@ +# První povinný projekt v rámci Akademii Engeto - front-end developers + +- K projektu připravuji zároveň i testy v frameworku Playwright pod tímto [odkazem](https://github.com/LukasKanka/YourTravelAssistant_Playwright.git). diff --git a/YourTravelAssistant/icons/PngItem_1608357.png b/YourTravelAssistant/icons/PngItem_1608357.png new file mode 100644 index 0000000..f7dec9b Binary files /dev/null and b/YourTravelAssistant/icons/PngItem_1608357.png differ diff --git a/YourTravelAssistant/icons/car-white.png b/YourTravelAssistant/icons/car-white.png new file mode 100644 index 0000000..c6f325c Binary files /dev/null and b/YourTravelAssistant/icons/car-white.png differ diff --git a/YourTravelAssistant/icons/cycle-white.png b/YourTravelAssistant/icons/cycle-white.png new file mode 100644 index 0000000..6387aaa Binary files /dev/null and b/YourTravelAssistant/icons/cycle-white.png differ diff --git a/YourTravelAssistant/icons/hiking-white.png b/YourTravelAssistant/icons/hiking-white.png new file mode 100644 index 0000000..36c90f2 Binary files /dev/null and b/YourTravelAssistant/icons/hiking-white.png differ diff --git a/YourTravelAssistant/icons/water-white.png b/YourTravelAssistant/icons/water-white.png new file mode 100644 index 0000000..62ffeda Binary files /dev/null and b/YourTravelAssistant/icons/water-white.png differ diff --git a/YourTravelAssistant/images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg b/YourTravelAssistant/images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg new file mode 100644 index 0000000..5d0fcc9 Binary files /dev/null and b/YourTravelAssistant/images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg differ diff --git a/YourTravelAssistant/images/anneliese-phillips-uv4-vl3liKM-unsplash.jpg b/YourTravelAssistant/images/anneliese-phillips-uv4-vl3liKM-unsplash.jpg new file mode 100644 index 0000000..c0a2f3c Binary files /dev/null and b/YourTravelAssistant/images/anneliese-phillips-uv4-vl3liKM-unsplash.jpg differ diff --git a/YourTravelAssistant/images/chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg b/YourTravelAssistant/images/chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg new file mode 100644 index 0000000..b50e05d Binary files /dev/null and b/YourTravelAssistant/images/chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg differ diff --git a/YourTravelAssistant/images/daniel-tseng-73lmMKhi2U8-unsplash.jpg b/YourTravelAssistant/images/daniel-tseng-73lmMKhi2U8-unsplash.jpg new file mode 100644 index 0000000..2187830 Binary files /dev/null and b/YourTravelAssistant/images/daniel-tseng-73lmMKhi2U8-unsplash.jpg differ diff --git a/YourTravelAssistant/images/holly-mandarich-UVyOfX3v0Ls-unsplash.jpg b/YourTravelAssistant/images/holly-mandarich-UVyOfX3v0Ls-unsplash.jpg new file mode 100644 index 0000000..7c6b25f Binary files /dev/null and b/YourTravelAssistant/images/holly-mandarich-UVyOfX3v0Ls-unsplash.jpg differ diff --git a/YourTravelAssistant/images/james-wheeler-ZOA-cqKuJAA-unsplash.jpg b/YourTravelAssistant/images/james-wheeler-ZOA-cqKuJAA-unsplash.jpg new file mode 100644 index 0000000..fb86588 Binary files /dev/null and b/YourTravelAssistant/images/james-wheeler-ZOA-cqKuJAA-unsplash.jpg differ diff --git a/YourTravelAssistant/images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg b/YourTravelAssistant/images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg new file mode 100644 index 0000000..2f11f0f Binary files /dev/null and b/YourTravelAssistant/images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg differ diff --git a/YourTravelAssistant/images/julian-bialowas-ilkTnuMunP8-unsplash.jpg b/YourTravelAssistant/images/julian-bialowas-ilkTnuMunP8-unsplash.jpg new file mode 100644 index 0000000..4507328 Binary files /dev/null and b/YourTravelAssistant/images/julian-bialowas-ilkTnuMunP8-unsplash.jpg differ diff --git a/YourTravelAssistant/images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg b/YourTravelAssistant/images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg new file mode 100644 index 0000000..81fc614 Binary files /dev/null and b/YourTravelAssistant/images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg differ diff --git a/YourTravelAssistant/images/matej-drha-rbDzMcJsBkY-unsplash.jpg b/YourTravelAssistant/images/matej-drha-rbDzMcJsBkY-unsplash.jpg new file mode 100644 index 0000000..9ed51ea Binary files /dev/null and b/YourTravelAssistant/images/matej-drha-rbDzMcJsBkY-unsplash.jpg differ diff --git a/YourTravelAssistant/images/omer-salom-LoijtQXXNhs-unsplash.jpg b/YourTravelAssistant/images/omer-salom-LoijtQXXNhs-unsplash.jpg new file mode 100644 index 0000000..2ac3aa8 Binary files /dev/null and b/YourTravelAssistant/images/omer-salom-LoijtQXXNhs-unsplash.jpg differ diff --git a/YourTravelAssistant/images/patrick-szylar-45bM3XGqnDE-unsplash.jpg b/YourTravelAssistant/images/patrick-szylar-45bM3XGqnDE-unsplash.jpg new file mode 100644 index 0000000..d2c57ae Binary files /dev/null and b/YourTravelAssistant/images/patrick-szylar-45bM3XGqnDE-unsplash.jpg differ diff --git a/YourTravelAssistant/images/scott-goodwill-y8Ngwq34_Ak-unsplash.jpg b/YourTravelAssistant/images/scott-goodwill-y8Ngwq34_Ak-unsplash.jpg new file mode 100644 index 0000000..c688660 Binary files /dev/null and b/YourTravelAssistant/images/scott-goodwill-y8Ngwq34_Ak-unsplash.jpg differ diff --git a/YourTravelAssistant/images/simon-english-48nerZQCHgo-unsplash.jpg b/YourTravelAssistant/images/simon-english-48nerZQCHgo-unsplash.jpg new file mode 100644 index 0000000..6c009a8 Binary files /dev/null and b/YourTravelAssistant/images/simon-english-48nerZQCHgo-unsplash.jpg differ diff --git a/YourTravelAssistant/images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg b/YourTravelAssistant/images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg new file mode 100644 index 0000000..f436b0a Binary files /dev/null and b/YourTravelAssistant/images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg differ diff --git a/YourTravelAssistant/index.html b/YourTravelAssistant/index.html new file mode 100644 index 0000000..5a502dd --- /dev/null +++ b/YourTravelAssistant/index.html @@ -0,0 +1,216 @@ + + + + + + + + + + + Document + + +
+ + + + + +
+
+

Your
+ Travel
+ Assistant

+
+
+ + +
+
+
+
+

About Us

+

Leigh McAdam is a Calgary-based writer, photographer and social media + enthusiast with over + 48,000 + followers. Her blog: HikeBikeTravel is frequently cited as one of the top travel and outdoor + adventure blogs in Canada, and consistently receives over 135,000 monthly page views. She + shares + her enthusiasm for the outdoors as a brand ambassador for Sporting Life, and has worked on + campaigns for Travel Alberta, Expedia and Flight Hub. Leigh is the author of Discover + Canada: + 100 Inspiring Outdoor Adventures. Currently, she is co-authoring: 125 Nature Hot Spots in + Alberta (spring 2018). A true adventurer, Leigh will try anything once, except perhaps + bungee + jumping. +

+
+
# +
+
+
+ + +
+
+
+

What We Do

+

Opportunities for challenging hikes and pleasant strolls are scattered all + over this planet; you + just + need to know where to find them. We do. Kilimanjaro, Everest Base Camp, Patagonia, and the Inca + Trail are out there, waiting for you to walk all over them. We’re proud of our record of + successful + ascents (over 92% of our travellers make it to the top of Kili, depending on the route), but + it’s + our CEOs and local guides that make the journey itself as memorable as the summit. And if you’re + not + into big climbs, don’t sweat it; we’ve got loads of lower-impact walks and iconic treks you’ll + love, + too.

+
+ +
    +
  • #
    +

    Hiking

    + +
    • +
  • #
    +

    Cycling

    +
    • +
  • #
    +

    Surfing

    +
    • +
  • #
    +

    Car trips

    +
    • +
+
+
+ + +
+
+
+
+
+
+
Our Trips
+
+
+
+
+
+
+ + +
+
+
+ +
+

Where do you
want to go?

+

Where do you want to go?

+
+
+

+ You’ll find 21 detailed adventure guides, over a hundred practical travel tips, book reviews + on + anything outdoors related, packing lists on a range of outdoor activities including + kayaking, + backpacking and camping as well as honest hotel and B&B reviews. +

+

Contact us and we will help you!

+
+ CONTACT US +
+
+
+
+
+ + +
+

Reviews

+
+

Our amazing clients are the reason we exist, and their reactions to our + customized travel experiences + and personalized service keep us smiling all day long. Here is just a sampling of what they’ve said: +

+
+
+
+ # +
+ She has booked two major European trips for us in the past year and every aspect has met, and + in + most cases exceeded, our expectations. Best prices, best hotels, best itineraries, and best + cruises, she does it all. But the most important thing is she remembers the little things + that + we would do if we were making the plans ourselves. +
+ Bertie Norton +
+
+
+
+ # +
+ Leigh McAdam has been making my travel arrangements for about 20 years and there is no one + else I would trust to arrange my trips and tours. I've also had great fun on a few of the + group trips she has arranged - Peru & Machu Picchu and a 10-day cruise out of Venice and + diving. It's always an eclectic group of well traveled, interesting people. +
+ Frank Kinney +
+
+
+
+
+ + +
+
+ picture-1 + picture-2 + picture-3 + picture-4 +
+
+ + +
+
+
+ Contact +
+

+ © 2022 - Your Travel Assistant. All Rights Reserved. +

+ + +
+
+
+
+
+ +
+ + + + + + diff --git a/YourTravelAssistant/style.css b/YourTravelAssistant/style.css new file mode 100644 index 0000000..70d2925 --- /dev/null +++ b/YourTravelAssistant/style.css @@ -0,0 +1,554 @@ +:root { + --word-black: #000; + --word-white: #fff; + --link-one: #efa69d; + --link-two: #e9877b; + --background-one: #33292a; + --background-two: #644b4f; + --background-three: #333333; + --background-four: #f2f2f2; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Roboto", sans-serif; +} + +/* Navigace (horní menu) */ +nav { + padding: 10px; + background-color: var(--background-one); + font-size: 20px; +} +a { + text-decoration: none; + color: var(--word-white); +} + +nav ul { + list-style: none; + display: flex; + justify-content: space-between; + flex-grow: 1; +} + +.navigation { + width: 65%; + margin: 0 auto; +} + +.icon { + width: auto; + height: 22px; + display: none; + margin-left: auto; + margin-right: 12px; +} + +.icon img { + width: 100%; + height: 100%; +} + +@media (max-width: 768px) { + .navigation { + width: 90%; + margin: 0 auto; + } + + nav a { + display: none; + } + + .icon { + display: block; + } +} + +/* Hero - section */ +.hero-section { + height: 80vh; + background-image: url(images/scott-goodwill-y8Ngwq34_Ak-unsplash.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.hero-text-wrapper { + position: relative; + width: 65%; + margin: 0 auto; + height: 100%; +} + +.hero-text { + color: var(--word-white); + position: absolute; + right: 0; + bottom: 50px; + font-size: 80px; + text-align: right; +} + +.h2-about { + font-weight: 700; +} + +@media (max-width: 768px) { + .hero-text-wrapper { + width: 90%; + margin: 0 auto; + } + .hero-text { + font-size: 35px; + height: 80px; + margin-bottom: 5px; + } +} + +/* About sekce */ + +.about-section { + margin: 45px 0; +} + +.about-section-wrapper { + width: 65%; + margin: 0 auto; + display: flex; + gap: 20px; +} + +.about-text { + flex: 1; +} + +.about-img { + flex: 1; +} +img { + width: 100%; + height: 100%; + object-fit: cover; +} + +@media (max-width: 768px) { + .about-section-wrapper { + flex-direction: column; + width: 90%; + margin: 0 auto; + } + + .about-text { + text-align: left; + } + + .about-img { + text-align: center; + } + + .about-text-p { + padding-top: 15px; + } +} + +/* What We Do */ + +.what-section { + background-color: var(--background-one); + color: var(--word-white); +} + +.what-section-wrapper { + width: 65%; + margin: 0 auto; +} +.what-text { + text-align: center; +} +.h2-what-we { + font-size: 38px; + text-align: center; + padding-top: 45px; + padding-bottom: 35px; +} + +.where-text { + text-align: center; +} +.icon-what-section { + margin-top: 45px; + padding: 45px; + list-style: none; + display: flex; + justify-content: space-between; + flex-grow: 1; +} + +.img-icons { + width: 100px; + height: 100px; + align-items: center; +} + +.icon-text { + text-align: center; + padding-top: 15px; + font-size: 25px; +} + +@media (max-width: 768px) { + .what-section-wrapper { + width: 90%; + margin: 0 auto; + } + + .icon-what-section { + flex-direction: column; + align-items: center; + text-align: center; + } + + .img-icons { + width: 80px; + height: 80px; + margin-top: 20px; + align-items: center; + } + + .icon-text { + padding-top: 0px; + } +} + +/* Our Trips */ + +.trips-section { + margin-top: 45px; + margin-bottom: 45px; +} +.trips-section-wrapper { + display: flex; + flex-wrap: wrap; + width: 65%; + margin: auto; + gap: 10px; +} + +.images-item { + height: 222px; + width: 32%; + flex-shrink: 1; + border-radius: 4px; +} + +.images-trips-1 { + background-image: url(images/simon-english-48nerZQCHgo-unsplash.jpg); + background-size: cover; + background-position: center; +} + +.images-trips-2 { + background-image: url(images/james-wheeler-ZOA-cqKuJAA-unsplash.jpg); + background-size: cover; + background-position: center; +} + +.images-trips-3 { + background-image: url(images/daniel-tseng-73lmMKhi2U8-unsplash.jpg); + background-size: cover; + background-position: center; +} + +.images-trips-4 { + background-image: url(images/holly-mandarich-UVyOfX3v0Ls-unsplash.jpg); + background-size: cover; + background-position: center; +} + +.text-trips { + background-color: var(--background-four); + color: var(--word-black); + display: flex; + justify-content: center; + align-items: center; + font-size: 32px; + font-weight: 700; +} + +.images-trips-5 { + background-image: url(images/patrick-szylar-45bM3XGqnDE-unsplash.jpg); + background-size: cover; + background-position: center; +} + +.images-trips-6 { + background-image: url(images/chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg); + background-size: cover; + background-position: center; +} + +.images-trips-7 { + background-image: url(images/julian-bialowas-ilkTnuMunP8-unsplash.jpg); + background-size: cover; + background-position: center; +} + +.images-trips-8 { + background-image: url(images/matej-drha-rbDzMcJsBkY-unsplash.jpg); + background-size: cover; + background-position: center; +} + +@media (max-width: 768px) { + .trips-section-wrapper { + width: 90%; + margin: 0 auto; + } + + .images-item { + width: 333px; + height: 222px; + } + + .text-trips { + height: 80px; + } +} + +/* Where togo */ +.where-section { + background-color: var(--background-two); + color: var(--word-white); + display: flex; +} + +.where-section-wrapper { + width: 65%; + margin: 0 auto; + padding-top: 45px; + padding-bottom: 45px; + display: flex; +} + +.where-text { + display: flex; +} + +.h2-where { + flex: 1; + font-size: 25px; + width: 272px; + height: 114px; + text-align: left; +} + +.where-text-div { + flex: 1; + width: 572; + height: 201; + text-align: left; +} + +.contact-text { + margin-top: 20px; +} + +.contact-button { + margin-top: 35px; + background-color: var(--background-four); + width: 133px; + height: 43px; + border-radius: 4px; + text-align: center; + line-height: 43px; +} + +.contact-button-text { + font-size: 14px; + font-weight: 700; + font-family: Inter; + color: var(--word-black); + display: block; +} +.mobile { + display: none; +} + +@media (max-width: 768px) { + .where-section-wrapper { + width: 90%; + margin: 0 auto; + } + + .where-text { + flex-direction: column; + } + .desktop { + display: none; + } + + .mobile { + display: block; + font-size: 25px; + margin-bottom: 25px; + } +} + +/* Reviews section */ + +.reviews-section { + width: 65%; + margin: 0 auto; + margin-top: 45px; + margin-bottom: 45px; +} +.h2-reviews { + text-align: center; + padding-bottom: 20px; +} +.reviews-text { + width: 332px; + height: 159px; + text-align: center; + margin: auto; +} + +.reviews-card-wrapper { + display: flex; + align-items: center; + justify-content: space-evenly; + gap: 300px; +} + +.reviews-card { + width: 378.49px; + height: 346px; + text-align: center; +} + +.reviews-card-1 { + width: 378.49px; + height: 346px; + text-align: center; +} + +.reviews-card img { + width: 122.13px; + height: 111px; + border-radius: 50%; +} + +.reviews-card-1 img { + width: 122.13px; + height: 111px; + border-radius: 50%; +} + +.reviews-card-text { + margin-top: 20px; +} + +.reviews-name { + font-weight: 700; + padding-top: 50px; + height: 19px; + align-items: center; +} + +@media (max-width: 768px) { + .reviews-section { + width: 90%; + margin: 0 auto; + } + + .reviews-card-wrapper { + flex-direction: column; + width: 90%; + margin: 0 auto; + gap: 95px; + } + .reviews-card { + width: 324px; + } + + .reviews-card-1 { + width: 324px; + } + + .reviews-text { + width: 263px; + } + + .h2-reviews { + padding-top: 40px; + } + + .reviews-name { + padding-bottom: 40px; + } +} + +/* Photo gallery */ +.photo-gallery { + /* display: flex; */ + /* flex-wrap: wrap; */ +} +.photo-gallery-wrapper { + display: flex; + flex-wrap: wrap; +} + +.picture-img { + width: 100%; + height: auto; + display: block; + object-fit: cover; + max-width: 50%; +} + +@media (max-width: 768px) { + .photo-gallery-wrapper { + flex-direction: column; + margin-top: 100px; + } + .picture-img { + max-width: 100%; + height: 260px; + } +} + +/* Footer */ +.footer-wrapper { + background-color: var(--background-three); + padding: 45px; +} + +.footer-text { + text-align: center; +} +.footer-contact { + color: var(--link-two); + text-decoration: underline; + font-weight: 700; +} +.footer-text-p { + padding-top: 20px; + text-align: center; + color: var(--word-white); + font-weight: 700; +} + +@media (max-width: 768px) { + .footer-contact { + font-size: 12px; + } + .footer-text-p { + font-size: 10px; + } +} diff --git a/karta-produktu oprv. po hodnocení/karta-produktu/.vscode/settings.json b/karta-produktu oprv. po hodnocení/karta-produktu/.vscode/settings.json new file mode 100644 index 0000000..f541da5 --- /dev/null +++ b/karta-produktu oprv. po hodnocení/karta-produktu/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/karta-produktu oprv. po hodnocení/karta-produktu/Raadme.md b/karta-produktu oprv. po hodnocení/karta-produktu/Raadme.md new file mode 100644 index 0000000..e69de29 diff --git a/karta-produktu oprv. po hodnocení/karta-produktu/images/psi-hracka.png b/karta-produktu oprv. po hodnocení/karta-produktu/images/psi-hracka.png new file mode 100644 index 0000000..8a2bcd6 Binary files /dev/null and b/karta-produktu oprv. po hodnocení/karta-produktu/images/psi-hracka.png differ diff --git a/karta-produktu oprv. po hodnocení/karta-produktu/index.html b/karta-produktu oprv. po hodnocení/karta-produktu/index.html new file mode 100644 index 0000000..499119d --- /dev/null +++ b/karta-produktu oprv. po hodnocení/karta-produktu/index.html @@ -0,0 +1,55 @@ + + + + + + + + + Karta produktu + + + + +
+ +
+ Jen u nás + -27% +
+ +
+ +
+ + +

M-Pets Hračka Holly vánoční sněhulák

+ + +

Hračka pro psy - pro střední a velká plemena, vydává zvuky, materiál polyester, bílá barva +

+ + +
+
Výměna nevhodného dárku za poukaz do 31.1.2024 nyní zdarma! Více informací klini na odkaz: Výměna + dárku. +
+
+ Výměna dárku +
+
+ + +
+

149,-

+ 109,- + Do košíku +
+ + + Skladem > 5 ks + Doprava zdarma +
+ + + \ No newline at end of file diff --git a/karta-produktu oprv. po hodnocení/karta-produktu/style.css b/karta-produktu oprv. po hodnocení/karta-produktu/style.css new file mode 100644 index 0000000..55fe50f --- /dev/null +++ b/karta-produktu oprv. po hodnocení/karta-produktu/style.css @@ -0,0 +1,147 @@ +:root { + --special-yellow: hsl(56, 94%, 49%); + --special-yellow-2: rgb(231, 231, 149); + --special-red-original: red; + --special-red: #db090d; + --special-black: #040303; + --special-white: #f7f7f7; + --special-green: rgb(0, 128, 0); + --special-agua: rgb(8, 126, 126); + --special-pink: palevioletred; +} +.product-card { + position: relative; + width: 450px; + background-color: var(--special-white); + padding: 16px; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + border: 6px solid var(--special-black); + + /* responzivita */ + width: calc(100% - 32px); + max-width: 800px; + margin: auto; +} + +.whell { + position: absolute; +} + +.product-only { + background-color: var(--special-yellow); + position: absolute; + border-radius: 50%; + width: 120px; + height: 80px; + left: 35px; + top: 60px; + text-align: center; + font-size: 25px; + color: var(--special-white); + font-weight: bold; + padding-top: 50px; +} + +.discount-badge { + background-color: var(--special-red); + position: absolute; + border-radius: 50%; + width: 120px; + height: 80px; + left: 35px; + top: 160px; + text-align: center; + font-size: 25px; + color: var(--special-white); + font-weight: bold; + padding-top: 50px; +} + +.product-image { + width: 95%; + height: 90%; +} + +h1 { + color: var(--special-agua); +} + +.button { + color: var(--special-red); + border-style: solid; + text-decoration: none; + padding-right: 6px; + padding-left: 6px; + border-radius: 6px; + background-color: var(--special-yellow-2); +} +.product-price-container { + padding: 8px; + background-color: var(--special-pink); + margin-bottom: 16px; + position: relative; + border-radius: 6px; + top: 15px; +} + +.product-price { + font-weight: bold; + font-size: 40px; + display: inline-block; + padding: 8px; + background-color: var(--special-red-original); + border-radius: 6px; +} + +.product-price-old { + font-size: 20px; + color: var(--special-white); + text-decoration: line-through; + width: 75px; + background-color: var(--special-yellow); + margin-top: 1px; + margin-bottom: 1px; + padding-left: 35px; + border-radius: 6px; + font-weight: bold; +} + +.shopping-button { + color: var(--special-black); + font-weight: bold; + font-size: 30px; + text-decoration: none; + position: absolute; + top: 30px; + right: 30px; + border-radius: 6px; + background-color: var(--special-yellow-2); + padding-left: 5px; + padding-right: 5px; + border-style: solid; +} + +.stock { + font-weight: bold; + color: var(--special-green); + font-size: 20px; + padding: 10px; +} + +.transport { + padding-left: 135px; + font-size: 20px; + font-weight: bold; +} + +.button-container { + margin-top: 10px; + /* margin-bottom: 15px; */ +} + +/* ˇMobily */ +@media screen and (max-width: 600px) { + body { + width: calc(100% - 16px); + } +}