- Cel projektu
- Technologie
- Zakres funkcjonalności
- Uruchomienie
"Projekt HTML & CSS" to projekt przygotowany w ramach CodersCamp 2020. Jego celem jest zaprezentowanie opanowanych umiejętności z zakresu HTML i CSS. Strona zawiera podstawowe informacje o mnie, listę umiejętności, wykonane projekty oraz sekcję kontaktową.
HTML i CSS
- strona jest w pełni responsywna
- użyto popularnych znaczników semantycznych html (nav, header, section, footer, h1 itd.)
- do ostylowania elementów wykorzystano selektory, klasy, id, pseudoelementy i pesudoklasy
- na całej stronie wykorzystano box-model: border-box
- sekcje zostały stworzone w oparciu o flexbox
- zaimportowano zewnętrzne fonty i ikony
Na górze strony znajduje się responsywna nawigacja. Po kliknięciu na wybrany element następuje przekierowanie do wybranej sekcji. Po najechaniu kursorem wybrana sekcja podświetla się i zwiększa się letter-spacing. W widoku mobilnym menu pokazuje się i chowa po kliknięciu.
Sekcja tytułowa zajmuje 100% dostępnej wysokości urządzenia. Po kliknięciu w przycisk "Contact me" następuje przekierowanie do sekcji kontaktowej. Po kliknięciu "Check my CV" w nowej karcie otwiera się plik z CV.
Sekcja o mnie została podzielona na trzy części. Pierwsza to zdjęcie, druga to skrócone informacje, trzecia to pełen opis osoby.
W sekcji umiejętności zawarto trzy kategorie umiejętności. Zostały wykorzystane ikony z font awesome.
W sekcji projektowej znajdują się cztery projekty. Po najechaniu na wybrany projekt pojawia się nakładka z dwoma przyciskami umożliwiającymi przekierowanie do wersji live i do kodu na github.
W sekcji kontaktowej znajdują się linki do mediów społecznościowych i formularz kontaktowy. Ikony mediów społecznościowych przekierowują na wybrane strony, a po najechaniu powiększają się. W formularzu kontaktowym wszystkie pola są oznaczone jako wymagane do przesłania formularza.
Stopka została stworzona w oparciu o animację keyframes.
Projekt jest dostępny pod adresem https://kingam280.github.io/CodersCamp2020.Project.HTML-CSS.BusinessCard/. Można uruchomić go również lokalnie poprzez plik index.html. Wystarczy pobrać repozytorium na swoje urządzenie i uruchomić powyższy plik w przeglądarce.