project

.htaccess

@@ -1,6 +0,0 @@
-RewriteEngine on
-RewriteCond %{HTTP:X-Forwarded-Proto} !https
-RewriteCond %{HTTP_USER_AGENT} !(BlackBerry)
-RewriteCond %{HTTP_USER_AGENT} !(Windows\sNT\s5\.[12])
-RewriteCond %{HTTP_HOST} ^(www\.)?lukaskanka.cz
-RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L]

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).

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

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>Document</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>

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="images/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>

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>

o-mne.html

@@ -45,9 +45,6 @@
         <li>
           <strong><a href="privaci-polici.html" class="tlacitko">Zásady ochrany osobních údaju</a></strong>
         </li>
-        <li>
-          <strong><a href="test-page/test-page.html" class="tlacitko">Test Page</a></strong>
-        </li>
       </ul>
       <h3>Kde všude mně najdete:</h3>
       <ul>

privaci-polici.html

@@ -32,10 +32,6 @@
         <li>
           <strong><a href="zivotopis.html" class="tlacitko">Životopis</a></strong>
         </li>
-
-        <li>
-          <strong><a href="test-page/test-page.html" class="tlacitko">Test Page</a></strong>
-        </li>
       </ul>
       <h3>Kde všude mně najdete:</h3>
       <ul>

projekty.html

@@ -14,8 +14,6 @@
 
 <body>
 
-
-
     <div class="flexbox-project">
         <h1 class="h1pr">Mé projekty</h1>
         <hr />
@@ -85,7 +83,21 @@
                 <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.html">zde.</a></p>
+                <p>Projekt Životopis najdete <a target="_blank" href="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="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-and-culture.html">zde</a></p>
+
             </div>
         </div>
     </div>

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

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

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);
+  }
+}

styly.css

@@ -100,6 +100,11 @@ a.tlacitko:hover {
   text-align: center;
 }
 
+.project {
+  margin-bottom: 15px;
+  padding: 10px;
+}
+
 @media screen and (max-width: 600px) {
   .flexbox-projekt {
     width: calc(100% - 16px);