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>