first commit

index/project/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).

index/project/YourTravelAssistant/cestovatel.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;
+  }
+}

index/project/YourTravelAssistant/cestovatel.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- Lukáš Kaňka -->
+<!-- lukas.kanka@outlook.cz -->
+<!-- Lukáš K. -->
+
+<head>
+    <link rel="stylesheet" type="text/css" href="cestovatel.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Travel Assistant</title>
+</head>
+
+<div>
+
+    <!-- Navigace -->
+    <nav>
+        <ul class="navigation" id="navigation">
+            <li><a href="#about">About Us</a></li>
+            <li><a href="#what-we-do">What We Do </a></li>
+            <li><a href="#trips">Our Trips</a></li>
+            <li><a href="#where">Where To Go</a></li>
+            <li><a href="#reviews">Reviews</a></li>
+        </ul>
+        <img class="icon" src="icons/PngItem_1608357.png" alt="#">
+
+    </nav>
+
+    <!-- Hero section -->
+    <header class="hero-section ">
+        <div class="hero-text-wrapper">
+            <h1 class="hero-text">Your <br>
+                Travel <br>
+                Assistant</h1>
+        </div>
+    </header>
+
+    <!-- About Us -->
+    <div class="content">
+        <section class="about-section" id="about">
+            <div class="about-section-wrapper">
+                <div class="about-text">
+                    <h2 class="h2-about">About Us</h2>
+                    <p class="about-text-p">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.
+                    </p>
+                </div>
+                <div class="about-img"><img class="about-img content-container"
+                        src="images/anneliese-phillips-uv4-vl3liKM-unsplash.jpg" alt="#">
+                </div>
+            </div>
+        </section>
+
+        <!-- What We Do -->
+        <section class="what-section" id="what-we-do">
+            <div class="what-section-wrapper">
+                <div class="what-text">
+                    <h2 class="h2-what-we">What We Do</h2>
+                    <p class="what-text-p">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.</p>
+                </div>
+
+                <ul class="icon-what-section">
+                    <li><img class="img-icons" src="icons/hiking-white.png " alt="#"><br>
+                        <p class="icon-text">Hiking</p>
+
+                    </li>
+                    <li><img class="img-icons" src="icons/cycle-white.png" alt="#"><br>
+                        <p class="icon-text">Cycling</p>
+                    </li>
+                    <li><img class="img-icons" src="icons/water-white.png" alt="#"><br>
+                        <p class="icon-text">Surfing</p>
+                    </li>
+                    <li><img class="img-icons" src="icons/car-white.png" alt="#"><br>
+                        <p class="icon-text">Car trips</p>
+                    </li>
+                </ul>
+            </div>
+        </section>
+
+        <!-- Our Trips -->
+        <section class="trips-section">
+            <div class="trips-section-wrapper">
+                <div class="images-trips-1 images-item "></div>
+                <div class="images-trips-2 images-item "></div>
+                <div class="images-trips-3 images-item "></div>
+                <div class="images-trips-4 images-item "></div>
+                <div class="text-trips images-item" id="trips">Our Trips</div>
+                <div class="images-trips-5 images-item "></div>
+                <div class="images-trips-6 images-item "></div>
+                <div class="images-trips-7 images-item "></div>
+                <div class="images-trips-8 images-item "></div>
+            </div>
+        </section>
+
+        <!-- Where togo -->
+        <section class="where-section" id="where">
+            <div class="where-section-wrapper">
+                <div class="where-text">
+
+                    <div class="h2-where">
+                        <h2 class="desktop">Where do you <br> want to go?</h2>
+                        <h2 class="mobile">Where do you want to go?</h2>
+                    </div>
+                    <div class="where-text-div">
+                        <p>
+                            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.
+                        </p>
+                        <p class="contact-text">Contact us and we will help you!</p>
+                        <div class="contact-button">
+                            <a href="#" class="contact-button-text">CONTACT US</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Reviews section -->
+        <section class="reviews-section" id="reviews">
+            <h2 class="h2-reviews">Reviews</h2>
+            <div class="reviews-text">
+                <p>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:
+                </p>
+            </div>
+            <div class="reviews-card-wrapper">
+                <div class="reviews-card">
+                    <img src="images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg" alt="#">
+                    <div class="reviews-card-text">
+                        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.
+                        <div class="reviews-name">
+                            Bertie Norton
+                        </div>
+                    </div>
+                </div>
+                <div class="reviews-card-1">
+                    <img src="images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" alt="#">
+                    <div class="reviews-card-text">
+                        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.
+                        <div class="reviews-name">
+                            Frank Kinney
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Photo galery -->
+        <section class="photo-gallery">
+            <div class="photo-gallery-wrapper">
+                <img class="picture-img" src="images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg" alt="picture-1">
+                <img class="picture-img" src="images/omer-salom-LoijtQXXNhs-unsplash.jpg" alt="picture-2">
+                <img class="picture-img" src="images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg" alt="picture-3">
+                <img class="picture-img" src="images/daniel-tseng-73lmMKhi2U8-unsplash.jpg" alt="picture-4">
+            </div>
+        </section>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <div class="footer-wrapper">
+                <div class="footer-text">
+                    <a class="footer-contact" href="#">Contact</a>
+                    <div class="footer-text-div">
+                        <p class="footer-text-p">
+                            © 2022 - Your Travel Assistant. All Rights Reserved.
+
+                        </p>
+
+
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+</div>
+
+</body>
+
+
+
+</html>

