This page permanently redirects to gemini://unbon.cafe/villapirorum/charlotte/.
<title>Le cahier de Cha'</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1" />
<meta charset="utf-8" />
<meta http-equiv="content-language" content="fr" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Baloo+Bhaina+2|Amatic+SC|Oxygen+Mono|Ubuntu&ver=4.9.4">
<style>
:root
{
/* Les deux couleurs du site web */
--couleur-principale-r: 0;
--couleur-principale-g: 174;
--couleur-principale-b: 169;
--couleur-secondaire-r: 211;;
--couleur-secondaire-g: 174;
--couleur-secondaire-b: 0;
/* Le site web */
--couleur-d-arriere-plan: #bababa;
--couleur-principale: rgb(var(--couleur-principale-r), var(--couleur-principale-g), var(--couleur-principale-b));
--couleur-secondaire: rgb(var(--couleur-secondaire-r), var(--couleur-secondaire-g), var(--couleur-secondaire-b));
--couleur-de-fond: rgba(var(--couleur-principale-r), var(--couleur-principale-g), var(--couleur-principale-b), 0.3);
--couleur-du-texte-apres-le-blog: white;
--couleur-des-liens: var(--couleur-principale);
--couleur-des-liens-survoles: var(--couleur-secondaire);
--couleur-des-legendes-des-images: white;
--couleur-des-hashtags: var(--couleur-principale);
--couleur-des-textes: #444444;
/* La page centrale */
--couleur-du-fond-de-la-page: white;
--couleur-du-titre-du-blog: var(--couleur-principale);
--couleur-du-sous-titre-du-blog: gray;
/* Les articles */
--couleur-de-l-entete-des-articles: gray;
--couleur-de-bordure-des-entetes-des-articles: rgba(var(--couleur-principale-r), var(--couleur-principale-g), var(--couleur-principale-b), 0.2);
--couleur-des-titres-des-articles: var(--couleur-secondaire);
--couleur-de-bordure-des-articles: var(--couleur-principale);
--couleur-des-dates-des-articles: var(--couleur-principale);
--couleur-des-titres-de-jours: var(--couleur-principale);
/* La pastille */
--couleur-du-texte-de-la-pastille: white;
--couleur-de-fond-de-la-pastille: var(--couleur-secondaire);
}
/* Box model */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
/* Tout */
html
{
background-color: var(--couleur-d-arriere-plan);
margin: 0px;
padding: 0px;
}
body
{
background-color: var(--couleur-de-fond);
margin: 0px;
padding: 20px;
font-family: Roboto;
font-size: 1em;
text-align: center;
color: var(--couleur-des-textes);
height: auto;
min-height: 100vh;
}
@media print
{
body
{
background-color: white;
padding: 1.5cm;
}
}
body>footer { color: var(--couleur-du-texte-apres-le-blog); padding: 20px }
/* Liens */
a, a:visited { color: var(--couleur-des-liens); }
a:hover { color: var(--couleur-des-liens-survoles); }
/* Page */
main
{
text-align: left;
background-color: var(--couleur-du-fond-de-la-page);
width: 80%;
max-width: 800px;
padding: 20px;
margin: 0px auto 0px auto;
border-radius: 10px;
box-shadow: 4px 4px 10px 0px rgba(60, 80, 80, 1);
}
@media print
{
main
{
width: 100%;
max-width: 100%;
padding: 0px;
margin: 0px;
border-radius: initial;
box-shadow: none;
}
}
main>header
{
text-align: right;
color: var(--couleur-du-sous-titre-du-blog);
margin: 0;
padding: 0.5em 0 3.0em 0;
}
main>header h1
{
font-size: 4em;
font-family: 'Amatic SC', cursive;;
color: var(--couleur-du-titre-du-blog);
margin: 0;
}
main header a
{
text-decoration: none;
}
.hashtag { color: var(--couleur-des-hashtags); }
/* Images */
figure { height: 300px; padding: 0px; margin: 0; padding: 0; width: 100%; max-width: 100%; position: relative; overflow: hidden; }
img { display: inline-block; width: 100%; margin: 10px 0px 10px 0px; max-width: 100%; max-height: 300px; object-fit: cover;}
figure img { height: 100%; margin: 0px; object-fit: cover; }
figure img.lazy { object-fit: none; }
figure.random img { filter: opacity(0.4) grayscale(0.9); }
figcaption { color: var(--couleur-des-legendes-des-images); font-size: 1.0em; padding: 5px; position: absolute; bottom: 0px; width: 100%; background-image: linear-gradient(to top right, rgba(80,80,80,0.5), rgba(0,0,0,0)); }
figcaption:before { content: "☆"; }
figcaption:after { content: "☆"; }
figure.shorten { height: 200px; }
figure.shorten img { height: 100%; }
/* Articles */
article
{
border-color: 1px solid var(--couleur-de-bordure-des-articles);
border-radius: 12px;
margin-top: 20px;
padding: 10px 10px 10px 10px;
}
article header
{
color: var(--couleur-de-l-entete-des-articles);
border-bottom: 12px dotted var(--couleur-de-bordure-des-entetes-des-articles)
}
article h1
{
font-family: 'Amatic SC', cursive;
font-size: 2.4em;
text-transform: uppercase;
color: var(--couleur-des-titres-des-articles);
margin: 0.5em 0 0.3em 0;
}
article h2
{
font-family: 'Baloo Bhaina 2', cursive;
font-size: 1.3em;
color: var(--couleur-des-titres-de-jours);
}
.jour
{
border-top: 2px dashed #DDDDDD;
padding: 10px;
}
article footer { color: var(--couleur-des-dates-des-articles); text-align: right }
.jours { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.images { display: grid; grid-gap: 10px; grid-template-columns: 50% 50%; }
@media screen and (max-width: 524px) { .jours { display: block } body { padding: 5px; } main { width: calc(100vw - 60px); padding: 5px } }
/* ASIDE */
aside
{
display: inline-block;
text-align: center;
position: fixed;
right: 40px;
bottom: 40px;
margin-top: 2em;
background-color: var(--couleur-de-fond-de-la-pastille);
color: var(--couleur-du-texte-de-la-pastille);
width: 150px;
height: 150px;
border-radius: 150px;
line-height: 150px;
box-shadow: 4px 4px 10px 0px rgba(60, 80, 80, 1);
}
@media screen and (max-width: 1024px) { aside { position: initial; } }
@media print
{
aside
{
position: relative;
right: 0px;
bottom: 0px;
}
}
</style>
<main>
<header>
<a href="."><h1>Le cahier de Cha'</h1> </a>
<div class="sous-titre">Mon premier journal. Fait main entre 2018 et 2020 ! <span class="hashtag">#DIY #COVID</span></div>
</header>
<article>
<header><h1>Week-End du 1er Mai</h1><p></p></header>
<section>
<p>Salut !</p>
<p>Aujourd'hui on fabrique des masques...</p>
<figure><img src="couture2020.jpg"/><figcaption>Maison</figcaption></figure>
<p>On peut changer de couleur en le retournant !!!</p>
</section>
<footer>03/05/2020</footer>
</article>
<article>
<header><h1>Vacances de Pâques</h1><p>On s'occupe pendant le confinement !</p></header>
<section>
<p>Voici le programme de nos vacances</p>
<section class="jours">
<section class="jour">
<h2>Mercredi 08</h2>
<figure class="random"><img class="lazy" src="loading.svg" data-src="https://source.unsplash.com/400x300/?Kitty"/><figcaption>Kitty</figcaption></figure> <ul>
<li>On fait de la mousse au chocolat</li>
<li>Le soir on mange patates cancoillotte</li>
</ul>
</section>
<section class="jour">
<h2>Jeudi 09</h2>
<figure><img src="chocolatliegois.jpg"/><figcaption>Chocolat Liégois</figcaption>></figure>
<ul>
<li>On boit du chocolat Liégois</li>
<li>L'après midi c'est devoirs</li>
</ul>
</section>
<section class="jour">
<h2>Vendredi 10</h2>
<figure class="random"><img class="lazy" src="loading.svg" data-src="https://source.unsplash.com/400x300/?Kitty"/><figcaption>Kitty</figcaption></figure> <ul>
<li>Je prépare une quiche aux lardons</li>
<li>Le soir on mange quiche maison </li>
</ul>
</section>
<section class="jour">
<h2>Samedi 11</h2>
<figure class="random"><img class="lazy" src="loading.svg" data-src="https://source.unsplash.com/400x300/?Kitty"/><figcaption>Kitty</figcaption></figure> <ul>
<li>On nettoie l'aquarium du poisson</li>
<li>On mange croque-monsieur</li>
</ul>
</section>
<section class="jour">
<h2>Dimanche 12</h2>
<figure><img src="cookies2020.jpg"/><figcaption>Cookies</figcaption></figure>
<p>Aujourd’hui c'est Pâques</p>
<ul>
<li>Le matin c'est chasse aux oeufs</li>
<li>On prépare des cookies</li>
<li>Le midi on fait un brunch</li>
</ul>
</section>
<section class="jour">
<h2>Lundi 13</h2>
<section class="images">
<figure><img src="guacamole.jpg"/><figcaption>Guacamole</figcaption>></figure>
<figure><img src="origamis.jpg"/><figcaption>Origamis</figcaption>></figure>
</section>
<ul>
<li>Je prépare du guacamole</li>
<li>On mange tacos</li>
<li>On bricole des origamis</li>
</ul>
</section>
<section class="jour">
<h2>Mardi 14</h2>
<figure class="random"><img class="lazy" src="loading.svg" data-src="https://source.unsplash.com/400x300/?Kitty"/><figcaption>Kitty</figcaption></figure> <ul>
<li>Je réactualise mon blog</li>
<li>Ce midi on mange spaghettis bolognaise</li>
</ul>
</section>
<section class="jour">
<h2>Mercredi 15</h2>
<figure><img src="crepes.jpg"/><figcaption>Crêpes</figcaption>></figure>
<ul>
<li>On fait des crêpes </li>
<li>Au goûter c'est crêpes maison </li>
<li>Ce soir on mange apéros dinatoire</li>
</ul>
</section>
<section class="jour">
<h2>Jeudi 15</h2>
<figure class="random"><img class="lazy" src="loading.svg" data-src="https://source.unsplash.com/400x300/?Kitty"/><figcaption>Kitty</figcaption></figure> <ul>
<li>Ce soir c'est crevette au curry</li>
<li>On termine les devoirs</li>
</ul>
</section>
<section class="jour">
<h2>Vendredi 16</h2>
<figure><img src="theatrevisio.jpg"/><figcaption>Théatre en Visio-Conférence !</figcaption>></figure>
<ul>
<li>On prépare un crumble</li>
<li>On fait du theatre en visio avec notre groupe</li>
</ul>
</section>
<section class="jour">
<h2>Samedi 17</h2>
<section class="images">
<figure><img src="gaufres.jpg"/><figcaption>Gaufres</figcaption>></figure>
<figure><img src="gaufresprepa.jpg"/><figcaption>Gaufres</figcaption>></figure>
</section>
<ul>
<li>On mange des (vraies) pâtes Carbonara</li>
<li>On fait des gaufres maison</li>
</ul>
</section>
</section>
</section>
<footer>14/04/2020</footer>
</article>
<article>
<header><h1>On fait des cookies</h1><p></p></header>
<section>
<p>Salut !</p>
<p>Aujourd'hui on a préparé des cookies...</p>
<figure><img src="cookies2019.jpg"/><figcaption>Miam</figcaption></figure>
<p>Ils sont trop bons, super croquant et super moelleux !!!</p>
<p>Allez voir la <a href="../recipes#cookies">recette</a></p>
</section>
<footer>31/10/2018</footer>
</article>
<article>
<header><h1>Gouter crêpes</h1><p>Voici notre recette</p></header>
<section>
<p>Salut !</p>
<p>
Aujourd’hui, avec mon père et ma soeure nous avons fait des crêpes. Pour ça il faut:
<ul>
<li>300g de farine
<li>4 gros oeufs (ou 5 petits)
<li>1 ou 2 grand(s) verre(s) de lait
<li>1 ou 2 grand(s) verre(s) de bière ou d'eau
<li>1 pincée de sel
</ul>
</p>
</section>
<footer>31/10/2018</footer>
</article>
<article>
<header><h1>Déco d'halloween</h1><p>Terrible</p></header>
<section>
<p>Salut !</p>
<p>Avec mon père et ma ma soeur Manon, on fait les deco pour halloween</p>
<p>Guirlande de citrouilles, envolée de chauve-souris, bougie, toiles d'araignée, petits diablotins et potiron creusé...</p>
</section>
<footer>31/10/2018</footer>
</article>
<article>
<header><h1>Une nouvelle copine</h1><p>Trop mignon</p></header>
<section>
<p>Salut !</p>
<p>Me voila avec une nouvelle copine: Aïli notre chatte</p>
<p>
Elle est très mignonne et encore un peu timide.<br>
Elle aime bien se reposer dans sa niche et manger toujours ses mêmes croquettes.…Elle adore aussi jouer avec sa balle.
</p>
</section>
<footer>31/10/2018</footer>
</article>
<article>
<header><h1>Je crée mon blog</h1></header>
<section>
<p>Salut !</p>
<p>Tout a commençé quand ma soeur a fait de la programation avec mon père et pour lui apprendre elle a crée un blog alors ça m'a donné l'envie d'en faire un à mon tour. </p>
</section>
<footer>31/10/2018</footer>
</article>
</main>
<aside>by Cha' @ 11 ans</aside>
<footer>© Cha' 2017-2024</footer>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
/* IMAGES LOADING */
$("img").on("error", function() { $(this).attr("src", "img/blank.gif"); });
var images_error_handler = function() { this.style.display = "none"; };
function onScrollLazyImages()
{
$("img").on("error", function() { $(this).addClass("failed"); $(this).attr("src", "blank.gif"); });
$("img.lazy[data-src]").each(function(i, img)
{
var rect = img.getBoundingClientRect();
if (rect.bottom >= 0 && rect.right >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight))
{
$(img).attr("src", $(img).attr("data-src"));
$(img).removeAttr("data-src");
$(img).on("load", function() { $(img).removeClass("lazy"); $(img).removeClass("loading"); $(img).addClass("loaded"); });
}
else
{
}
});
}
function onLoadLazyImages()
{
setTimeout(function() { setInterval(onScrollLazyImages, 500); }, 50);
onScrollLazyImages();
}
onLoadLazyImages();
</script>
text/gemini; This content has been proxied by September (ba2dc).