grid og flex css
This commit is contained in:
parent
b920162f3e
commit
c7a62b1f8b
62
CSS/flex/index.html
Normal file
62
CSS/flex/index.html
Normal 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
37
prosjekt/index.html
Normal 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
11
prosjekt/plan.txt
Normal 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
|
Loading…
Reference in a new issue