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
ovning8.html
116 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Övning 8</title>
<style>
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: vänster;
}
.item4 {
grid-area: mitten;
}
.item5 {
grid-area: höger;
}
.item6 {
grid-area: header2;
}
.item7 {
grid-area: vänster2;
}
.item8 {
grid-area: höger2;
}
.item9 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu menu menu menu menu menu'
'vänster vänster mitten mitten höger höger'
'header2 header2 header2 header2 header2 header2'
'vänster2 vänster2 vänster2 höger2 höger2 höger2'
'footer footer footer footer footer footer';
grid-gap: 1.4px;
background-color: rgb(132, 1, 69);
padding: 0px;
}
.item1,.item2, .item3, .item4, .item5, .item6, .item7, .item8, .item9 {
background-color: rgb(246, 181, 181);
text-align: left;
padding: 10px;
font-size: 20px;
}
.item1 {
background-color: rgba(255, 72, 176, 0.8);
text-align: center;
font-weight: bold;
}
.item2 {
background-color: rgb(227, 99, 171);
font-size: 1.3em;
font-weight: bold;
}
.item6 {
background-color: rgb(255, 142, 197);
font-size: 1.3em;
font-weight: bold;
}
.item9 {
background-color: pink;
text-align: center;
}
.hej {
font-size: 2em;
font
}
#hejdå {
position: relative;
left: -5px;
}
#tjenare {
color:aliceblue;
font-size: 1.7em;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1"><span id="tjenare">Bildfilformat</span></div>
<div class="item2">Rastergrafik</div>
<div class="item3"><strong>jpg</strong><br>Vad står förkortningen för?<br>Joint Photographic Experts Group<br>Vad innebär formatet?<br>Fördelar/nackdelar<br>Främsta användningsområdet?<br>Ett exempel!</div>
<div class="item4"><strong>gif</strong><br>Vad står förkortningen för?<br>Vad innebär formatet?<br>Fördelar/nackdelar<br>Främsta användningsområdet?<br>Ett exempel!</div>
<div class="item5"><strong>png</strong><br>Vad står förkortningen för?<br>Vad innebär formatet?<br>Fördelar/nackdelar<br>Främsta användningsområdet?<br>Ett exempel!</div>
<div class="item6">Vektorgrafik</div>
<div class="item7"><strong>wmf</strong><br>Vad står förkortningen för?<br>Vad innebär formatet?<br>Fördelar/nackdelar<br>Främsta användningsområdet?<br>Ett exempel!</div>
<div class="item8"><strong>svg</strong><br>Vad står förkortningen för?<br>Vad innebär formatet?<br>Fördelar/nackdelar<br>Främsta användningsområdet?<br>Ett exempel!</div>
<div class="item9"><span class="hej">J</span>amie <span class="hej">W</span><span id="hejdå">allin</span> 2025-11-12</div>
</div>
</body>
</html>