#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

Przyszedł czas na kolory. Ustalimy kolor tła dla body i wygląd czcionki dla nagłówków. Użyjemy do tego zaimportowanej w pliku style.css czcionki Lora.
Przy okazji zajmiemy się nadaniem odpowiednich właściwości elementowi o klasie hero, który służy za kontener dla części powitalnej naszej strony.
 

Ć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;
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

heuristic-sound-yf8xx

heuristic-sound-yf8xx by danielminschinski

To by było na tyle z tematem “Zabawa z CSS”. Fajnie jak się Wam materiał podobał, składający się z tych kilku postów. Może komuś się przydało:) Dajcie znać w komentarzu, czy trafia do Was to co piszę? A może macie jakieś sugestie? Każdą opcję rozważę😉

Teraz czeka mnie stworzenie kontynuacji dalszego “Plan nauki Frontend Developera”

Daję sobie czas do środy z planem‼

Mam zamiar wprowadzić systematyczną publikację materiałów. Na dzień dzisiejszy umawiam się z Wami w każdą sobotę – do godziny 15:00🕒😉

Dzięki że jesteście i poznajecie świat Frontendu 😉👍 – zapraszam do subskrypcji 🔽 i polubienia mojego blogowo/usługowego ▶ fb

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!