Załączniki są na dole strony
index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
</head>
<body>
<div class="flex">
<header id="left">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="right">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
</div>
<main>
<h1>Oto nasz wybór najciekawszych gier</h1>
<div class="imgs flex" id="imgs1">
<img src="gra1.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra2.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra3.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra4.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra5.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra6.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra7.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra8.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra9.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra10.jpg" alt="Miniatura gry" title="Tytuł gry">
</div>
</main>
<footer>
<p>Autor: <strong>00000000000</strong></p>
<p id="wejscia"></p>
</footer>
</body>
</html>onas.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
</head>
<body>
<div class="flex">
<header id="left">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="right">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
</div>
<main>
<h1>Twoje centrum rozrywki</h1>
<div class="imgs flex" id="imgs2">
<img src="gra10.jpg">
<img src="gra5.jpg">
<img src="gra1.jpg">
</div>
<p>Zapraszamy do naszej wypożyczalni <strong>gier konsolowych i komputerowych</strong>, gdzie każdy znajdzie coś dla siebie! Oferujemy szeroką gamę tytułów, od najnowszych hitów po klasyczne produkcje, które wciąż cieszą się niesłabnącą popularnością. Dzięki nam możesz cieszyć się ulubionymi grami bez konieczności ich zakupu, co pozwala na oszczędność pieniędzy i przestrzeni. Nasza wypożyczalnia to idealne miejsce dla każdego miłośnika gier, niezależnie od wieku i preferencji.</p>
<p>Nasza oferta jest dostosowana do potrzeb wszystkich graczy. Posiadamy <em>gry na różne platformy</em>, w tym PlayStation, Xbox, Nintendo oraz PC. Regularnie aktualizujemy nasz katalog, abyś zawsze miał dostęp do najnowszych premier. Niezależnie od tego, czy jesteś fanem dynamicznych strzelanek, epickich RPG, czy relaksujących gier strategicznych, u nas znajdziesz coś, co spełni Twoje oczekiwania.</p>
<p>Wypożyczanie gier w naszej wypożyczalni jest proste i wygodne. Możesz dokonać <strong>rezerwacji online</strong> lub odwiedzić nas osobiście, gdzie nasi pracownicy chętnie doradzą i pomogą w wyborze odpowiednich tytułów. Gwarantujemy <em>atrakcyjne ceny i elastyczne warunki wypożyczenia</em>, dostosowane do Twoich potrzeb. Dołącz do grona naszych zadowolonych klientów i odkryj, jak wiele radości może przynieść świat gier!</p>
</main>
<footer>
<p>Autor: <strong>00000000000</strong></p>
<p id="wejscia"></p>
</footer>
</body>
</html>styl.css
* {
font-family: 'Segoe UI', Tahoma;
}
#left {
width: 40%;
}
#right {
width: 60%;
align-items: end;
text-align: end;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
text-decoration: none;
color: #0077A2;
}
li a {
padding: 1em;
}
h1 {
text-align: center;
}
img {
width: 20em;
margin: 1em;
}
.flex {
display: flex;
flex-wrap: wrap;
}
img:hover {
outline: 3px dashed #E30613;
}
.imgs {
align-items: center;
justify-content: center;
}