Przez Małgorzata Śmietana — 22 sie 2025

JavaScript zad.2

<!DOCTYPE html> 
<html lang="en">
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap&subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="css/style3.css">

    <title>Dom twoich marzeń</title>

</head>

<body>
    <header>
        <h1>Zbuduj dom twoich marzeń</h1>
        <nav class="navbar">
            <ul>
                <li><a href="#Strona_główna">Strona główna</a></li>
                <li><a href="#">O nas</a></li>
                <li><a href="#">Projekty</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div id="Strona_główna" class="section">
        <img class="section-img" src="obraz/dom.jpg" alt="budowa domu" >

            <p class="border-box-example">Nasza firma specjalizuje się w kompleksowej budowie domów jednorodzinnych. 
            Od wielu lat pomagamy klientom spełniać marzenia o własnym miejscu na 
            ziemi – od przygotowania projektu, przez prace konstrukcyjne, aż po 
            wykończenie wnętrz. Stawiamy na solidność, terminowość i nowoczesne 
            technologie, dzięki którym nasze domy są nie tylko trwałe, ale też 
            energooszczędne i przyjazne środowisku.
            </p>
   
        </div>

        <div class="section">
    
            <p class="border-box-example">
            Nasza firma działa na terenie trzech województw:<strong>opolskiego</strong> 
            oraz <strong>dolnośląskiego</strong>.  
            Odległość nie jest dla nas przeszkodą – dojedziemy w każde miejsce i 
            zbudujemy Twój wymarzony dom.  
            Naszym celem jest zapewnienie Ci komfortu i spokoju na każdym etapie realizacji.
            </p>

            <img class="section-img" src="obraz/obszar.jpg" alt="mapa" >

        </div>

    </main>
    
    <form id="kontakt" action="message.com" method="post" class="contact-form">
        <fieldset>
            <legend>Formularz kontaktowy</legend>

   
            <label for="name">Twoje imię:</label>
            <input type="text" id="name" name="name" placeholder="Wpisz swoje imię" required>

            <label for="email">Twój e-mail:</label>
            <input type="text" id="email" name="email" placeholder="Wpisz swój e-mail" required>

            <label for="message">Wiadomość:</label>
            <textarea id="message" name="message" rows="5" placeholder="Napisz wiadomość" required></textarea>

            <button type="submit">Wyślij</button>

        </fieldset>
    </form>
    

</body>
</html>
```

body {
  font-family: 'Arial', sans-serif; 
  font-weight: 400;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: 'Quicksand', cursive, sans-serif; 
  font-weight: 700;
  font-size: 48px;
  margin: 0;
}

.navbar {
  background-color: #cae0ef;
  padding: 15px;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  border-radius: 30px;
}

.navbar ul li {
  display: block;
  width: 280px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #0077cc;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
}

.navbar a:hover {
  background-color: #005fa3;
}

.section {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  margin: 20px auto;
}

.section.reverse {
  flex-direction: row-reverse;
}

.section-img {
  flex: 0 0 300px;
  height: auto;
  border-radius: 10px;
}

p {
  flex: 1;
  line-height: 1.5;
  color: #333;
}

.border-box-example {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid rgb(173, 152, 221);
}

.contact-form {
  max-width: 100%;
  margin: 20px auto;
}

.contact-form fieldset {
  border: 2px solid #0077cc;
  border-radius: 10px;
  padding: 20px;
}

.contact-form legend {
  font-weight: bold;
  color: #0077cc;
  padding: 10px;
}

.contact-form label {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
}

.contact-form input[type="text"],
.contact-form textarea {
  width: 100%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc; 
  box-sizing: border-box;
}

.contact-form input[type="text"]:focus,
.contact-form textarea:focus {
  outline: none;
  border: 2px solid #0077cc;
  box-shadow: 5px #0077cc;
}

.contact-form button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #005fa3;
}

```

JavaScript zad.2

Zadanie domowe 2 JS

Pierwsza strona w HTML