Show sourcecode
The following files exists in this folder. Click to view.
webbsrvprg/style/webbsrvprg/webbutveckling1/Övningar/
61GgijAIoDL._AC_UF1000,1000_QL80_.jpg
CSS/
Pawmatchhh.png
apa.jpg
ex.html
foretagsprojekt/
foretagsprojekt.zip
goldie.jpg
jamie.html
javascript.html
javascript_cart.html
jquery.html
kanin.png
krokodil.jpg
labradoodle.jpg
labrador.jpg
loggapaw.png
maldiverna.jpg
mason.jpg
mosaic.jpg
ovning0.html
ovning1.html
ovning2.html
ovning3.html
ovning4_a.html
ovning4_b.html
ovning4_c.html
ovning6.html
ovning8.html
ovning9.html
ovning9apelsin.html
ovning9äpple.html
ovningflexbox.html
ovningform.html
ovningssida.html
responsivewebb/
startsida.hund.jpeg
startsida.hund2.jpg
sunset.la.webp
test.html
testsida.html
wp9473997-maldives-4k-wallpapers.jpg
wp9474007-maldives-4k-wallpapers.jpg
ovning9.html
121 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Övning 9</title>
<style>
#vald {
font-weight: bold;
}
.grid-container {
display: grid;
grid-template-areas:
'header header header reklam'
'right middle middle reklam'
'right footer footer reklam';
grid-gap: 2px;
background-color: black;
border: rgb(47, 37, 37) 2px solid;
}
.header {
grid-area: header;
text-align: center;
background-color: palevioletred;
}
.reklam {
display:flex;
flex-direction: column;
gap: 10px;
grid-area: reklam;
text-align: center;
background-color: rgb(255, 124, 124);
}
.right {
grid-area: right;
background-color: rgb(255, 90, 120);
}
.middle {
grid-area: middle;
background-color: rgb(249, 230, 230);
}
.footer {
grid-area: footer;
text-align: center;
background-color: gray;
}
.bakgrund {
background-color: rgb(226, 186, 186);
border: black 3px solid;
padding: 5px;
}
.header,
.reklam,
.right,
.middle,
.footer {
padding: 20px;
}
nav a {
display: block;
padding:5px 10px;
border: 1px solid black;
background-color: aliceblue;
text-decoration: none;
}
a:hover {
background-color: plum;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">HTML5-element</div>
<div class="reklam">Reklam
<div class="bakgrund">
<p>Superpris<br>9,90kr/kg</p>
</div>
<div class="bakgrund">
<p>Kanonpris<br>0,99kr/kg</p>
</div>
<div class="bakgrund">
<p>Fantompris<br>4,95kr/1/2kg</p>
</div>
</div>
<div class="right">
<div class="bakgrund">
<p>Aktuella frukter</p>
<nav>
<a href="./ovning9.html" id="vald">banan</a>
<a href="./ovning9apelsin.html">apelsin</a>
<a href="./ovning9äpple.html">äpple</a>
</nav>
</div>
</div>
<div class="middle"><b>Frukter<br>Banan</b><br>Banan är ett bär och en ört tillhörande banansläktet i<br>
familjen bananväxter. Bananträder(busken) kan bli upp<br>
till tolv meter hög. Det finns cirka 300 sorter av<br>
bananer. Fruktköttet är i början fast och rikt på<br>
stärkelse, som sedan omvandlas till socker samtidigt<br>
som bananen mjuknar. Bananerna växer i tvåradiga<br>
klasar på en stock med ibland upp till 200 bananer och<br>
kan ha en sammanlagd vikt på upp till 50 kg.<br>
Bananerna skördas ofta när de är gröna och får<br>
eftermogna på destinationsorten. Bananen är en av de<br>
störtsa örterna som finns.</div>
<div class="footer">Jamie Wallin 2025-12-11</div>
</div>
</body>