Strona portfolio – cz. 5 – HTML + CSS, part IV – About & Contact.

Kolejny artykuł z serii portfolio. Dzisiaj skupimy się na HTML i CSS w sekcjach About i Contact. Postanowiłem przyśpieszyć cykl CSS i HTML przez umieszczenie dwóch sekcji w jednym wpisie. Nie ma co tego rozwlekać bo w perspektywie dużo fajnych rzeczy do poznania.

Seria strona portfolio.

W skład serii wchodzą:

  1. Część 1 – Jak stworzyć projekt graficzny. Opisywałem jak się zabrać do tworzenia layoutu.
  2. Część 2 – HTML + CSS, part I – Hero.
  3. Część 3 – HTML + CSS, part II – Sekcja Home.
  4. Część 4 – HTML + CSS, part III – Sekcja What I do.
  5. Część 5 – HTML + CSS, part IV – czyli ten wpis 🙂 Opiszę jak wykonałem sekcje About & Contact. 
  6. Część 6 – HTML + CSS, part V – kwestie globalne strony np. head, linki, responsywność.
  7. Część 8 – JavaScript – definiowanie zachowania poszczególnych elementów na stronie.

Pełny projekt dostępny do podglądu tutaj:

http://bartlomiejcis.eu/

A materiał nad którym dzisiaj pracujemy tutaj :

https://htmlpreview.github.io/?https://github.com/bartcis/portfolio/blob/about%26contact/about_contact.html

Struktura sekcji About & Contact.

Dzisiaj zacznę od budowy struktury obydwu sekcji, a potem stopniowo będę je wypełniał zawartością.

Start.

A więc mamy trzy nadrzędne sekcje o następujących klasach: class=“about”, class=“certificates” i class=“contact”. Każda z nich jest wypełniona gradientem. Klasa about ma wysokość auto czyli będzie się powiększała automatycznie w miarę dodawania zawartości, sekcja certificates ma min-height=250px czyli w razie potrzeby może się powiększyć ale w tym wypadku tego nie planuje natomiast klasa contact ma sztywną wysokość 800px. Dlaczego? To ostatnia sekcja więc nie jest to tak problematyczne przy widokach mobilnych a dodam tam duży element graficzny. Zawsze można to zrobić inaczej ale ten sposób działa.

Potem wszędzie wstawiam kontener z width 80% i padding-top: 7% żeby nie były przy górnej krawędzi.

Sekcja about będzie się składać z 2 elementów blokowych class=“desc” i class=“technologies”. Sekcja contact natomiast będzie miała dwa panele – prawy i lewy którym definiuje odpowiednią szerokość np. 55% i ustawiam na float: left i right.

Wypełniam sekcję About.

Kiedy sekcje są przygotowane wrzucam zawartość. Na pierwszy ogień idzie  <div class=“desc-text”> który podzielę na szerszy do którego wrzucę tekst <div class=“desc-text”> i węższy ze zdjęciem <div class=“desc-photo”>. Ustawiam szerokość odpowiednio 80% i 20% no i float left/right. Wczytuję czcionki, styluje przestrzennie zawartość za pomocą właściwości padding, zdjęciu ustawiam wymiary i lekkie opacity.

Zauważcie, że jak dodałem zawartość to sekcja about automatycznie dostosowała swoją wysokość.

Mini galleria z technologiami.

Teraz chcę stworzyć galerię z ikonami przedstawiającymi różne technologię. Na początek dodaje nagłówek h3 i styluje tekst. Potem nie tworzę jednego dużego kontenera gdzie będę wrzucał elementy tylko szereg małych kontenerów i do każdego wrzucę oddzielną ikonę. Zrobię to jako <div class=“tech-item>. Ważne jest ustawienie w CSS display: inline-block; aby ikony pojawiały się obok siebie a nie blokowo czyli pod sobą. Do tego ustawiam wysokość diva, no i marginy wraz z paddingami.

