BoP #8: Stopka i nagłówek

Tym razem stylujemy stopkę i nagłówek.

 

Stopka

Zaczniemy od końca czyli od stopki, którą utrzymamy w kolorystyce menu. Nadajemy ten sam kolor tła i ustawiamy kolor tekstu na biały

Pamiętajcie, że musicie usunąć tło, które zostało przypisane wcześniej. Usuwamy:

https://codepen.io/morawcik/pen/OmKeYV

 

Następnie zmienimy kolor odnośnika oraz usuniemy z niego podkreślenie. Przy okazji dodamy „copyright”.

Ach, musimy też wyśrodkować cały tekst za pomocą właściwości „text-align”, która pozycjonuje tekst wg podanej wartości.

https://codepen.io/morawcik/pen/wdVVwG

 

Nagłówek

Jako, że blog będzie miał białe tło to musimy usunąć te, które przypisaliśmy we wcześniejszym wpisie. Usuwamy:

https://codepen.io/morawcik/pen/wdVVeJ

 

Kolejnym krokiem będzie wyśrodkowanie tekstu i zwiększenie napisy „Nasz Pierwszy blog”

https://codepen.io/morawcik/pen/KqPPdr

 

Na koniec przydałoby się popracować nad odstępami dlatego dla <h1> i <p> w nagłówku ustawimy margines na „0” (zero) a ustawimy margines dla <header>

https://codepen.io/morawcik/pen/VWZZPp

 

Wersja mobilna

Przy mniejszej rozdzielczości nagłówek i stopka wymagają małych zmian.

 

Zaczniemy znowu od stopki, gdyż tutaj wystarczy dodać po bokach padding. Nie użyjemy tutaj media queries, bo padding może być w każdej rozdzielczości.

https://codepen.io/morawcik/pen/NgKKvO

 

W nagłówku musimy zmniejszyć margines oraz rozmiar <h1>. Myślę, że wystarczy jedna reguła – max-width: 500px

https://codepen.io/morawcik/pen/EXYYQP

 

 

W następnej części zajmiemy się funkcjonalnością odnośnika „na górę” a w międzyczasie zachęcam Was do eksperymentowania z CSSem i podzieleniem się widokiem Waszych blogów 🙂


Post 8 z 13 z serii Blog od podstaw