index/project/index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="cs">
+  <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" />
+    <meta name="Kankys Matrix" content="Kankys projekty." />
+    <title>Projekty</title>
+    <link rel="stylesheet" href="../../style/style.css" />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="../../res/site/icons/favicon.ico"
+    />
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script
+      id="MathJax-script"
+      async=""
+      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+    ></script>
+  </head>
+
+  <body>
+    <header class="page-header" role="banner">
+      <h1 class="project-name">Projekty</h1>
+      <h2 class="project-tagline">
+        Zde najdeš odkazy na mé projekty.
+      </h2>
+
+      <a href="../../" class="btn">Home</a>
+      
+    </header>
+
+    <main id="content" class="main-content" role="main">
+      
+        
+
+      <div class="flexbox-project">
+        <!-- <div class="menu-project">
+          
+        </div>
+       -->
+
+
+
+        <div class="content-pr">
+            <h2>
+                Vítám tě na této stránce, která slouží jako mapa pro mé projekty.
+            </h2>
+            <p>
+                Zde najtete projekty věnující se k tvorbě webu a hlavně mou cestu Akademií Engeto.
+            </p>
+            <p>
+                Všechny projekty jsou vytvořeny v HTML, CSS a strochou JavaScriptu. Ale určitě jsem přidám i další
+                projekty, které tvořím mimo Akademii.</p>
+            <p>
+                Projekty které se netýkají tworby webu, najdete na mém GitHubu přes tento odkaz na <a
+                    href="https://git.archoslinux.cz/kankys">Gitea</a>.
+            </p>
+            <p>
+                U každého projektu najdete popis a odkaz na něj. Buď na Gitea nebo na stránky, kde je projekt umístěn.
+            </p>
+        </div>
+
+        <div class="project">
+            <div class="pr1">
+                <h2>Projekt 1: Tento Blog</h2>
+                <p>
+                    Tento projekt je vytvořen mimo Akademii Engeto. Je to můj osobní blog, který postupně vylepšuji.
+                    Tato stránka slouží čistě jako má prezentace.</p>
+                <p>
+                    Postupně jsem přidávám své znolosti z HTML, CSS a také se snažím aby web byl co nejlépe
+                    responzivní. Tento projekt je nekončicí koloběh.
+                </p>
+            </div>
+
+            <div class="pr2">
+                <h2>Projekt 2: Životopis</h2>
+                <p>
+                    Tento projekt je jako první úkol v Akademii.</p>
+                <p>Zadání bylo vytvořit jednoduchý životpis na procvičení základů HTML a CSS. Později jsem ještě pomocí
+                    CSS nastavil v úkolu responsivní web pro mobilní zařízení.</p>
+                </p>
+                <p>Projekt Životopis najdete <a target="_blank" href="zivotopis/zivotopis.html">zde.</a></p>
+            </div>
+            <div class="pr3">
+                <h2>Projekt 3: Karta produktu</h2>
+                <p>Karta produktu. Na tomto projektu jsme se naučily pozicování elementu a pojmy jako Margin a Padding.
+                </p>
+                <p>Projekt Karta produkdu najdete <a target="_blank" href="kartaProduktu/karta-produktu.html">zde</a></p>
+            </div>
+
+            <div class="pr4">
+                <h2>Projekt 4: Nature and Culture</h2>
+                <p>Tento projekt je zaměřen na responsivitu webu pro mobilní zařízení a také jsme použily porvé Flexbox.
+                </p>
+                <p>Projekt Nature and Culture najdete <a target="_blank" href="nature/nature-and-culture.html">zde</a></p>
+
+            </div>
+            <div class="pr5">
+                <h2>Projekt 5: Your Travel Assistant</h2>
+                <p>Tento projekt je vytvořen mimo Akademii Engeto. Jedná se o stránku pro cestovatele.</p>
+                <p>Zadání jsme měli jako na reálném projektu a grafické rozložení se dělalo dle Figmi. Tento projekt byl hodnocený a je jeden ze tří projektů k získání certifikátu v Akademii.</p>
+                <p>Projekt najdeš pod tímto <a target="_blank" href="YourTravelAssistant/cestovatel.html">odkazem</a>. Od finální verze co jsem odevzdal se mírně liší, ještě před odevzdáním jsem vychytával poslední mouchy.</p>
+            </div>
+        </div>
+    </div>
+
+ 
+
+      <footer class="site-footer">
+        Copyright &copy; Lukáš Kaňka 2024
+      </footer>
+    </main>
+  </body>
+</html>

