diff --git a/intro html/js.html b/intro html/js.html
index 3aa17eb..a27ecc2 100644
--- a/intro html/js.html	
+++ b/intro html/js.html	
@@ -4,7 +4,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>JS Intro</title>
+    <style>
+        .header {
+            background-color: black;
+            color: beige;
+            border: solid red 1px;
+            text-align: center;
+            font-size: x-large;
+            padding: 10px;
+        }
+
+        div.color1 {
+            background-color: bisque;
+            color: black;
+        }
+
+        div.color2 {
+            background-color: brown;
+            color: lightblue;
+        }
+
+        div.card {
+            background-color: grey;
+            color: blueviolet;
+            width: 300px;
+        }
+    </style>
 </head>
 
 <body>
@@ -20,11 +46,58 @@
         <li>Åpne og Lukke</li>
         <li>Velge hode</li>
     </ol>
-    <div id="geirsTagg">(tom)</div>
-    <button onclick="newText()">Trykk her</button>
+    <div class="card">
+        <div class="header color1" onclick="newText()"><b>Overskrift A</b>
+        </div>
+        <div id="tag1"></div>
+    </div>
+    <div class="card">
+        <div class="header color2" onclick="noClick()"><b>Overskrift B</b></div>
+        <div id="tag2"></div>
+    </div>
+    <h3>Bla opp og ned</h3>
+    <div style="display: flex;" id="numbersAndButtons">
+
+    </div>
     <script>
+        showNumber1();
         function newText() {
-            document.getElementById('geirsTagg').innerHTML = 'Ny tekst'
+            blankAll();
+            document.getElementById('tag1').innerHTML = /*HTML*/ `
+            <h1>Ny tekst 1</h1>`;
+        }
+        function noClick() {
+            blankAll();
+            document.getElementById('tag2').innerHTML = '<h2>Ikke trykk</h2>'
+        }
+        function blankAll() {
+            document.getElementById('tag1').innerHTML = '';
+            document.getElementById('tag2').innerHTML = '';
+        }
+        function showNumber1() {
+            document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
+            <button onclick="showNumber4">◀</button>
+            <div style="width: 40px; text-align: center;">1</div>
+            <button onclick="showNumber2">▶</button>
+        `;
+        function showNumber2() {
+            document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
+            <button onclick="showNumber1">◀</button>
+            <div style="width: 40px; text-align: center;">2</div>
+            <button onclick="showNumber3">▶</button>
+        `;
+        function showNumber3() {
+            document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
+            <button onclick="showNumber2">◀</button>
+            <div style="width: 40px; text-align: center;">3</div>
+            <button onclick="showNumber4">▶</button>
+        `;
+        function showNumber4() {
+            document.getElementById('numbersAndButtons').innerHTML = /*HTML*/ `
+            <button onclick="showNumber3">◀</button>
+            <div style="width: 40px; text-align: center;">1</div>
+            <button onclick="showNumber1">▶</button>
+        `;
         }
     </script>
 </body>
