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
jamie.html
369 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jamie - Biologisk mångfald</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f6f1;
color: #222;
line-height: 1.7;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(25, 70, 35, 0.95);
padding: 18px 0;
z-index: 1000;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 35px;
flex-wrap: wrap;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 15px;
}
nav a:hover {
color: #c9e8c9;
}
.hero {
height: 90vh;
background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80") center/cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding: 20px;
}
.hero-text {
max-width: 900px;
}
.hero h1 {
font-size: 58px;
margin-bottom: 20px;
}
.hero p {
font-size: 21px;
margin-bottom: 30px;
}
.button {
display: inline-block;
background-color: #2f7d42;
color: white;
padding: 14px 28px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
.button:hover {
background-color: #1f5a2e;
transform: scale(1.05);
}
section {
width: 85%;
max-width: 1100px;
margin: auto;
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 45px;
}
.section-title h2 {
font-size: 38px;
color: #245c32;
margin-bottom: 10px;
}
.section-title p {
color: #555;
max-width: 750px;
margin: auto;
}
.box {
background-color: white;
padding: 35px;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.box h3 {
color: #245c32;
font-size: 28px;
margin-bottom: 18px;
}
.box p {
margin-bottom: 18px;
font-size: 17px;
}
.ingress {
font-size: 18px;
font-weight: bold;
}
.quote {
background-color: #245c32;
color: white;
padding: 40px;
border-radius: 18px;
text-align: center;
font-size: 22px;
font-weight: bold;
margin-top: 35px;
}
.source-list {
list-style: none;
}
.source-list li {
background-color: #eef5ee;
padding: 15px;
margin-bottom: 12px;
border-left: 6px solid #2f7d42;
border-radius: 8px;
}
footer {
background-color: #194623;
color: white;
text-align: center;
padding: 30px;
margin-top: 40px;
}
#topBtn {
position: fixed;
right: 25px;
bottom: 25px;
background-color: #2f7d42;
color: white;
border: none;
padding: 14px 18px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: none;
}
#topBtn:hover {
background-color: #194623;
}
@media (max-width: 900px) {
.hero h1 {
font-size: 42px;
}
.hero p {
font-size: 18px;
}
nav ul {
gap: 15px;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="https://labb.vgy.se/~maxtol25/ovningar/Framtiden/framtidalla.html">Start</a></li>
<li><a href="#vad">Biologisk mångfald</a></li>
<li><a href="#viktigt">Varför viktigt?</a></li>
<li><a href="#teknik">Teknikens roll</a></li>
<li><a href="#kallor">Källor</a></li>
</ul>
</nav>
<header class="hero" id="start">
<div class="hero-text">
<h1>Biologisk mångfald och teknikens roll</h1>
<p>Jamies introduktion till biologisk mångfald, ekosystem och hur teknik används inom naturbevarande.</p>
<a href="#vad" class="button">Läs rapporten</a>
</div>
</header>
<section id="vad">
<div class="section-title">
<h2>Vad är biologisk mångfald?</h2>
<p>
Biologisk mångfald handlar om variationen av allt liv på jorden och hur olika organismer samspelar i naturen.
</p>
</div>
<div class="box">
<p class="ingress">
Biologisk mångfald beskriver variationen av allt liv på jorden. Det handlar både om olika arter av djur, växter, svampar och mikroorganismer, men också om variationen inom arter och mellan olika ekosystem.
</p>
<p>
Man brukar dela in biologisk mångfald i tre nivåer: genetisk mångfald, artmångfald och ekosystemmångfald. Genetisk mångfald innebär skillnader inom en art, till exempel variation mellan individer.
</p>
<p>
Artmångfald handlar om hur många olika arter som finns i ett område, medan ekosystemmångfald beskriver variationen av olika livsmiljöer som skogar, hav och ängar.
</p>
<p>
Biologisk mångfald kan också ses som “livets väv”, där alla organismer är beroende av varandra och tillsammans skapar fungerande ekosystem.
</p>
</div>
</section>
<section id="viktigt">
<div class="section-title">
<h2>Varför är biologisk mångfald viktig?</h2>
<p>
Fungerande ekosystem är avgörande för både naturen och människans framtid.
</p>
</div>
<div class="box">
<p>
Biologisk mångfald är viktig eftersom allt liv i naturen hänger ihop och är beroende av fungerande ekosystem. Växter, djur, svampar och mikroorganismer bidrar tillsammans till processer som gör livet möjligt på jorden.
</p>
<p>
Genom biologisk mångfald får människor tillgång till viktiga ekosystemtjänster, såsom rent vatten, pollinering av grödor, syreproduktion och naturlig rening av luft och mark.
</p>
<p>
En hög biologisk mångfald gör också naturen mer motståndskraftig mot förändringar och störningar, till exempel klimatförändringar, sjukdomar eller naturkatastrofer.
</p>
<p>
Biologisk mångfald är även viktig för människans ekonomi och samhällsutveckling. Jordbruk, fiske och medicinsk forskning är beroende av naturens resurser och olika arter.
</p>
</div>
</section>
<section id="teknik">
<div class="section-title">
<h2>Hur teknik började användas</h2>
<p>
Modern teknik spelar idag en viktig roll inom arbetet med att skydda biologisk mångfald och ekosystem.
</p>
</div>
<div class="box">
<p>
Tidigare arbetade forskare främst med observationer ute i fält. De använde enkla verktyg som kikare, kameror och anteckningar för att följa djur och undersöka olika ekosystem.
</p>
<p>
Med tiden utvecklades tekniken och började spela en allt större roll inom naturbevarande. Idag används satelliter, drönare och artificiell intelligens för att övervaka naturen och samla in data snabbare och mer exakt än tidigare.
</p>
<p>
Satellitbilder kan användas för att upptäcka avskogning och förändringar i ekosystem, medan drönare hjälper forskare att övervaka djur och svårtillgängliga områden.
</p>
<p>
AI används också för att analysera bilder, ljud och videor för att identifiera arter och upptäcka hot mot biologisk mångfald snabbare än människor kan göra manuellt.
</p>
<p>
Tekniken har därför gjort naturvårdsarbete mer effektivt och hjälpt forskare att skydda både arter och ekosystem på nya sätt.
</p>
</div>
<div class="quote">
Natur och teknik behöver samarbeta för att skydda framtidens ekosystem.
</div>
</section>
<section id="kallor">
<div class="section-title">
<h2>Källor</h2>
<p>
Källor som har använts i rapporten.
</p>
</div>
<div class="box">
<ul class="source-list">
<li>Naturvårdsverket – Vad är biologisk mångfald?</li>
<li>WWF – Om biologisk mångfald</li>
<li>Jordbruksverket – Vad är biologisk mångfald?</li>
<li>Naturvårdsverket – Varför är biologisk mångfald viktigt?</li>
<li>Ramboll – Varför är biologisk mångfald viktigt?</li>
<li>Miljö & Utveckling – Varför är biologisk mångfald viktigt?</li>
<li>World Wildlife Fund – Conservation Technology Report</li>
<li>World Economic Forum – Technology and biodiversity</li>
</ul>
</div>
</section>
<footer>
<p>Jamie · Grupparbete · Biologisk mångfald och ekosystembevarande</p>
</footer>
<button id="topBtn">↑</button>
<script>
const topBtn = document.getElementById("topBtn");
window.addEventListener("scroll", function() {
if (window.scrollY > 500) {
topBtn.style.display = "block";
} else {
topBtn.style.display = "none";
}
});
topBtn.addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>
</body>
</html>