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>Wodospady</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Łowcy wodospadów</h2>
</header>
<main>
<aside>
<a href="">Azja</a>
<a href="">Afryka</a>
<a href="">Ameryka Północna</a>
<a href="">Ameryka Południowa</a>
<a href="">Antarktyda</a>
<a href="">Europa</a>
<a href="">Australia</a>
</aside>
<section>
<table>
<tr>
<td>Identyfikator</td>
<td>Państwo</td>
<td>Nazwa wodospadu</td>
<td>Wysokość</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
<h4>Wpisz osiągnięcie do bazy</h4>
<form>
</label for="id">identyfikator wodospadu</label>
<input type="text" id="id">
<label for="turysta">turysta</label>
<select id="turysta">
<option>Ewa</option>
</select>
<input type="submit" value="Wpisz">
</form>
</section>
</main>
<article>
<h3>Wodospady w Polsce</h3>
<img src="kamienczyk.jpg" alt="wodospad">
<img src="siklawica.jpg" alt="wodospad">
<img src="siklawa.jpg" alt="wodospad">
<img src="wilczki.jpg" alt="wodospad">
</article>
<footer>
<p>Autor: </p>
</footer>
</body>
</html>styl.css
* {
font-family: Garamond, sans-serif;
text-align: center;
}
header, footer {
background-color: skyblue;
padding: 8px;
margin: 10px;
border-radius: 20px;
}
aside {
width: 30%;
}
section {
width: 70%;
height: 300px;
overflow: auto;
}
article {
background-color: aliceblue;
height: 280px;
padding: 8px;
margin: 10px;
border-radius: 20px;
}
img {
margin: 4px;
justify-content: left;
float: left;
}
table {
width: 90%;
border: 1px dotted black;
}
a {
display: block;
background-color: dodgerblue;
color: white;
width: 65%;
font-size: 130%;
margin: 10px;
text-decoration: none;
}
a:hover {
background-color: royalblue;
}
main {
display: flex;
}