63 lines
1.8 KiB
HTML
63 lines
1.8 KiB
HTML
<!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;
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
div {
|
|
flex-grow: 1;
|
|
background-color: lightblue;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main">
|
|
<div>
|
|
<h1>Hallo</h1>
|
|
</div>
|
|
<div>
|
|
<h2>Verden!</h2>
|
|
</div>
|
|
<div>Aaaaa aaaa<br>
|
|
aaaa aaaa
|
|
</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.
|
|
Sunt dolore mollit <br> ex laboris veniam eu incididunt culpa.</p>
|
|
</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>
|
|
<script>
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |