first commit

SimenWG · May 28, 2024 · dc23e00 · dc23e00
commit dc23e00
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');
+
+* {
+    font-family: "Reddit Mono", monospace;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed; 
+    overflow: hidden;
+}
+
+.navbar {
+    display: flex;
+    justify-content: center;
+    background-color: #414142;
+    padding: 10px;
+}
+
+.navbar a {
+    color: #ababab;
+    text-decoration: none;
+    padding: 14px 20px;
+    text-align: center;
+    transition: .3s ease-in-out;
+}
+
+.navbar a:hover {
+    border-bottom: 2px solid #0066cc;
+    color: #fff;
+}
+
+.background-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 600px;
+    justify-content: space-between;
+}
+
+.arrow {
+    cursor: pointer;
+    font-size: 3em;
+    margin: 0 20px;
+    color: #0066cc;
+    user-select: none;
+    transition: .42s ease-in-out;
+}
+
+.arrow:hover {
+    color: #fff;
+}
+
+.text-box {
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    padding: 20px;
+    border-radius: 8px;
+    min-width: 300px;
+    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+
+.text-box.hide-left,
+.text-box.hide-right {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.text-box.hide-left {
+    transform: translateX(-100%);
+}
+
+.text-box.hide-right {
+    transform: translateX(100%);
+}
+
+body.hide-left,
+body.hide-right {
+    transition: none; 
+}
diff --git a/img/Viken_våpen.svg.png b/img/Viken_våpen.svg.png
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>1IMA</title>
+    <link rel="icon" type="image/x-icon" href="img/Viken_våpen.svg.png">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body style="background-image: url('https://afk.no/handlers/bv.ashx/i1b1e98c8-ed16-4448-a999-cec41a5e19d7/w1920/h1080/q203474/ka7140f124228/ika_mariannewahlberg_h-98.jpg');">
+    <div class="navbar">
+        <a href="html/Programmering">Programmering</a>
+        <a href="html/YFF">YFF</a>
+        <a href="html/Medie">Medieproduksjon</a>
+        <a href="html/Teknologi">Teknologiforståelse</a>
+        <a href="html/Programmering">Kontakt</a>
+    </div>
+    <div class="background-container">
+        <span class="arrow" onclick="previousImage()">&#9664;</span>
+        <div class="text-box">
+            <h1 id="title">Røyken VGS</h1>
+            <p id="subtitle">Informasjonsteknologi & Medieproduksjon</p>
+        </div>
+        <span class="arrow" onclick="nextImage()">&#9654;</span>
+    </div>
+    <script src="js/index.js"></script>
+</body>
+</html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,42 @@
+const images = [
+    { url: 'https://afk.no/handlers/bv.ashx/i1b1e98c8-ed16-4448-a999-cec41a5e19d7/w1920/h1080/q203474/ka7140f124228/ika_mariannewahlberg_h-98.jpg', title: 'Røyken VGS', subtitle: 'Informasjonsteknologi & Medieproduksjon' },
+    { url: 'https://www.tekna.no/contentassets/324cedfebd5a493aa5a7dd0c068ccfd9/htmlcss.jpg?width=1200&height=628&mode=crop', title: 'Programmering', subtitle: 'HTML, CSS, JS, GitHub' },
+    { url: 'https://images.pexels.com/videos/3126361/free-video-3126361.jpg', title: 'YFF', subtitle: 'Arbeidsliv, CV, Søknad' },
+    { url: 'https://motionarray.imgix.net/motion-array-1085962-Gu4cuELIpT-high_0014.jpg?w=660&q=60&fit=max&auto=format', title: 'Medieproduksjon', subtitle: 'Adobe Premiere Pro, Photoshop, After Effects' },
+    { url: 'https://afk.no/handlers/bv.ashx/i4eb9212a-2bd6-4cf3-9b2c-58cf3e4bcdf8/w1920/h1080/q203480/k4834faa5ef15/ika_mariannewahlberg_h-96.jpg', title: 'Teknologiforståelse', subtitle: 'IT-Drift, Personvern, HMS' }
+];
+
+let currentIndex = 0;
+
+function updateBackground(direction) {
+    const body = document.body;
+    const textBox = document.querySelector('.text-box');
+
+    textBox.classList.add('hide-' + direction);
+    body.classList.add('hide-' + direction);
+
+    setTimeout(() => {
+        currentIndex = direction === 'left' ? 
+            (currentIndex > 0 ? currentIndex - 1 : images.length - 1) :
+            (currentIndex < images.length - 1 ? currentIndex + 1 : 0);
+
+        body.style.backgroundImage = `url(${images[currentIndex].url})`;
+        document.getElementById('title').innerText = images[currentIndex].title;
+        document.getElementById('subtitle').innerText = images[currentIndex].subtitle;
+
+        textBox.classList.remove('hide-left', 'hide-right');
+        body.classList.remove('hide-left', 'hide-right');
+    }, 500);
+}
+
+function previousImage() {
+    updateBackground('left');
+}
+
+function nextImage() {
+    updateBackground('right');
+}
+
+window.onload = () => {
+    document.body.style.backgroundImage = `url(${images[currentIndex].url})`;
+};