#29. Wizytówka www📇

HTML-owy szkielet😉

Zaczynamy pracę nad stroną wizytówką. Naszym pierwszym krokiem w budowie strony będzie stworzenie struktury dokumentu HTML.

Stworzymy dwa główne kontenery oraz wypełnimy je potrzebnymi tagami. Pierwszy będzie służył jako miejsce na tekst, nagłówek i przycisk, a drugi będzie zawierał treść strony. Dodamy do zawartości strony treść składającą się z nagłówków, ikon i tekstu opisującego wybrane przez nas tematy oraz stworzymy ikony dzęki Font Awesome.

Ćwiczenie – część 1

1. Uruchom codesandboxa.
2. Stwórz nowy projekt. Wykonaj deklarację strony.
3. W ciele dokumentu dodaj dwa divy. W pierwszym dodaj klasę “hero“, natomiast drugiemu dodaj “content” oraz id=”content”. Od razu oby dwa pozamykaj.
4. W pierwszym divie, dodaj diva z klasą “hero-content“. W środku dodaj nagłówek h1 w którym umieść swoje imię i nazwisko.
5. Pod nim dodaj przykładowy akapit, np. “Zapraszam do przejrzenia mojej strony!”.
6. Pod tekstem umieść link z odnośnikiem “#content” sugerujący, np. “Zobacz szczegóły!”.
7. W elemencie z klasą “content” umieść grupę tagów: ““,”
   

    

   ” oraz “

   “.
   

8. Skopiuj powyższą grupę i wklej ją dwa razy, by uzyskać łącznie trzy takie same segmenty.
9. W nagłówkach h2 umieść następujące tytuły: “Kim jestem?”, “Co robię?”, “Moje hobby”. W paragrafach umieść przykładowe teksty.
10. Tagom “<i>” nadaj następujące klasy: Dla pierwszego – “fa fa-user”, drugiego – “fa fa-suitcase”, trzeciego – “fa fa-futbol-o”.

Style dla nagłówków i hero

Ćwiczenie – część 2

1.  Do selektora body dodaj właściwość ustalająca kolor tła. Wybierz przykładowy kolor. Ustaw zerowy margines oraz padding. Na koniec reguły dodaj font-family: ‘Open Sans’, sans-serif;
2. Dodaj selektor grupowy h1 i h2 oraz nadaj mu następujące właściwości: margines 10px 0, rodzaj czcionki font-family: ‘Lora’, serif; oraz przekształcić tekst na duże litery.
3. Stwórz regułę dla klasy hero, która będzie zawierała padding 100px 0 oraz tekst wyśrodkowany.
4. Na koniec tej części dodaj powyższej klasie grafikę i ustal jej pozycję background: url(“przykładowy obrazek z internetu”) center; oraz background-size: cover; dodaj również wysokość na całą wysokość ekranu height: 100vh;

Stylowanie hero-content

Kolejnym krokiem będzie ostylowanie elementu hero-content. Należy mu nadać odpowiednie właściwości, dzięki którym będzie wyglądać o niebo lepiej!😉

Ćwiczenie – część 3

1. Utwórz nową regułę hero-content. W niej dodaj maksymalną szerokość na 500px oraz kolor tła rgba(0, 0, 0, 0.5);
2. Wyśrodkuj powyższą regułę dzięki zastosowaniu margin: auto;
3. Dla dodatkowego uroku dodaj mu cień box-shadow: 2px 2px 10px #000; (dla przypomnienia – pierwsze dwie wartości odpowiadają za przesunięcie a trzecia za jego rozmycie).
4. Ostatnim krokiem w tej regule będzie nadanie zaokrąglenia naszemu obszarowi dzięki zastosowaniu border-radius: 4px; Nadaj mu biały kolor czcionki. Dodaj następujący padding: 5px 0 15px 0; oraz dodaj wysokość obszaru od górnej belki: margin-top: 25vh;

Stylowanie linków hero-content

Ostatnim krokiem związanym z hero-content, który zostanie zostanie obdarowany kodem jest link. Naszym celem jest aby wyglądał ładniej i będzie zachęcał użytkowników do kliknięcia w niego. Oczywiście nie obejdzie się bez efektu najechania kursorem, :hover. 

Ćwiczenie – część 4

1. Stwórz regułę dla linka. Ustaw elementowi wyłączenie dekoracji tekstu, kolor tła, padding 15px 40px, border-radius na 5px;
2. Zmień tekst na linku- color: przykładowy kolor; font-weight: 700; tekst pisany drukowanymi leterami – text-transform: uppercase; oraz przemiana linka na elemet blokowy: display: inline-block;
3. Ostatnim krokiem który Ci został jest ustawienie stanu linka po najechaniu na niego. Stwórz regułę dla linku wykorzystującą :hover i nadaj jej właściwość background-color: przykładowy kolor;

Stylowanie contentu

Ostatnim zadaniem w dzisiejszym materiale będzie ostylowanie contentu razem z elementami. Dodatkowo dodamy zachowanie ikony po najechaniu na nią. Zaczynamy!

Ćwiczenie – część 5

1. Stwórz regułę content. Dodaj do niej właściwości: szerokość na 80%, maksymalną szerokość na 700px, bordere-radius: 4px; padding: 50px; i margin: 50px auto; wyśrodkuj tekst, zmień kolor czcionki, ustaw błały kolor tła i dodaj do niego cień: box-shadow: 2px 2px 5px #000;
2. Wszystkie elementy “

   “

   zawarte w content powinny posiadać margin: 0 0 35px; zablokowane zawijanie wierszy, ukryty tekst wychodzący poza wyznaczony obszar (overflow: hidden;) i dodane “…” w jego miejsce.
3. Utwórz selektor content i – nadaj mu właściwość font-size: 50px; box-shadow: 2px 2px 5px #000; padding: 10px; i border-radius: 5px;