<!DOCTYPE html>
<html lang="en">
<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>
<button onclick="noLayout()">Ingen Layout</button>
<button onclick="vertLayout()">Vertikal layout</button>
<button onclick="horLayout()">Horisontal layout</button>
<button onclick="gridLayout()">Grid layout</button>
<h1>Eksempel 1</h1>
<div id="cards">
<div class="card">
<div class="header green" onclick="green()">
Verktøy
</div>
<div class="innerCard" id="green"></div>
</div>
</div>
<div class="card">
<div class="innerCard" id="green">
</div>
</div>
<div id="cards">
<div class="card">
<div class="header blue" onclick="blue()">
HTML
</div>
</div>
</div>
<div class="card">
<div class="innerCard" id="blue">
</div>
</div>
<div id="cards">
<div class="card">
<div class="header red" onclick="red()">
CSS
</div>
</div>
</div>
<div class="card">
<div class="innerCard" id="red">
</div>
</div>
<div id="cards">
<div class="card">
<div class="header yellow" onclick="yellow()">
JavaScript
</div>
</div>
<div class="card">
<div class="innerCard" id="yellow">
</ul>
</div>
</div>
</div>
<div id="cards">
<div class="card">
<div class="header dark" onclick="dark()">
Hode, kropp og ben
</div>
</div>
<div class="card">
<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>
</html>