Praca domowa II wersja 2
Po zagłębieniu się trochę bardziej we flexboxy, myślę że wyszło o wiele lepiej. Nie dawało mi to spokoju, więc musiałam zrobić lepszą wersję 😸
<!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-travelia2.css">
<title>Travelia</title>
<header>
<ul class="podstrony-box">
<a class="podstrony-item" href ="/Wycieczki/">Wycieczki</a>
<a class="podstrony-item" href="/Nasi Klienci/">Nasi klienci</a>
<a class="podstrony-item" href="/Nasi przewodnicy/">Nasi przewodnicy</a>
<a class="podstrony-item" href="/Zdjęcia/">Zdjęcia z wypraw</a>
</ul>
</header>
</head>
<body>
<h1>Twoja podróż zaczyna się tutaj!</h1>
<p class="h1"> 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>
<p></p>
<div class="twoColumns">
<div class="left">
<img class="responsive" src="css/img/travelia.png">
</div>
<div class="right">
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 Travelia łą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.
</div>
</div>
<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>
<div class="grid">
<div class="grid.item">
<h3> Bułgaria </h3>
<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>
<div class="right1">
<img class="responsivegrid" 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">
</div>
</div>
<div class="grid">
<div class="grid.item">
<h3> Norwegia </h3>
<p> orwegia 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. </p>
</div>
<div class="right1">
<img class="responsivegrid" 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">
</div>
</div>
<div class="grid">
<div class="grid.item">
<h3> Grecja </h3>
<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>
<div class="right1">
<img class="responsivegrid" 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">
</div>
</div>
<div class="grid">
<div class="grid.item">
<h3> Włochy </h3>
<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>
<div class="right1">
<img class="responsivegrid" 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">
</div>
</div>
<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">
<label for="email">Email:</label>
<input type="text" id="email" name="email" autocomplete="off">
</p>
<p>
<textarea id="message" name="message" rows="6" cds="50" placeholder="Wiadomość..."></textarea></p>
<nav id="polityka prywatności">
<p>Akceptuję <a href="/Polityka Prywatności/">politykę prywatności
<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>Plik HTML
/* globalne */
body {
background: linear-gradient(to right, mintcream, lightblue);
}
/* flex z linkami do innych podstron */
.podstrony-box {
display:flex;
flex-direction: row;
flex-wrap: wrap;
background-color: skyblue;
color: midnightblue;
padding: 0;
border: 0;
margin: 0;
}
.podstrony-item {
padding: 20px;
flex: 1;
text-decoration: none;
font-family:"Roboto", sans-serif;
color:midnightblue;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
margin:5px;
}
.podstrony-box a:hover {
background: midnightblue;
color: white;
flex-basis: fill;
}
/* globalne */
h1 {
font-family: "Archivo-Black";
font-weight: bold;
font-size: 65px;
color: midnightblue;
text-align:center;
letter-spacing: 5px;
}
.h1 {
font-family:"Roboto", sans-serif;
font-weight: 400;
font-size: 18px;
color: midnightblue;
letter-spacing: 2px;
text-align: center;
}
h2 {
font-family:"Archivo-Black";
font-weight: bold;
font-size: 40px;
color: midnightblue;
text-align: center;
letter-spacing: 5px;
text-transform: uppercase;
}
h3, h4 {
font-family:"Archivo-Black";
font-weight: bold;
font-size: 20px;
color: midnightblue;
text-align: center;
letter-spacing: 2px;
}
p {
font-family:"Archivo-Black", sans-serif;
font-weight: 400;
font-size: 15px;
color: black;
text-align: center;
}
/* flex z logiem i tekstem obok */
.twoColumns {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.responsive {
max-width: 100%;
height: auto;
}
.right {
display: flex;
width: 100%;
margin-left: 28px;
font-family:"Archivo-Black", sans-serif;
font-weight: 400;
font-size: 15px;
color: black;
text-align: justify;
justify-content: center;
align-items: center;
}
/* grid z opisem państw i zdjęciami */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
justify-content: center;
align-items: center;
border-style: double;
border-color: midnightblue;
}
.griditem {
display: grid;
width: 100%;
font-family:"Archivo-Black", sans-serif;
font-weight: 400;
font-size: 15px;
color: black;
}
.responsivegrid {
max-width: 100%;
height: auto;
}
fieldset {
border-width: 3px;
border-style: double;
border-color: midnightblue;
font-family: "Archivo-Black", sans-serif;
}Plik CSS
