87 lines
2.3 KiB
HTML
87 lines
2.3 KiB
HTML
<!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> |