startit/intro_html/index.html

87 lines
2.3 KiB
HTML
Raw Permalink Normal View History

2024-08-08 09:04:57 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=x, initial-scale=1.0">
2024-08-08 14:22:09 +02:00
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
2024-08-08 09:04:57 +02:00
</head>
<body>
2024-08-16 14:01:43 +02:00
<button onclick="noLayout()">Ingen Layout</button>
<button onclick="vertLayout()">Vertikal layout</button>
<button onclick="horLayout()">Horisontal layout</button>
<button onclick="gridLayout()">Grid layout</button>
2024-08-08 09:04:57 +02:00
<h1>Eksempel 1</h1>
2024-08-08 14:22:09 +02:00
<div id="cards">
<div class="card">
2024-08-14 14:52:08 +02:00
<div class="header green" onclick="green()">
2024-08-08 14:22:09 +02:00
Verktøy
</div>
2024-08-16 14:01:43 +02:00
<div class="innerCard" id="green"></div>
2024-08-08 14:22:09 +02:00
</div>
2024-08-08 09:04:57 +02:00
</div>
2024-08-08 14:22:09 +02:00
<div class="card">
2024-08-16 14:01:43 +02:00
<div class="innerCard" id="green">
2024-08-08 14:22:09 +02:00
</div>
2024-08-08 09:04:57 +02:00
</div>
2024-08-08 14:22:09 +02:00
<div id="cards">
<div class="card">
2024-08-14 14:52:08 +02:00
<div class="header blue" onclick="blue()">
2024-08-08 14:22:09 +02:00
HTML
</div>
</div>
2024-08-08 09:04:57 +02:00
</div>
2024-08-08 14:22:09 +02:00
<div class="card">
2024-08-16 14:01:43 +02:00
<div class="innerCard" id="blue">
2024-08-08 09:04:57 +02:00
</div>
</div>
2024-08-08 14:22:09 +02:00
<div id="cards">
<div class="card">
2024-08-16 14:01:43 +02:00
<div class="header red" onclick="red()">
2024-08-08 14:22:09 +02:00
CSS
</div>
</div>
2024-08-08 09:04:57 +02:00
</div>
2024-08-08 14:22:09 +02:00
<div class="card">
2024-08-16 14:01:43 +02:00
<div class="innerCard" id="red">
2024-08-08 09:04:57 +02:00
</div>
</div>
2024-08-08 14:22:09 +02:00
<div id="cards">
<div class="card">
2024-08-16 14:01:43 +02:00
<div class="header yellow" onclick="yellow()">
2024-08-08 14:22:09 +02:00
JavaScript
</div>
</div>
<div class="card">
2024-08-16 14:01:43 +02:00
<div class="innerCard" id="yellow">
2024-08-08 14:22:09 +02:00
</ul>
</div>
2024-08-08 09:04:57 +02:00
</div>
</div>
2024-08-08 14:22:09 +02:00
<div id="cards">
<div class="card">
2024-08-16 14:01:43 +02:00
<div class="header dark" onclick="dark()">
2024-08-08 14:22:09 +02:00
Hode, kropp og ben
</div>
</div>
<div class="card">
2024-08-19 14:41:28 +02:00
2024-08-08 14:22:09 +02:00
<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>
2024-08-08 09:04:57 +02:00
</div>
</div>
</body>
</html>