page-perso-chokbar/index.html
2025-11-29 14:14:03 +01:00

137 lines
5.3 KiB
HTML

<!DOCTYPE html>
<html lang="fr" dir="auto">
<head>
<meta name="generator" content="my 10 little fingers">
<meta charset="utf-8">
<title>Gribse - chokbar.bzh</title>
<!-- <link rel="stylesheet" href=""> -->
</head>
<header>
<style>
@font-face{
font-family:tt2020;
src:url(TT2020Base-Regular.woff2)format('woff2');
}
html {
background-color: rgb(255, 255, 246);
font-family: tt2020, 'Courier New', Courier, monospace;
font-size: 1.2em;
font-weight: 500;
}
body > div {
position: absolute;
background-image: url(papier.jpg);
background-repeat: repeat;
width: 800px;
height: 1150px;
left: 0;
right: 0;
margin-inline: auto;
margin-top: 50px;
box-shadow: 5px 5px 30px #302e2a, inset 5px 5px 30px #d5d5d5;
rotate: calc(sin(var(--i) * 1.61) * 1.5deg)
}
.page-content {
padding: 100px;
}
.tape-tab {
position: absolute;
height: 80px;
width: 150px;
background-color: red;
margin-top: calc(50px + (var(--i) - 1) * 100px);
margin-left: -100px;
rotate: calc(sin(var(--i) * 1.61) * 1.5deg)
}
</style>
</header>
<body>
<div style="--i:1">
<div class="tape-tab">
<span>Accueil</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<p>Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de <a href="https://chokbar.bzh/">chokbar.bzh</a></p>
<p>Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à <a href="https://www.achilletoupin.com/">mon (super) blog</a>.</p>
<span>Page mise à jour le 2025-11-23</span>
</div>
</div>
<div style="--i:2">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<p>Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de <a href="https://chokbar.bzh/">chokbar.bzh</a></p>
<p>Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à <a href="https://www.achilletoupin.com/">mon (super) blog</a>.</p>
<span>Page mise à jour le 2025-11-23</span>
</div>
</div>
<div style="--i:3">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<p>Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de <a href="https://chokbar.bzh/">chokbar.bzh</a></p>
<p>Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à <a href="https://www.achilletoupin.com/">mon (super) blog</a>.</p>
<span>Page mise à jour le 2025-11-23</span>
</div>
</div>
<div style="--i:4">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<p>Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de <a href="https://chokbar.bzh/">chokbar.bzh</a></p>
<p>Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à <a href="https://www.achilletoupin.com/">mon (super) blog</a>.</p>
<span>Page mise à jour le 2025-11-23</span>
</div>
</div>
<div style="--i:5">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<p>Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de <a href="https://chokbar.bzh/">chokbar.bzh</a></p>
<p>Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à <a href="https://www.achilletoupin.com/">mon (super) blog</a>.</p>
<span>Page mise à jour le 2025-11-23</span>
</div>
</div>
<div style="--i:6">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<p>Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de <a href="https://chokbar.bzh/">chokbar.bzh</a></p>
<p>Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à <a href="https://www.achilletoupin.com/">mon (super) blog</a>.</p>
<span>Page mise à jour le 2025-11-23</span>
</div>
</div>
<div style="--i:7">
<div class="tape-tab">
<span>page2</span>
</div>
<div class="page-content">
<h1>Heyyyy !</h1>
<p>Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de <a href="https://chokbar.bzh/">chokbar.bzh</a></p>
<p>Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à <a href="https://www.achilletoupin.com/">mon (super) blog</a>.</p>
<span>Page mise à jour le 2025-11-23</span>
</div>
</div>
</body>
</html>