grid og flex css

This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-13 14:51:41 +02:00
parent b920162f3e
commit c7a62b1f8b
3 changed files with 110 additions and 0 deletions

62
CSS/flex/index.html Normal file
View file

@ -0,0 +1,62 @@
<!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: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
div {
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
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 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>

37
prosjekt/index.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super cool project for homelabers</title>
<style>
div.main {
display: grid;
grid-template-columns:
"sidebar topbar topbar"
"sidebar main"
"sidebar footer footer";
}
.item-a {
grid-area: sidebar;
}
.item-b {
grid-area: topbar;
}
.item-c{
grid-area: main;
}
.item-d{
grid-area: footer;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>

11
prosjekt/plan.txt Normal file
View file

@ -0,0 +1,11 @@
Datasenter kluster platform/frontend for hjemme lab
nøkkeltek:
* guix/nix
* k8s
* incus
* libvirt
agent - clustering - go
frontend/web og cli -
middleware - bash nix guile