<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wyprowadzanie piesków</title>
<link rel="stylesheet" href="/ZADANIA DOMOWE/zd2/style.css">
</head>
<body>
<!-- Nagłówek -->
<header>
<h1>Wyprowadzanie Piesków</h1>
<nav>
<ul>
<li><a href="#main">Start</a></li>
<li><a href="#services">Oferta</a></li>
<li><a href="#prices">Cennik</a></li>
<li><a href="#rules">Zasady</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<section id="main">
<h2>Twój pies zasługuje na najlepszy spacer!</h2>
<p>Oferujemy profesjonalne wyprowadzanie piesków o różnych potrzebach i temperamentach.
<p>Umów się na spacer, my zajmiemy się resztą! </p>
<p>Zabieramy psa, ruszamy w trasę, a po spacerze odprowadzamy pupila do domu.</p>
</section>
<!-- Oferta -->
<section id="services">
<h2>Nasze usługi</h2>
<p>Profesjonalne spacery dopasowane do potrzeb Twojego psa:</p>
<ul>
<li>Bezpieczne i komfortowe spacery</li>
<li>Zabawa i socjalizacja</li>
<li>Elastyczne godziny i dopasowanie do właściciela</li>
</ul>
</section>
<!-- Cennik -->
<section id="prices">
<h2>Godziny pracy i cennik</h2>
<table>
<tr>
<th>Dzień</th>
<th>Godziny pracy</th>
<th>30 min</th>
<th>60 min</th>
</tr>
<tr>
<td>Poniedziałek – Piątek</td>
<td>9:00 – 17:00</td>
<td>40 zł</td>
<td>50 zł</td>
</tr>
<tr>
<td>Sobota</td>
<td>10:00 – 14:00</td>
<td>50 zł</td>
<td>60 zł</td>
</tr>
<tr>
<td>Niedziela</td>
<td colspan="3">Nieczynne</td>
</tr>
</table>
</section>
<!-- Zasady kontaktu -->
<section id="rules">
<h2>Zasady kontaktu</h2>
<ol>
<li>Skontaktuj się z nami poprzez formularz, aby ustalić termin.</li>
<li>Podaj informacje o psie – wiek, temperament, zdrowie.</li>
<li>Prosimy o kulturalny język w wiadomościach.</li>
</ol>
</section>
<!-- Formularz kontaktowy -->
<section id="contact">
<h2>Formularz kontaktowy</h2>
<p>Wypełnij formularz, a skontaktujemy się z Tobą!</p>
<form>
<label for="name">Imię:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<label for="message">Wiadomość:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Wyślij</button>
</form>
</section>
<!-- Stopka -->
<footer>
<p>© 2025 Wyprowadzanie Piesków</p>
<p><a href="#main">Powrót na górę</a></p>
</footer>
</body>
</html>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
/* Nagłówek i menu */
header {
background: #2d6a4f;
color: white;
padding: 1rem;
position: sticky;
top: 0;
}
header h1 {
margin-bottom: 0.5rem;
}
nav ul {
list-style: none;
display: flex;
gap: 1rem;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
/* Sekcje */
section {
padding: 3rem 2rem;
margin-bottom: 2rem;
border-radius: 15px;
background-color: #ffffff;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
#main {
background: linear-gradient(#95d5b2, #74c69d);
text-align: center;
color: white;
padding: 4rem 2rem;
}
h2 {
margin-bottom: 1rem;
}
/* Tabela z cennikiem*/
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
th, td {
border: 1px solid #999;
padding: 0.75rem;
text-align: center;
}
th {
background: #d8f3dc;
}
/* Formularz kontaktowy*/
form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 400px;
}
input, textarea, button {
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background: #2d6a4f;
color: white;
border: none;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
button:hover {
background: #1b4332;
}
/* Stopka */
footer {
background: #081c15;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
