Skip to content
Snippets Groups Projects
Commit 8087bd06 authored by Sigve André Myhre's avatar Sigve André Myhre
Browse files

Ferdig og sendes til Gitlab.

parent fe3c1aa5
Branches main
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.html 0 → 100644
+ 71
− 0
View file @ 8087bd06
<!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
page2.html 0 → 100644
+ 65
− 0
View file @ 8087bd06
<!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
page3.html 0 → 100644
+ 74
− 0
View file @ 8087bd06
<!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}&current_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
styles.css 0 → 100644
+ 244
− 0
View file @ 8087bd06
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment