Witam w kolejnej części kursu w którym budujemy prostą stronę internetową. Poniżej zamieściłam linki do do poprzednich części kursu warto do nich zajrzeć przed przejściem do dalszej części.
W tej części zajmiemy się podziałem strony na odpowiednie sekcje oraz budową jednej z nich czyli nagłówka. Zastanawiacie się dlaczego podzieliłam stronę na sekcje? Odpowiedz jest prosta – w momencie kiedy strona jest w taki sposób zbudowana w bardzo łatwy sposób mogę zmieniać ich kolejność.
Dodatkowo taka struktura umożliwia personalizowanie każdej sekcji z osobna.?
Poniżej znajduje się kod w którym podzieliłam stronę na sekcje. Chwilowo są one praktycznie puste – zawierają one jedynie krótki opis.
<body>
<header class="top">
nagłówek
</header>
<section id="word">
zawartość sekcji word
</section>
<section id="us">
zawartość sekcji us
</section>
<section id="technology">
zawartość sekcji technology
</section>
<section id="">
zawartość sekcji design
</section>
<footer>
Stopka
</footer>
</body> Każda z tych sekcji symbolizuje fragment budowanej strony. Powyżej zamieściłam link do opisu struktury strony w HTML5 może on okazać się pomocny. W każdej z tych sekcji będziemy umieszczać kolejne elementy.
Font (czcionka – wiem to niewłaściwe określenie będące wynikiem złego tłumaczenia) z którego skorzystam na stronie to Source Sans Pro jest on dostępny na stronie Google Fonts.
Instalacja będzie też bardzo prosta:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext');
body{
font-family: 'Source Sans Pro', sans-serif;
font-size:18px;
} Powyższy kod dodaje oczywiście w pliku style.css na samej górze. Nieco więcej o Google Fonts dowiecie się z innego WPISU na jego temat.
W nagłówku czyli w sekcji <header> może znajdować się wiele różnych elementów, ja ograniczyłam się w projekcie tylko obrazka i menu. Grafikę postanowiłam wstawić w tło dlatego nie zobaczycie jej na razie w poniższym kodzie:
<header class="top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#topmenu"
aria-controls="topmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="topmenu" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#word">word</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#us">us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#technology">technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#design">design</a>
</li>
</ul>
</div>
</div>
</nav>
</header> Jak wspomniałam przy budowie tej strony korzystam z Bootstrap 4 dlatego większość klas w kodzie będzie miała swoje domyśle ustawiania. Sam Bootstrap nam jednak strony nie zbuduje pierwszym niestandardowym elementem będzie więc <header class=”top”>.
Napisałam dla tego elementu style:
.top{
background: url(http://aurainweb.pl/wp-content/uploads/2018/10/baner.jpg);
background-position: center;
background-size: cover;
height: 30%;
min-height: 400px;
position:relative;
width:100%;
} Jak widać w tle ustawiłam grafikę baner.jpg (plik jest do pobrania w pierwszej części kursu). Specjalnie nie będę poświęcać ułożeniu grafiki, ale możecie o tym poczytać we wpisie o obrazkach w tle. Obrazek w tle nie nada nam niestety odpowiednich wymiarów dla tej sekcji. Dlatego ustawiłam domyślną szerokość na 100% czyli na całą szerokość okna! Wysokość sekcji z kolei ma wynieść 30% przy czym nie może być mniejsza niż 400px;
Samo menu specjalnie nie różni są od innych jedyną różnica jest pojawienie się:
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#topmenu" aria-controls="topmenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
Element ten będzie bardzo istotny w momencie gdy nasza strona zostanie zwężona np. do rozmiaru tabletu. Normalne menu się wtedy schowa a przycisk zamieni się w tzw. „hamburgerowe menu”.
W tym momencie nasze menu będzie znajdowało się praktycznie na samej górze strony, w celu przesunięcia go niżej do dolnej części sekcji dodałam:
.top nav{
position:absolute;
bottom:0;
width:100%;
} A tak to będzie mniej więcej wyglądało po dodaniu CSS:
To co musieliście już zauważyć to szary kolor paska pod menu. Jest on efektem klasy .bg-dark teraz by tło było białe zmienimy ją na .bg-white. Spowoduje to niestety, że nasze odnośniki będą zlewać się z tłem. Zamieniłam również .navbar-dark na .navbar-white (taka klasa jak narzazie nie istnieje).
Następnie wprowadziłam kilka zmian
.top nav{
position:absolute;
bottom:0;
width:100%;
border-bottom: 1px solid #ccc;
padding: 0;
}
.top nav.navbar-white li{
padding: 0 15px;
}
.top nav.navbar-white li:first-of-type{
padding: 0 0px;
}
.top nav.navbar-white li a{
color: #333;
border-bottom: 2px solid transparent;
padding: 15px;
}
.top nav.navbar-white li a:hover{
border-bottom: 2px solid red;
} To oczywiście nie koniec.
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…