- 📅 2024-02-28T20:10:42.059Z
- 👁️ 195 katselukertaa
- 🔓 Julkinen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Lentsu.css">
<link rel="icon" href="Media/Lentsu.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>Lentävänniemi</title>
</head>
<style>
* {
box-sizing: content-box;
}
/*Hardest part was figuring out how to justify the content*/
/*I figured it would be best to do it on item basis instead of in general
arrangements*/
.arrangement {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
grid-template-areas:
"header"
"navi"
"coverPicture"
"description"
}
.header {
max-width: 225px;
justify-self: center;
grid-area: header;
font-weight: bold;
background-color: ivory;
text-align: center;
padding: 5px;
font-family: Arial, sans-serif;
}
.navi {
max-width: 200px;
justify-self: center;
grid-area: navi;
color: ivory;
display: block;
}
.navi a {
display: block;
text-align: center;
text-decoration: none;
font-weight: bold;
padding: 10px;
font-size: 1.5em;
font-family: "Roboto", sans-serif;
background-color: #94928f;
color: black;
}
.navi a:hover {
background-color: #7e7e7e;
}
.coverPicture {
grid-area: coverPicture;
justify-self: center;
}
.description {
grid-area: description;
text-decoration: none;
padding: 10px;
font-size: 1em;
font-family: Arial, sans-serif;
}
/*This may not be the best possible solution. There could be a dedicated info box*/
.description p {
text-align: center;
background-color: ivory;
}
/*For mobile users with a wider screen*/
@media screen and (min-width: 800px){
.arrangement {
display: grid;
grid-template-columns: 2fr;
grid-template-rows: 2fr;
grid-template-areas:
"header"
"navi"
"coverPicture"
"description";
}
.coverPicture img {
content: url("Media/800pxfront.jpg");
}
}
/*For desktop and larger screen users*/
@media screen and (min-width: 1200px){
.arrangement {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas:
"header header header"
"coverPicture description navi"
}
.navi {
justify-self: left;
}
.coverPicture img {
content: url("Media/desktopfront.jpg");
}
.description {
padding: 20px;
}
}
</style>
<body>
<div class="arrangement">
<div class="header">
<h1>Lentävänniemi</h1>
</div>
<div class="navi">
<a href="Galleria.html">Galleria</a>
</div>
<div class="coverPicture">
<img src="Media/mobilefront.jpg" alt="Talvinen näkymä Suomensaarelta">
</div>
<div class="description">
<p>
Lentävänniemi on Tampereen kaupunginosa ja läntisin piste ennen Ylöjärveä ja sen omaamaa
Siivikkalaa. Se on tunnettu luonnostaan ja monista ulkoilureiteistään.
</p>
</div>
</div>
</body>
</html>