This commit is contained in:
Lukáš 2024-01-31 01:36:38 +01:00
parent afd8fafcbc
commit 11e7bc8383
87 changed files with 5808 additions and 4557 deletions

View File

@ -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]

View File

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

View File

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

View File

@ -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. Were proud of our record of
successful
ascents (over 92% of our travellers make it to the top of Kili, depending on the route), but
its
our CEOs and local guides that make the journey itself as memorable as the summit. And if youre
not
into big climbs, dont sweat it; weve got loads of lower-impact walks and iconic treks youll
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>
Youll 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 theyve 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

BIN
images/PngItem_1608357.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Binary file not shown.

BIN
images/psi-hracka.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

55
karta-produktu.html Normal file
View File

@ -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>

41
nature-and-culture.html Normal file
View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

115
style-nature.css Normal file
View File

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

115
style.css Normal file
View File

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

147
style.karta.css Normal file
View File

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

View File

@ -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);