diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4f95de9443907f0bd4f3c1a05d9060532c87f1d3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Obligatory assignment:)</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<header>
+ <div class="logo">Sigve's Corner</div>
+ <nav>
+ <ul>
+ <li><a href="index.html">Homepage</a></li>
+ <li><a href="page2.html">Dynamic Content</a></li>
+ <li><a href="page3.html">Realtime Weather</a></li>
+ </ul>
+ </nav>
+</header>
+
+<section class="forside">
+ <div class="forside-info">
+ <h1>This website is awesome!</h1>
+ <p>You're now visiting a website that can make you a little happier today.</p>
+ <button>Sign up</button>
+ </div>
+ <div class="forside-image">
+ <img src="https://facts.net/wp-content/uploads/2023/07/20-facts-about-pikachu-1689578613.jpg" alt="Pikachu Image">
+ </div>
+</section>
+
+<section class="info">
+ <h2>Some random Information.</h2>
+ <div class="informasjon">
+ <div class="informasjon-beskrivelse">
+ <div class="informasjon-placeholder">
+ <img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2017/01/Eevee-Pokemon.png" alt="Eevee Image">
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
+ </div>
+ <div class="informasjon-beskrivelse">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
+ <div class="informasjon-placeholder">
+ <img src="https://static1.thegamerimages.com/wordpress/wp-content/uploads/2020/03/pokemon-charmander-change_1400x700.jpg" alt="Charmander Image">
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="testament">
+ <blockquote>
+ This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice
+ </blockquote>
+ <p class="testament-forfatter">-Thor</p>
+</section>
+
+<section class="registrer">
+ <div class="registrer-content">
+ <h3>Call to action! It's time!</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
+ </div>
+ <button>Sign up</button>
+</section>
+
+<footer>
+ <p>Copyright ©</p>
+</footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/page2.html b/page2.html
new file mode 100644
index 0000000000000000000000000000000000000000..620f56d527145d2f6595c0a67a6073a217bcd448
--- /dev/null
+++ b/page2.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Obligatory assignment:)</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+
+
+
+<header>
+ <div class="logo">Sigve's Corner</div>
+ <nav>
+ <ul>
+ <li><a href="index.html">Homepage</a></li>
+ <li><a href="page2.html">Dynamic Content</a></li>
+ <li><a href="page3.html">Realtime Weather</a></li>
+ </ul>
+ </nav>
+</header>
+
+<body>
+<div class="posts"></div>
+</body>
+<footer>
+ <p>Copyright ©</p>
+</footer>
+</html>
+
+<script>
+ let nextId = 1;
+ let busy = false;
+
+ function addPosts() {
+ if (busy) return;
+ busy = true;
+
+ let count = 0;
+ while (count < 3) {
+ fetch(`https://jsonplaceholder.typicode.com/posts/${nextId}`)
+ .then(r => r.json())
+ .then(post => {
+ let box = document.createElement('div');
+ box.className = 'post-box';
+ box.innerHTML = `
+ <h3>${post.title}</h3>
+ <p>${post.body}</p>
+ `;
+ document.querySelector('.posts').appendChild(box);
+ });
+ nextId++;
+ count++;
+ }
+ busy = false;
+ }
+
+ window.onscroll = function() {
+ if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) {
+ addPosts();
+ }
+ };
+
+ addPosts();
+</script>
\ No newline at end of file
diff --git a/page3.html b/page3.html
new file mode 100644
index 0000000000000000000000000000000000000000..ce8b4ea813286a29417ed79f2f3225b1329200c5
--- /dev/null
+++ b/page3.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Sanntidsvær</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header>
+ <div class="logo">Sigve's Corner</div>
+ <nav>
+ <ul>
+ <li><a href="index.html">Hjemmeside</a></li>
+ <li><a href="page2.html">Dynamisk Innhold</a></li>
+ <li><a href="page3.html">Sanntidsvær</a></li>
+ </ul>
+ </nav>
+</header>
+
+<section class="vaer-seksjon">
+ <h2>Sanntidsvær</h2>
+ <div id="vaer-oppdatering"></div>
+</section>
+
+<footer>
+ <p>Copyright ©</p>
+</footer>
+
+<script>
+ const steder = [
+ { navn: 'Stavanger, Norge',
+ breddegrad: 58.9690, lengdegrad: 5.7331 },
+ { navn: 'Escalante, Filippinene',
+ breddegrad: 10.8403, lengdegrad: 123.4993 },
+ { navn: 'Pecs, Ungarn',
+ breddegrad: 46.0727, lengdegrad: 18.2323 },
+ { navn: 'Hirtshals, Danmark',
+ breddegrad: 57.5887, lengdegrad: 9.9591 },
+ { navn: 'Sunny Beach, Bulgaria',
+ breddegrad: 42.6940, lengdegrad: 27.7101 }
+ ];
+
+ async function hentVaerdata() {
+ const vaerOppdatering = document.getElementById('vaer-oppdatering');
+ vaerOppdatering.innerHTML = '';
+
+ for (const sted of steder) {
+ try {
+ const respons = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${sted.breddegrad}&longitude=${sted.lengdegrad}¤t_weather=true`);
+ if (!respons.ok) throw new Error("Det skjedde en feil, har du dårlig internett?");
+ const data = await respons.json();
+
+ const vaerInfo = document.createElement('div');
+ vaerInfo.className = 'vaer-boks';
+ vaerInfo.innerHTML = `
+ <h3>${sted.navn}</h3>
+ <p>Temperatur: ${data.current_weather.temperature}°C</p>
+ <p>Vind: ${data.current_weather.windspeed} m/s</p>
+ `;
+ vaerOppdatering.appendChild(vaerInfo);
+ } catch (error) {
+ console.error(`Det skjedde desverre en feil :(`, error);
+ }
+ }
+ }
+
+ setInterval(hentVaerdata, 30000); ///< Oppdateres hvert 30 sekund
+
+ window.addEventListener('load', hentVaerdata);
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..e8ce9c03a2edd1454d3f59208e9081c668ef5f15
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,244 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+ padding: 0;
+ min-height: 101vh;
+}
+
+header {
+ background-color: #1F2937;
+ color: #F9FAF8;
+ padding: 50px 200px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ text-align: center;
+ border-bottom: 1px solid #F9FAF8;
+}
+
+.logo {
+ font-size: 48px;
+ font-weight: bold
+}
+
+
+nav ul {
+ list-style-type: none;
+ display: flex;
+ gap: 20px;
+ transition: transform 0.3s;
+}
+
+nav a {
+ color: #E5E7EB;
+ font-weight: 200;
+ text-decoration: none;
+}
+
+
+.forside {
+ background-color: #1F2937;
+ color: #F9FAF8;
+ padding: 100px 200px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.forside-info {
+ flex: 1;
+}
+
+.forside h1 {
+ font-size: 48px;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+.forside p {
+ font-size: 18px;
+ color: #E5E7EB;
+ margin-bottom: 10px;
+ max-width: 400px;
+ font-weight: 200;
+}
+
+button {
+ background-color: #3882F6;
+ color: #F9FAF8;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 8px;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+
+.forside-image img {
+ width: 100%;
+ max-width: 400px;
+ height: auto;
+ display: block;
+}
+.placeholder {
+ background-color: #6D747D;
+ width: 100%;
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #F9FAF8;
+}
+
+
+.info {
+ padding: 50px 300px;
+ text-align: center;
+}
+
+.info h2 {
+ font-size: 36px;
+ font-weight: bold;
+ color: #1F2937;
+ margin-bottom: 40px;
+}
+
+.informasjon {
+ display: flex;
+ justify-content: space-between;
+ gap: 40px;
+}
+
+.informasjon-beskrivelse {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.informasjon-beskrivelse p {
+ text-align: left;
+}
+
+.informasjon-placeholder img{
+ width: 350px;
+ height: 200px;
+ border: 5px solid #3882F6;
+ border-radius: 15px;
+}
+
+.testament {
+ background-color: #E5E7EB;
+ padding: 100px 300px;
+}
+
+blockquote {
+ font-size: 36px;
+ font-style: italic;
+ color: #1F2937;
+ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+ margin: 0;
+}
+
+.testament-forfatter {
+ text-align: right;
+ font-weight: bold;
+ font-size: 24px;
+ margin-top: 20px;
+}
+
+.registrer {
+ background-color: #3882F6;
+ color: #F9FAF8;
+ margin: 100px 275px;
+ padding: 50px 100px;
+ border-radius: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.registrer button {
+ border: 2px solid #F9FAF8;
+ transition: transform 0.3s;
+}
+
+.registrer button:hover {
+ transform: scale(1.10);
+}
+
+footer {
+ background-color: #1F2937;
+ color: #F9FAF8;
+ text-align: center;
+ padding: 40px 0;
+ min-height: 100px;
+}
+
+.posts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ padding: 25px;
+}
+
+.post-box {
+ flex: 1 1 300px;
+ border: 2px solid #000000;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 1px 1px 0 #000;
+}
+
+
+.vaer-seksjon {
+ max-width: 900px;
+ margin: 40px auto;
+ padding: 30px;
+ background-image: url('https://www.andrewshoemaker.com/images/640/palauea-beach-palms-sunset.jpg');
+ background-size: cover;
+ border-radius: 12px;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
+}
+
+.vaer-seksjon h2 {
+ text-shadow: 1px 1px 0 #000;
+ text-align: center;
+ font-size: 30px;
+ color: #FFFFFF;
+}
+
+#vaer-oppdatering {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+.vaer-boks {
+ background: #ffffff;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ margin: 10px;
+ padding: 20px;
+ width: 220px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+ text-align: center;
+ transition: transform 0.3s;
+}
+
+.vaer-boks:hover {
+ transform: scale(1.10);
+}
+
+.vaer-boks h3 {
+ margin: 0 0 15px 0;
+ color: #282c34;
+ font-size: 1.2em;
+}
+
+.vaer-boks p {
+ margin: 5px 0;
+ color: #333;
+ font-size: 1em;
+}
\ No newline at end of file