To już przed ostatnia część mojego kursu. Omówię w niej ostatnie dwie części budowanej strony internetowej.
W 6 ostatniej części pokażę animacje jakie warto dodać do strony. Linki do poprzednich części kursu znajdziecie poniżej:
Co znajdziesz w tym wpisie
Sekcja design
Podobnie jak sekcja znajdująca się zaraz pod nagłówkiem nie jest zbyt skompilowana.
<section id="design">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Lorem ipsum dolor sit amet, </h3>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas
sit, <a href="">aspernatur aut</a> odit aut fugit, sed quia consequuntur magni dolores eos</p>
</div>
</div>
</div>
</section>Specjalnie do tej sekcji nie trzeba nic dodawać. Pojawia się tu jednak zwykły link. Nie posiada on określonego miejsca prowadzenia, jednak jak widać w projekcie wyróżnia się na tle reszty tekstu.
section a, footer a, section a:focus, footer a:focus{
color: red;
}
section a:hover, footer a:hover{
opacity: 0.7;
color: red;
text-decoration:none;
}Powyższy kod wprowadza nas również do następnej sekcji, którą jest stopka (footer).
To już ostatnia sekcja.
<footer>
<div class="container bootom">
<div class="row">
<div class="col-12 col-md-4">
<ul>
<li>sed ut perspiciatis</li>
<li>unde omnis iste</li>
<li>natus error sit</li>
<li>voluptatem accusantium</li>
<li>doloremque laudantium</li>
</ul>
</div>
<div class="col-12 col-md-4">
<ul>
<li>sed ut perspiciatis</li>
<li>unde omnis iste</li>
<li>natus error sit</li>
<li>voluptatem accusantium</li>
<li>doloremque laudantium</li>
</ul>
</div>
<div class="col-12 col-md-4">
<ul>
<li>sed ut perspiciatis</li>
<li>unde omnis iste</li>
<li>natus error sit</li>
<li>voluptatem accusantium</li>
<li>doloremque laudantium</li>
</ul>
</div>
</div>
</div>
<div class="container text-center">
<p>© 2017-2018 Company Name</p>
<p>
<a href="#">Privacy terms suport</a>
</p>
</div>
</footer>W tej sekcji posiadamy wypunktowaną listę. A właściwie 3 wypunktowane listy. Kolumny można stworzyć również w inny sposób ja jednak wybrałam bardziej tradycyjny. Jak byście jednak chcieli spróbować zrobić inaczej alternatywną metodę znajdziecie pod linkiem.
section, footer{
padding: 30px 0;
}
Domyślne wypunktowanie na stronach jest w formie kropek. W projekcie jest ono jednak kwadratowe – dlatego dopisałam do CSS:
section ul, footer ul{
list-style:square;
}
Teraz jeszcze dodam odstęp:
footer .bootom{
padding: 30px 0;
}Podsumowanie kodu strony
Wiemy jak wyglądają już pojedyncze sekcje – warto jednak jeszcze raz zobaczyć kod w całości. I tak nasz index.html prezentuje się następująco:
<!doctype html> <!-- tag informujący z jakiego języka będziemy korzystać -->
<html lang="pl"> <!-- tag otwierający -->
<head> <!-- głowa strony -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Nowa strona</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head> <!-- zamknięcie głowy -->
<body>
<header class="top">
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-white">
<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>
<section id="word">
<div class="container">
<div class="row">
<div class="col-12">
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p>
</div>
</div>
</div>
</section>
<section id="us">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6 image"><img src="https://www.aurainweb.pl/wp-content/uploads/2018/10/grafik.jpg" class="img-fluid"></div>
<div class="col-12 col-md-6"><p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p></div>
</div>
</div>
</section>
<section id="technology">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6 order-md-2 image"><img src="https://www.aurainweb.pl/wp-content/uploads/2018/10/grafik.jpg" class="img-fluid"></div>
<div class="col-12 col-md-6 order-md-1"><p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos</p></div>
</div>
</div>
</section>
<section id="design">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Lorem ipsum dolor sit amet, </h3>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, <a href="">aspernatur aut</a> odit aut fugit, sed quia consequuntur magni dolores eos</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container bootom">
<div class="row">
<div class="col-12 col-md-4">
<ul>
<li>sed ut perspiciatis</li>
<li>unde omnis iste</li>
<li>natus error sit</li>
<li>voluptatem accusantium</li>
<li>doloremque laudantium</li>
</ul>
</div>
<div class="col-12 col-md-4">
<ul>
<li>sed ut perspiciatis</li>
<li>unde omnis iste</li>
<li>natus error sit</li>
<li>voluptatem accusantium</li>
<li>doloremque laudantium</li>
</ul>
</div>
<div class="col-12 col-md-4">
<ul>
<li>sed ut perspiciatis</li>
<li>unde omnis iste</li>
<li>natus error sit</li>
<li>voluptatem accusantium</li>
<li>doloremque laudantium</li>
</ul>
</div>
</div>
</div>
<div class="container text-center">
<p>© 2017-2018 Company Name</p>
<p>
<a href="#">Privacy terms suport</a>
</p>
</div>
</footer>
</body>
</html> <!-- tag kończący stronę -->Z kolej nasz plik CSS wygląda tak:
@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;
}
section, footer{
margin: 60px 0;
}
section ul, footer ul{
list-style:square;
}
section a, footer a, section a:focus, footer a:focus{
color: red;
}
section a:hover, footer a:hover{
opacity: 0.7;
color: red;
text-decoration:none;
}
h3{
padding-bottom: 14px;
font-weight: 600;
}
.top{
background: url(https://www.aurainweb.pl/wp-content/uploads/2018/10/baner.jpg);
background-position: center;
background-size: cover;
height: 30%;
min-height: 400px;
position:relative;
margin-bottom:30px;
background-attachment: fixed;
}
.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, .top nav.navbar-white li a.active{
border-bottom: 2px solid red;
}
/* */
.top .fixed-top{
position:fixed;
top: 0;
bottom: auto;
}
#us p, #technology p{
padding: 18px 2% 0;
}
#us img, #technology img{
width: 100%;
height: auto;
}
#us img:hover, #technology img:hover{
-webkit-filter: grayscale(60%);
-moz-filter: grayscale(60%);
-o-filter: grayscale(60%);
-ms-filter: grayscale(60%);
filter: grayscale(60%);
}
.image{
padding:0;
}
footer .bootom{
padding-top: 30px;
padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.navbar-light .navbar-toggler{
margin: 6px 0;
}
.top nav.navbar-white li{
padding: 0;
text-align: center;
}
}
Powyższy kod pozbawiony jest praktycznie animacji. Kwestia animacji jak i sam gotowy szablon pojawią się w ostatniej części.
Drobne poprawki RWD
W celu poprawienia wyglądu strony na urządzeniach mobilnych możemy dodać kod:
@media only screen and (max-width: 767px) {
.navbar-light .navbar-toggler{
margin: 6px 0;
}
.top nav.navbar-white li{
padding: 0;
text-align: center;
}
}
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.