diff --git a/intro html/index.html b/intro html/index.html
index bd1fc32..4e1c269 100644
--- a/intro html/index.html	
+++ b/intro html/index.html	
@@ -4,6 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=x, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js"></script>
 </head>
 
 <body>
@@ -14,33 +16,41 @@
 
     <h1>Eksempel 1</h1>
 
-    Hva heter du?<input type="text">
-
-    <div>
-        Verktøy
+    <div id="cards">
+        <div class="card">
+            <div class="header green">
+                Verktøy
+            </div>
+        </div>
     </div>
-    <div>
-        De to viktigste verktøyene vi skal bruke er disse:
-        <ul>
-            <li>
-                Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
-                <br>
-                Vi skal bruke noen <i>extensions</i>:
-                <ul>
-                    <li>JavaScript-booster</li>
-                    <li>es6-string-html</li>
-                    <li>live-server</li>
-                    <li>live-share</li>
-                </ul>
-            </li>
-            <li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
-        </ul>
+    <div class="card">
+        <div class="innerCard">
+            De to viktigste verktøyene vi skal bruke er disse:
+            <ul>
+                <li>
+                    Koderedigeringsprogrammet <a href="https://code.visualstudio.com/">Visual Studio Code</a>
+                    <br>
+                    Vi skal bruke noen <i>extensions</i>:
+                    <ul>
+                        <li>JavaScript-booster</li>
+                        <li>es6-string-html</li>
+                        <li>live-server</li>
+                        <li>live-share</li>
+                    </ul>
+                </li>
+                <li>Nettleseren <a href="https://www.google.com/intl/no/chrome/">Chrome</a></li>
+            </ul>
+        </div>
     </div>
-    <div>
-        HTML
+    <div id="cards">
+        <div class="card">
+            <div class="header blue">
+                HTML
+            </div>
+        </div>
     </div>
-    <div>
-        <div>
+    <div class="card">
+        <div class="innerCard">
             Vi bruker HTML til å definere et dokument.
             <ul>
                 <li>Tagger for grunnleggende oppsett av en HTML-fil</li>
@@ -55,11 +65,15 @@
             </ul>
         </div>
     </div>
-    <div>
-        CSS
+    <div id="cards">
+        <div class="card">
+            <div class="header red">
+                CSS
+            </div>
+        </div>
     </div>
-    <div>
-        <div>
+    <div class="card">
+        <div class="innerCard">
             Vi bruker CSS til å <i>style</i> et dokument, altså farger, fonter, utseende og lignende.
             <ul>
                 <li><tt>background-color</tt></li>
@@ -78,46 +92,50 @@
             </ul>
         </div>
     </div>
-    <div>
-        <div>
-            JavaScript
+    <div id="cards">
+        <div class="card">
+            <div class="header yellow">
+                JavaScript
+            </div>
         </div>
-        <div>
-    <div>
-        Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
-        ved
-        å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.
-        <ul>
-            <li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på
-                Moodle.</li>
-            <li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript
-                    Reference</a></li>
-        
-        </ul>
-    </div>
-    </div>
-    </div>
-    <div>
-        <div>
-            Hode, kropp og ben
+        <div class="card">
+            <div class="innerCard">
+                Det viktigste vi skal lære er programmeringsspråket JavaScript. Vi skal lære grunnleggende programmering
+                ved
+                å manipulere HTML- og CSS-kode på en nettside ved hjelp av JavaScript.
+                <ul>
+                    <li>Det finnes en W3Schools JavaScript Tutorial, men her anbefaler vi heller å følge kurset vårt på
+                        Moodle.</li>
+                    <li><a href="https://www.w3schools.com/jsref/default.asp" target="_new">W3Schools JavaScript
+                            Reference</a></li>
+
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div id="cards">
+        <div class="card">
+            <div class="header dark">
+                Hode, kropp og ben
+            </div>
+        </div>
+        <div class="card">
+            <div id="head" class="bodyPart">
+                <button onclick="selectHead4()">◀</button>
+                <img src="img/head1.png">
+                <button onclick="selectHead2()">▶</button>
+            </div>
+            <div id="body" class="bodyPart">
+                <button onclick="selectBody4()">◀</button>
+                <img src="img/body1.png">
+                <button onclick="selectBody2()">▶</button>
+            </div>
+            <div id="legs" class="bodyPart">
+                <button onclick="selectLegs4()">◀</button>
+                <img src="img/legs1.png">
+                <button onclick="selectLegs2()">▶</button>
+            </div>
         </div>
-        <div>    
-    <div id="head" class="bodyPart">
-    <button onclick="selectHead4()">◀</button>
-    <img src="img/head1.png">
-    <button onclick="selectHead2()">▶</button>
-</div>
-    <div id="body" class="bodyPart">
-    <button onclick="selectBody4()">◀</button>
-    <img src="img/body1.png">
-    <button onclick="selectBody2()">▶</button>
-</div>
-    <div id="legs" class="bodyPart">
-    <button onclick="selectLegs4()">◀</button>
-    <img src="img/legs1.png">
-    <button onclick="selectLegs2()">▶</button>
-</div>
-</div>
     </div>
 </body>
 
diff --git a/intro html/style.css b/intro html/style.css
new file mode 100644
index 0000000..2b913e3
--- /dev/null
+++ b/intro html/style.css	
@@ -0,0 +1,44 @@
+body {
+    margin-left: 20px;
+}
+
+.card {
+    width: 500px;
+    background-color: lightgray;
+    border: solid 1px darkgray;
+    margin-inline-end: 10px;
+}
+
+.innerCard {
+    padding: 10px;
+}
+
+.header {
+    color: white;
+    text-align: center;
+    font-size: x-large;
+    padding: 1% 0;
+    border: 1px solid grey;
+    user-select: none;
+}
+
+.green {
+    background-color: #3cba54;
+}
+
+.yellow {
+    background-color: #f4c20d;
+    ;
+}
+
+.red {
+    background-color: red;
+}
+
+.blue {
+    background-color: blue;
+}
+
+.dark {
+    background-color: #36393f;
+}
\ No newline at end of file
