CodersCamp 2020 - Projekt HTML & CSS

CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego

Wizytówka dla firmy budowlanej

Repozytorium zawiera pliki:

index.html, style.css, queries.css, README.md oraz obrazy wykorzystane w projekcie.

Cel projektu:

Celem projektu było wykonanie przykładowej wizytówki dla firmy budowlanej. Istotnym załozneiem było, aby strona była responsywna i wyglądała dobrze na różnego rodzaju urządzeniach.

W projekcie wykorzystano:

• HTML,
• CSS,
• Google Fonts,
• Fontawesome.

Opis strony:

Strona składa się z następujących sekcji:

• header,
• nav-bar,
• about us,
• offer,
• portfolio,
• contact,
• footer.

Wizytówka jest wypozycjonowana przy użyciu Flexboxa. Header składa się z przyciemnionego zdjęcia oraz nałożonego na niego tekstu, wypozycjonowanego relacyjnie.

Poniżej znajduje się belka nawigacyjna strony wraz z przykładowym logo firmy. Najechanie na poszczególne linki nawigacyjne powoduje pojawienie się pomarańczowego podkreślenia, sugerującego użytkownikowi, że kliknięcie na taki element spowoduje przeniesienie do odpowiedniej sekcji strony. Logo zostało wypozycjonowane absolutnie. Cała belka przykleja się do górnej krawędzi ekranu.

Wszystkie kolejne sekcje są poprzedzone nagłówkami h1. Pod każdym nagłówkiem h1 znajduje sie pomarańczowe podkreślenie, wykonane przy użyciu pseudoelementu after. Dodatkowo sekcje oddzielone są poprzez różny kolor tła: biały lub szary. Poniższe sekcje zostały wypozycjonowe przy użyciu Flexboxa. Wyjątkiem jest sekja "conctact", gdzie wykorzystano Grid.

Sekcja "about us" składa się z przykładowego zdjęcia i paragrafu tekstu, który w skrócie opisuje działania firmy.

Kolejna sekcja dotyczy oferty firmy. Widoczne są wyszarzone kafelki odpowiadające różnym obszarom, którymi zajmuje się firma. Po najechaniu na dany kafelek pojawia się animacja oraz podświetlenie kafelka sugerujące, że po naciśnięciu zostalibyśmy przeniesieni do pełnej oferty firmy.

Kolejną sekcję tworzy galeria zdjęć projektów zrealizowanych przez firmę. Znajduje się tutaj też przycisk "See more", który docelowo otwierałby wiekszą galęrię zdjęć.

Następną sekcję tworzy formularz kontaktowy. W bocznej części formularza widoczne są ikony social media, które miałyby prowadzić do odpowiednich social media firmy buodlanej. Po najechaniu na ikonę zmienia się jej kolor. Do wykonania tła ikony wykorzystano gradient. Ostatnią część strony zajmuje stopka.

Responsywność strony zapewnia: Flexbox, Grid, media-queries oraz zastosowanie jednostek relatywnych.