Model pudełkowy

Zadanie praktyczne: Zaprojektuj kartę produktu z wykorzystaniem modelu pudełkowego CSS

Twoim zadaniem jest stworzenie karty produktu (np. książki, gry, telefonu – wybierz dowolny produkt), korzystając z zasad modelu pudełkowego: margin, padding, border, width/height oraz box-sizing.

1. Struktura zadania

Utwórz plik index.html i style.css, w których przygotujesz prostą kartę produktu.

Karta powinna zawierać:

• zdjęcie (może być przykładowe z internetu)
• nazwę produktu
• krótki opis
• cenę
• przycisk „Kup teraz”

2. Wymagania dotyczące stylów (to jest najważniejsza część zadania)

A) Użyj modelu pudełkowego:

1. Ustaw:

• padding - dla wewnętrznych odstępów karty
• margin - do oddzielenia karty od innych elementów
• border - o wybranym stylu i kolorze

2. Nadaj szerokość elementu:

• width: 300px dla karty produktu
• wysokość obrazka ustaw na height: 150px

3. Zastosuj box-sizing: border-box dla całej strony (globalnie).

3. Wytyczne techniczne

HTML (elementy obowiązkowe):

CSS (który uczeń musi uzupełnić):

Uczeń samodzielnie powinien napisać stylowanie, ale karta musi zawierać:

• margin (minimum 10–20px)
• padding (minimum 10–20px)
• ramkę (border: ...)
• szerokość (width: 300px)
• box-sizing: border-box
• różne marginesy dla nagłówka, obrazka i przycisku
• pokazanie, że rozumie różne warianty zapisu marginesów i paddingów (np. 1–4 wartości)