Teraz kod HTML staję się trochę zagmatwany za sprawą wektorów. Do każdego tech-item wrzucam oddzielną ikonę z logiem technologii w formie wektora. Ten kod jest po prostu wypluwany przez specjalne konwertery, pisałem o tym we wcześniejszych z serii. Co jest tutaj ważne to ostylowanie. Definiuje oddzielnie wysokość dla każdej ikony, wypełniam je wszystkie jednym kolorem fill: #f5c661; oraz definiuje swobodne przejścia efektu hover. Na Hoverze (po najechaniu) skaluje ikonę transform: scale(1.2) oraz zmieniam kolory. Jak to robię? Każdy wektor jest podzielony na ścieżki <path> o klasach np st0, st1 itd. Klasy te odpowiadają za kształt poszczególnych elementów grafiki wektorowej. Dla nas znaczy to tyle, że każda klasa to inny kolor.  Wykorzystuje to przy tworzeniu efektu hover dając odpowiedni fill w CSS.

Cały proces powtarzamy dla każdej ikony definiując ją oddzielnymi rozmiarami i kolorami. Ostatecznie mają tworzyć spójną całość.

Na koniec dorzucam przycisk wektorowy scroll-down wyświetlony blokowo taki jak w poprzednich sekcjach.

Certyfikaty.

Tutaj sprawa jest prosta. Dodaję teksty zdefiniowane jako h4 i h6 oraz przycisk wektorowy class=“button-visit” o odpowiednich wymiarach, kolorze i efekcie hover. Przycisk zabiera nas do oddzielnego dokumentu .html gdzie czeka zupełnie inna strona.

Jakby jakiś cudem to chciało się rozjechać to cała sekcja zwiększy swoją wysokość i wszystko się ładni zmieści 🙂

Sekcja Contact.

Uhh… I tym sposobem dotarłem już do ostatniej sekcji tej strony…

Jak powiedziałem wcześniej mamy to dwa panele- lewy i prawy. Zaczynamy od lewego.

Lewy panel.

Teraz to już z górki. Dodaje blokowo tekst sformatowany jako h3, następnie przycisk wektorowy kontakt jako znacznik <a> czyli link w którym dodaję właściwość HTML href=“mailto:cis.bart@gmail.com”. W ten sposób po kliknięciu użytkownikowi będzie się odpalał program do maili. Może to kogoś wkurzać ale jeśli na co dzień używasz takiego programu i chcesz się skontaktować to w sumie jest praktyczne. Poza tym wysyłane dane są stosunkowo bezpieczne w przeciwieństwie do januszowych formularzy 🙂

Na samym dole tworzę listę z danymi kontaktowymi za pomocą znacznika <ul>. Wszystko ustawiam na odpowiednich paddingach/marginach.

Panel prawy.

Tutaj w zasadzie będzie tylko grafika przedstawiająca jelenia którego zrobiłem w stylu poligonowym.

W HTML po prostu tworzę <div class=“contact-pnl-left”>. I tyle. W CSS styluje jelenia tak: 

background-image: url(../img/deer2-min.png);

        background-repeat: no-repeat;

        background-size: contain;

        background-position: bottom;

        height: 800px;

        z-index: 0;

Czyli wrzuć tego jelenia jako tło, nie powtarzaj go, niech się zawiera w sekcji i będzie przy samym spodzie sekcji. Następnie daj mu wysokość 800px i niech inne elementy które mogą na niego najechać będą widoczne jako pierwsze. 🙂

Podsumowanie.

Jeśli dotrwałeś to tego momentu tego wpisu jak i w ogóle całej serii to znaczy, że cierpliwy z Ciebie zawodnik lub zawodniczka 🙂 No ale nauka tak fajnej rzeczy jaką jest Front-End wymaga cierpliwości 🙂 Mam nadzieję, że moje wywody na temat tworzenia przykładowej strony portfolio są dla Ciebie pomocne 🙂

W kolejnym wpisie opiszę jak zdefiniować sekcję HEAD w pliku .html, opiszę linkowanie plików no i kwestię responsywności czyli jak pisać, żeby na komórkach też to jakoś wyglądało. Tymczasem niech nasza nauka nabiera rozpędu!