18.09.2026 (HTML i CSS)

Załączniki są na dole strony

---

kartaProduktu.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fotel</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Sklep meblowy</h1>
        <hr>
    </header>
    <main>
        <section>
            <img src="fotel1.png" alt="fotel" class="obraz"><br>
            <img src="fotel1.png" alt="miniatura" class="miniatury">
            <img src="fotel2.png" alt="miniatura" class="miniatury">
            <img src="fotel3.png" alt="miniatura" class="miniatury">
        </section>
        <article>
            <h2>Żółty Fotel</h2>
            <p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
            <p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
            <strong>Wybierz wariant fotela</strong>
            <select>
                <option>wariant 1</option>
                <option>wariant 2</option>
                <option>wariant 3</option>
            </select>
            <p><button>KUP TERAZ</button></p>
            <p><a href="sklep.html">Do strony głównej</a></p>
        </article>
    </main>
    <footer>
        <hr>
        <p>Autor strony: <em>123456789</em></p>
    </footer>
</body>
</html>

styl.css

* {
    font-family: "Century Gothic", sans-serif;
}
body {
    background-color: beige;
    font-size: 140%;
}
header, footer {
    text-align: center;
    padding: 20px;
}
section, article {
    width: 50%;
    height: 600px;
}
button {
    background-color: tan;
    border-radius: 20px;
    padding: 10px;
    font-size: 150%;
}
.obraz {
    width: 40%;
    padding: 20px;
    border: 1px solid tan;
}
.miniatury {
    width: 15%;
}
.okno {
    background-color: black, 0.7;
    width: 80%;
    position: fixed;
    left: 0;
    top: 0;
}
.obrazOkno {
    margin: auto;
    display: block;
}
.zamknij {
    position: relative;
    top: 15px;
    right: 35px;
    color: beige;
    font-style: oblique;
    font-size: 40px;
}
main {
    display: flex;
}