index/project/kartaProduktu/karta-produktu.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="cs">
+
+<head>
+    <meta keywords="Karta produktu, Sněhulák, Psí hračka">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.karta.css">
+    <title>Karta produktu</title>
+</head>
+
+<body>
+    <!-- Product Card -->
+    <div class="product-card">
+        <!-- Product Labels -->
+        <div class="whell">
+            <span class="product-only">Jen u nás</span>
+            <span class="discount-badge">-27%</span>
+        </div>
+        <!-- Product Image -->
+        <div class="product-image-container">
+            <img class="product-image" src="img/psi-hracka.png" />
+        </div>
+
+        <!-- Product Title -->
+        <h1>M-Pets Hračka Holly vánoční sněhulák</h1>
+
+        <!-- Product Description -->
+        <p><strong>Hračka pro psy - pro střední a velká plemena, vydává zvuky, materiál polyester, bílá barva</strong>
+        </p>
+
+        <!-- Product Change Offer -->
+        <div class="product-change">
+            <div>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.
+            </div>
+            <div class="button-container">
+                <a class="button" href="#">Výměna dárku</a>
+            </div>
+        </div>
+
+        <!-- Product Price -->
+        <div class="product-price-container">
+            <p class="product-price-old">149,-</p>
+            <span class="product-price">109,-</span>
+            <span><a class="shopping-button" href="#">Do košíku</a></span>
+        </div>
+
+        <!-- Product Stock and Transport -->
+        <span class="stock">Skladem > 5 ks</span>
+        <span class="transport">Doprava zdarma</span>
+    </div>
+</body>
+
+</html>

index/project/kartaProduktu/style.karta.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);
+  }
+}

index/project/nature/nature-and-culture.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="cs">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="style-nature.css" rel="stylesheet" />
+    <title>Hero</title>
+</head>
+
+<body>
+    <!-- Navigace -->
+    <nav>
+        <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Explore</a></li>
+            <li><a href="#">Contact US</a></li>
+        </ul>
+        <img class="icon" src="images/PngItem_1608357.png">
+    </nav>
+
+    <!-- Hero section -->
+    <div class="hero-section">
+        <div class="hero-text">
+            <div class="hero-subtitle">Exploring Icelandic Villages</div>
+            <div class="hero-title">
+                <h1>Nature and Culture Converge</h1>
+            </div>
+        </div>
+    </div>
+
+
+
+    <!-- image bird -->
+    <div class="image-container">
+        <img src="images/photo-1512419180521-2c5585bdf851.avif" alt="" bird>
+    </div>
+</body>
+
+</html>

index/project/nature/style-nature.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;
+  }
+}

index/project/zivotopis/Folder.DotSettings.user

@@ -0,0 +1,2 @@
+<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+	<s:String x:Key="/Default/CodeInspection/PencilsConfiguration/Storage/@EntryValue">ThisComputer</s:String></wpf:ResourceDictionary>

index/project/zivotopis/README.md

@@ -0,0 +1,3 @@
+# zivotopis_engeto
+
+První zadání pro nepovinný domácí úkol, vytvořit CV.

index/project/zivotopis/style-cv.css

