Układ stron witryny na Bootstrap 5.3.3

Opracowano responsywną szatę graficzną strony, która bezbłędnie działa na różnych urządzeniach – od dużych ekranów PC po telefony komórkowe, a także tablety. Główne zadanie – odtworzyć projekt zatwierdzony w Figma, zapewniając dokładne odwzorowanie wyglądu oraz interaktywne zachowanie strony, podobne do strony testowej.

Główne wymagania:

Responsywność:
Szatka powinna poprawnie działać dla desktopu z treścią o szerokości 1440px (tło 1920px) oraz dla urządzenia mobilnego (ekran – 460px).

Integracja z Bootstrap 5:
Użycie Bootstrap 5 jest obowiązkowe, co pozwala przyspieszyć rozwój i zapewnić spójność stylów. Ogólny kod CSS dla wszystkich stron został przeniesiony do osobnych plików dla wygodnej integracji w kodzie strony.

SEO-optymalizacja:
Struktura kodu HTML została opracowana z uwzględnieniem nowoczesnych wymagań SEO, co sprzyja lepszemu pozycjonowaniu strony.

Obróbka zdjęć:
Zdjęcia hoteli są ładowane z zewnętrznych serwisów i mogą mieć różne proporcje. W celu rozwiązania tego zadania zrealizowano wyświetlanie centralnej części obrazu za pomocą CSS (przy użyciu właściwości object-fit: cover; oraz object-position: center; ratio), co pozwala zachować zgodność z projektem.
Ponadto, dla fotogalerii zaproponowano intuicyjne rozwiązanie: wyświetlanie zdjęć w oknie modalnym jako pokazu slajdów, co zapewnia wygodę przeglądania użytkownikom.

Projekt demonstruje wykorzystanie nowoczesnych technologii (HTML5, CSS3, JavaScript, Bootstrap 5) do tworzenia efektywnych i wygodnych interfejsów. Integracja szaty graficznej w kodzie strony odbywa się osobno, co pozwala łatwo skalować i utrzymywać projekt.