gemini://unbon.cafe/villapirorum/charlotte/

<!DOCTYPE html><html class="no-js" lang="fr">

<head>

<title>Le cahier de Cha'</title>

<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>

</head>

<body>

<main>

<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>

<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>

</article>

<header><h1>Vacances de Pâques</h1><p>On s'occupe pendant le confinement !</p></header>

<p>Voici le programme de nos vacances</p>

<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>

<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>

<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>

<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>

<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>

<h2>Lundi 13</h2>

<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>

<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>

<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>

<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>

<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>

<h2>Samedi 17</h2>

<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>

</article>

<header><h1>On fait des cookies</h1><p></p></header>

<p>Salut !</p>

<p>Aujourd'hui on a préparé des cookies...</p>

<p>Ils sont trop bons, super croquant et super moelleux !!!</p>

<p>Allez voir la <a href="../recipes#cookies">recette</a></p>

</section>

</article>

<header><h1>Gouter crêpes</h1><p>Voici notre recette</p></header>

<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>

</article>

<header><h1>Déco d'halloween</h1><p>Terrible</p></header>

<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>

</article>

<header><h1>Une nouvelle copine</h1><p>Trop mignon</p></header>

<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>

</article>

<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>

</article>

</main>

/* 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>

</body>