@@ -0,0 +1,86 @@
+:root {
+  --my-black: black;
+  --my-beckground: #ded4d4;
+  max-width: 1200px;
+  margin: auto;
+}
+
+body {
+  background-color: var(--my-beckground);
+  max-width: 1200px;
+  margin: auto;
+  margin-bottom: 25px;
+}
+@media screen and (max-width: 600px) {
+  body {
+    width: calc(100% - 16px);
+  }
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+}
+
+.tlacitko {
+  color: var(--my-black);
+}
+
+td,
+th {
+  border: 1px solid var(--my-black);
+  padding: 15px;
+}
+
+.flexbox {
+  display: flex;
+  max-width: auto;
+  margin: auto;
+}
+.flexbox-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu {
+  margin-top: 25px;
+}
+
+.content {
+  order: 2;
+  flex: 3;
+  padding: 55px;
+  margin-top: -45px;
+}
+.dot {
+  list-style-type: none;
+}
+.jobs,
+.course,
+.fun {
+  font-size: 20px;
+}
+.title {
+  text-align: center;
+  order: 1;
+}
+
+@media screen and (max-width: 600px) {
+  .flexbox {
+    flex-direction: column;
+  }
+
+  .menu {
+    order: 1;
+    text-align: center;
+  }
+  .dot-none {
+    list-style-type: none;
+  }
+  /* .content {
+    order: 3;
+  } */
+  .title {
+    order: -1;
+  }
+}

