startit/CSS/flex/index.html

68 lines
2 KiB
HTML
Raw Permalink Normal View History

2024-08-13 14:51:41 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test av flex css og js</title>
<style>
div.main {
background-color: transparent;
border-bottom: none;
2024-08-14 09:44:23 +02:00
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
2024-08-13 14:51:41 +02:00
align-items: center;
}
div {
2024-08-14 09:44:23 +02:00
flex-grow: 1;
2024-08-13 14:51:41 +02:00
background-color: lightblue;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div>
<h1>Hallo</h1>
</div>
<div>
<h2>Verden!</h2>
</div>
2024-08-14 09:44:23 +02:00
<div>Aaaaa aaaa<br>
2024-08-14 14:52:08 +02:00
aaaa aaaa
2024-08-13 14:51:41 +02:00
</div>
<div>Bbbbb bbbb bbbb bbbb</div>
<div>Aaaaa aaaa aaaa aaaa</div>
<div>Bbbbb bbbb bbbb bbbb</div>
<div>
<p>Sint exercitation est duis proident velit duis cupidatat ex aliqua eu.
Mollit tempor velit est occaecat laboris mollit dolore laborum id.
2024-08-14 09:44:23 +02:00
Sunt dolore mollit <br> ex laboris veniam eu incididunt culpa.</p>
2024-08-13 14:51:41 +02:00
</div>
<div>
Duis sit voluptate id proident exercitation.
Incididunt qui aute amet et do tempor dolor magna fugiat laboris.
Fugiat ex labore commodo qui cillum culpa anim incididunt sint deserunt occaecat elit voluptate nulla.
Lorem velit anim proident nulla exercitation fugiat mollit ea adipisicing voluptate amet labore. Ex ea id
nisi
duis Lorem.
Proident et mollit labore proident quis deserunt id elit ut excepteur.
</div>
<div>Aaaaa aaaa aaaa aaaa</div>
<div>Bbbbb bbbb bbbb bbbb</div>
</div>
2024-08-14 14:52:08 +02:00
<script src="https://unpkg.com/htmx.org@2.0.2"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me
</button>
2024-08-13 14:51:41 +02:00
<script>
</script>
</body>
</html>