Kurs JS - praca domowa II
Próbowałam walczyć z tymi flexboxami i trochę się poddałam. Muszę to jakoś spróbować zrozumieć przez weekend. Nie mogę się już na to patrzeć, pomocy 😭
<!DOCTYPE html>
<html lang="pl"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href= "https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/style-travelia.css">
<title>Travelia</title>
</head>
<body>
<main>
<header class="header">
<nav class="main-nav">
<p>
<ul class="main-nav">
<a href="/Wycieczki/">Wycieczki</a>
<a href="/Nasi Klienci/">Nasi klienci</a>
<a href="/Nasi przewodnicy/">Nasi przewodnicy</a>
<a href="/Zdjęcia/">Zdjęcia z wypraw</a>
</ul>
</p>
</nav>
</header>
</main>
</body>
<img class="logo" src="css/img/travelia.png">
<h1>Twoja podróż zaczyna się tutaj</h1>
<p> Witaj w Travelia.
Jest to stworzone przez nas miejsce,
gdzie marzenia o podróżach przestają być jedynie marzeniami,
a stają się rzeczywistością.
Naszą pasją jest odkrywanie świata i dzielenie się tą pasją z innymi.
Z nami każda wycieczka to coś więcej niż zwykła podróż, stawiamy na wspomnienia,
które zostają na zawsze.</p>
<h2>O nas</h2>
<p> Jesteśmy zespołem podróżników i pasjonatów turystyki,
którzy wierzą, że świat jest pełen niezwykłych miejsc czekających na odkrycie.
W <strong>Travelia </strong>łączymy doświadczenie, wiedzę i miłość do podróży,
aby zaoferować naszym klientom wyjątkowe wyjazdy dopasowane do ich potrzeb.
Naszą misją jest sprawić, aby każda podróż była bezpieczna, komfortowa i niezapomniana.</p>
<h2>Nasze wycieczki</h2>
<p> Oferujemy bogaty wybór kierunków, od gorących plaż po malownicze fiordy.
Wybierz miejsce, które najbardziej pasuje do Twoich marzeń</p>
<p></p>
<h3> Bułgaria </h3>
<div>
<p> To idealne miejsce dla miłośników słońca i morskich kąpieli.
Złote Piaski i Słoneczny Brzeg oferują szerokie plaże, tętniące życiem promenady i bogate życie nocne.
Warto odwiedzić również historyczne miasta jak Nesebyr, wpisane na listę UNESCO.
Bułgarska kuchnia zachwyca świeżymi warzywami, grillowanymi mięsami i lokalnym winem.
To doskonały kierunek zarówno dla rodzin z dziećmi, jak i dla osób szukających rozrywki.</p>
</div>
<img class="view" src="https://images.unsplash.com/photo-1633210181101-774c588bc997?q=80&w=1877&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Panoramic view of a small town in Bulgaria">
<p></p>
<h3>Norwegia </h3>
<div>
<p> Norwegia to kraina dzikiej przyrody, majestatycznych gór i zapierających dech fiordów.
Latem zachwyca niekończącym się dniem polarnym, a zimą zorzą polarną rozświetlającą niebo.
Podróż po Norwegii to okazja, by zobaczyć słynny Geirangerfjord, Lofoty czy stolicę - Oslo.
To również raj dla osób aktywnych: trekking, kajaki czy narty gwarantują niezapomniane przeżycia.
Norwegia łączy w sobie spokój natury z nowoczesnością skandynawskich miast.</p>
</div>
<img class="view" src="https://images.unsplash.com/photo-1544009520-e2ea9189f15e?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Houses in near moutains and trees during daytime in Norway">
<p></p>
<h3> Grecja </h3>
<div>
<p> Grecja to połączenie starożytnej historii z urokiem wyspiarskiego życia.
Ateny oczarują Cię Akropolem, a Santorini i Mykonos zapadną w pamięć swoimi białymi domkami i błękitnym morzem.
Grecka kuchnia, od sałatki horiatiki po musakę i souvlaki jest ucztą dla podniebienia.
Słońce świeci tutaj niemal przez cały rok, czyniąc Grecję doskonałym miejscem na wakacje.
To idealny wybór dla miłośników kultury, relaksu i zabawy.</p>
</div>
<img class="view" src="https://images.unsplash.com/photo-1603565816030-6b389eeb23cb?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Ancient concrete brown building under blue sky during daytime in Greece">
<p></p>
<h3> Włochy </h3>
<div>
<p> Włochy to kraj sztuki, historii i wyśmienitej kuchni.
Rzym zachwyca antycznymi zabytkami, Wenecja romantycznymi kanałami, a Florencja dziełami renesansowych mistrzów.
Południe Włoch kusi malowniczym wybrzeżem Amalfi i klimatyczną Sycylią.
Podczas podróży spróbujesz najlepszej pizzy, makaronów i lodów na świecie.
Włochy to kierunek, który nigdy się nie nudzi i zawsze oferuje coś nowego.</p>
</div>
<img class="view" src="https://images.unsplash.com/photo-1520175480921-4edfa2983e0f?q=80&w=1734&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Venice Grand Canal in Italy during a sunny day">
</main>
<p></p>
<h4>Skontaktuj się z nami:</h4>
<fieldset>
<legend>Formularz kontaktowy</legend>
<form action="https://example.com/submit-form" method="post" target="_blank">
<select id="options" name="options">
<option value="option1">Wycieczka</option>
<option value="option2">Problemy</option>
<option value="option3">Mam inną sprawę</option>
</select>
<p>
<label for="name">Imię:</label>
<input type="text" id="name" name="name" autocomplete="off">
<label for="lastname">Nazwisko:</label>
<input type="text" id="lastname" name="lastname" autocomplete="off">
</p>
<p></p>
<textarea id="message" name="message" rows="6" cds="50" placeholder="Wiadomość..."></textarea>
<nav id="polityka prywatności">
<p>Akceptuję <a href="/Polityka Prywatności/">politykę prywatności</a>
<input type="checkbox"></p></nav>
<p><input type="submit" value="Wyślij">
<input type="reset" value="Resetuj"></p>
</form>
</fieldset>
<footer>
<p>© 2025 Travelia. Wszystkie prawa zastrzeżone.</p>
<p>Kontakt: [email protected] | Tel: +48 123 456 789</p>
<nav class="socjal media">
<p><a href="/Facebook/">Facebook</a> |
<a href="/Instagram/">Instagram</a> |
<a href="/Tik-Tok/">TikTok</a></p>
</nav>
</footer>
</body>
</html>body {
background: linear-gradient(to right, mintcream, lightblue);
}
h1 {
font-family: "Archivo-Black";
font-weight: bold;
font-size: 45px;
color: midnightblue;
text-align:center;
letter-spacing: 5px;
}
h2 {
font-family:"Archivo-Black";
font-weight: bold;
font-size: 35px;
color: midnightblue;
}
h3, h4 {
font-family:"Archivo-Black";
font-weight: bold;
font-size: 20px;
color: midnightblue;
;
}
p {
font-family:"Roboto", sans-serif;
font-weight: 400;
font-size: 18px;
color: black;
}
img {
align-items: center;
}
.main-nav {
display: flex;
background: skyblue;
color: midnightblue;
padding: 1em;
flex-wrap: wrap;
}
.main-nav > ul {
padding: 0;
margin: 0;
display: flex;
flex: 1;
justify-content: space-evenly;
flex-basis: 200px;
flex: 1 1 200px;
}
.main-nav > a {
list-style-type: none;
text-decoration: none;
font-family:"Roboto", sans-serif;
color:midnightblue;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
.main-nav a:hover {
background: midnightblue;
color: white;
flex-basis: fill;
}
.logo {
display: block;
margin: auto;
width: 15%;
}
.view {
display: block;
margin: auto;
width: 50%;
}