index/project/zivotopis/zivotopis.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="cs">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta name="description" content="CV Lukáše Kaňky" />
+  <meta name="keywords" content="Hlavní strana" />
+  <meta name="author" content="Lukáš Kaňka" />
+  <link rel="stylesheet" href="style-cv.css" />
+  <title>Životopis</title>
+</head>
+
+<body>
+  <div class="flexbox">
+    <!-- <div class="title">
+      <h1>ŽIVOTOPIS LUKÁŠ<br> KAŇKA</h1>
+    </div> -->
+
+
+    <div class="menu">
+      <img src="./image/1702045296079.jpeg" width="200" height="200" alt="Lukáš Kaňka" />
+      <h2>Státní příslušnost:</h2>
+      <ul class="dot-none">
+        <li>Česká</li>
+      </ul>
+
+      <h2>Datum narození:</h2>
+      <ul class="dot-none">
+        <li>2.4.1981</li>
+      </ul>
+      <h2>Kontakty:</h2>
+      <ul class="dot-none">
+        <li>
+
+          <a class="tlacitko" href="Tel: +420 725 303 747">Telefon: +420 725 303 747</a>
+        </li>
+        <li>
+          <a class="tlacitko" href="Mailto:lukas.kanka@lukan.cz" target="_blank">Email
+          </a>
+        </li>
+        <li>
+          <a class="tlacitko" href="https://lukaskanka.cz" target="_blank">Web</a>
+        </li>
+        <li>
+          <a class="tlacitko" href="https://github.com/LukasKanka" target="_blank">GitHub</a>
+        </li>
+        <li>
+          <a class="tlacitko" href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/"
+            target="_blank">LinkedIn</a>
+        </li>
+      </ul>
+
+      <h2>Adresa:</h2>
+      <ul class="dot-none">
+        <li>Petržílkova 27</li>
+        <li>Praha 13</li>
+        <li>158 00</li>
+      </ul>
+
+    </div>
+    <div class="flexbox-content">
+      <div class="title">
+        <h1>ŽIVOTOPIS<br> LUKÁŠ KAŇKA</h1>
+      </div>
+
+
+      <div class="content">
+
+        <section class="info-section">
+          <h2>O MNĚ</h2>
+          <hr />
+          <p>
+            IT nadšenec s pozitivním přístupem k životu a vášní pro technologie.
+            Do světa IT jsem vstoupil jako Support, pak mě osud dovedl na pozici
+            Testera a v současné době měním svůj kariérní směr do Front-Endu. Kód
+            i programování mě lákalo už dlouho, baví mě zobrazení okamžitého
+            výsledku, který mi umožňuje zlepšení a zdokonalení kódu. Aktuálně se
+            vzdělávám ve Front-End Developer Akademii se zaměřením na znalosti
+            v JavaScript, HTML, CSS. Jako návazný krok bych své znalosti rád
+            prohluboval ve frameworcích React, Angular.
+          </p>
+        </section>
+        <section class="job-section">
+          <h2>PRACOVNÍ ZKUŠENOSTI</h2>
+          <hr />
+          <ul class="dot">
+            <li>
+              <strong class="jobs">Tester softwaru</strong>
+            </li>
+            <li><strong>Uniprog Solutions, a.s [ 15/08/2022 – 14/08/2023 ]</strong></li>
+            <li>Město: Praha</li>
+            <li>Země: Česko</li>
+            <li>Manuální testování PowerBuilder aplikací.</li>
+            <li>Údržba a oprava automatizovaných testů Cucumber.</li>
+            <li>Manuální testování webových aplikací dle Test Case a dokumentace.</li>
+            <li>Komunikace napříč vývojovými týmy.</li>
+            <li>Technologie: MSSQL, Jira, PowerBuilder, GitLab.</li>
+          </ul>
+          <ul class="dot">
+            <li><strong class="jobs">IT support</strong></li>
+            <li><strong>Comfort Finance Group CFG Živnostník [ 04/2022 – 07/2022 ]</strong></li>
+            <li> Město: Praha </li>
+            <li>Země: Česko </li>
+            <li>Poskytování IT podpory uživatelům (SW, HW), onboarding nováčků,
+              evidence skladu vybavení, řešení nastalých technických problémů.</li>
+            <li>Reporting systémových chyb na adekvátní oddělení.</li>
+            <li>Práce v OS Ubuntu Linux.</li>
+            <li>Práce s nástroji jako Intergromat, Jira.</li>
+          </ul>
+          <ul class="dot">
+            <li><strong class="jobs">Řidič dodávky</strong></li>
+            <li>
+              <strong>Artglass Lighting Na plný úvazek [ 03/2016 – 04/2020 ]</strong><br />
+              Země: Česko <br />
+              Řízení dodávky, komunikace se zákazníky, podpora prodeje.
+            </li>
+          </ul>
+          <ul class="dot">
+            <li><strong class="pozice">Řidič nákladního vozu</strong></li>
+            <li>
+              <strong>ČSAD Liberec Na plný úvazek [ 07/2006 – 08/2014 ]</strong>
+            </li>
+            <li>Řízení nákladních vozidel (MAN, DAF, Iveco, Renault).
+            </li>
+          </ul>
+        </section>
+        <section class="edu-section">
+          <h2>VZDĚLÁNÍ A ODBORNÁ PŘÍPRAVA</h2>
+          <hr />
+          <ul class="dot">
+            <li><strong class="course">Základy Testingu, SQL, Web Services</strong></li>
+            <li>
+              <strong>Acamar [ 08/2020 ]</strong>
+            </li>
+            <li>Město: Praha </li>
+            <li>Země: Česko</li>
+          </ul>
+          <ul class="dot">
+            <li><strong class="course">Úvod do Playwright</strong></li>
+            <li><strong>Tesena [ 04/2023 ]</strong></li>
+            <li>Město: Praha </li>
+            <li>Země: Česko</li>
+          </ul>
+        </section>
+        <section class="hobby-section">
+          <h2>ZÁJMY A KONÍČKY</h2>
+          <hr />
+          <ul class="dot">
+            <li><strong class="fun">
+                Opensource, Linux, Sebevzdělávání v testingu a dalších technologiích,
+                Cyklistika
+              </strong></li>
+            <li>
+              Na mi mo pracovních projektech mám základní zkušenosti se SW a
+              technologiemi jako: C#, .Net, NUnit, Selenium, Selenide,Cypress,
+              Playwrigt, Java, Linux Ubuntu a další distribuce, Docker, MacOS,
+              MangoDB, Windows, Obsidian. <br />
+              Mimo jiné se ve volném čase účastním amatérských závodů na kole a rád
+              si zaběhám.
+            </li>
+          </ul>
+          <h2>DOBROVOLNICKÁ ČINNOST</h2>
+          <hr />
+          <ul class="dot">
+            <li><strong class="fun">Maper Missing Maps</strong></li>
+            <li>
+              Ve volném čase mapuji pro humanitární účely, v projektu
+              <a class="tlacitko" href="https://www.missingmaps.org" target="_blank">Missing Maps</a>
+              pomocí OSM na platformě
+              <a class="tlacitko" href="https://tasks.hotosm.org" target="_blank">Hot Tasking Manager</a>.
+            </li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  </div>
+  <footer>Copyright &copy; Lukáš Kaňka 2023</footer>
+</body>
+
+</html>