Abîme & Temps

Atelier code & écriture

Baleine Paysage

Journal d'impressions, émerveillement quotidien renouvelé, Maryse Hache invente des sons, des bruits, n'a pas le temps d'écrire l'article que déjà ...

Extraits

baleine paysage 47
bientôt le jardin de l'aube / bientôt la dernière aube pour lui dans l'autrefois rabattu au présent de l'ici par poudroiement souvenir / 14 février 2012 / un avion gronde qu'il est trop tôt qu'il est tout seul qu'il nous attende 14 février / un oiseau chante dernières minutes deux il était 7h30 ce 14 février-là / absence de chat roux le sien était gris gouttière l'avait nommé kinzou / un autre avion dans le ciel qui bleuise / qui a mis ses yeux dans le bleu des siens 14 février / on entend un tout petit sanglot dans le manteau de la cheminée / une mésange tente un rappel de pioupiou puis une autre mais rien 14 février / trop tard trop froid / mais la route obstinée de l'aube au jardin / personne encore dans l'escalier / un petit vent par la fenêtre en refus de calfeutrage / la vie infuse imperturbable / rouge-gorge à l'approche dans une gaieté sonore / une baleine échouée dans l'éternité mimosa

... plus sur son site, rubrique Baleine paysage.
Le livre chez Publie.net.

Consignes d'écriture

Dans le même style d'impressions du matin, pas le temps d'écrire que déjà, supprimant certains articles mais pas tous, trouvant des motifs récurrents au cours de plusieurs dates fictives d'un journal de l'émerveillement, vous écrirez à la manière de Maryse Hache, d'une chambre avec vue sur jardin. Trouvez vos propres motifs pour remplacer ceux de l'autrice : tilleul, chat roux, avion vroum, etc. Et en inventant des mots pour les bruits, les sons, ou les plantes, comme elle le fait pour les cris d'oiseaux dans les extraits lus ensemble.

Consignes de code

Pour le code nous utiliserons le positionnement "absolu" d'éléments div HTML.
Ci-dessous le code de la page suivante.

atelier_04.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
    <title>Abîme & Temps. Atelier Baleine Paysage</title>
    <meta name="description" content="D'après Maryse Hache"/>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css"/>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/open-baskerville" type="text/css"/>
    <link rel="stylesheet" href="styles/styles.css" type="text/css">
</head>
<body>
<div class="page baleine">
    <div class="texte entree entree01">
        <p>
            le front clair du soleil se hisse ∩ passage de MONA 7:28 ∩
            reflet cape du jour sur saule épuisé ∩ broudronnement déjà des bourdons
            sur trèfles déjà sec déjà ∩ clachoutis cafetière italienne en bas
            lundi 16 avril 2018 semaine 16 ∩ tremblement claquant de MONA 7:38 ∩
            réveille l'ours au bord du lavabo zut
        </p>
    </div>
    <div class="texte entree entree02">
        <p>
             NEMO passe avant MONA 7:02 après réveil trulidingdingue ∩
            cape du jour grise paranuage à prévoir front clair pas clair ce matin 17 avril ∩
        </p>
    </div>
    <div class="image image01">
    <img src="images/p6230173.jpg" width="400"
        class="transparence" >
    </div>
    <div class="texte entree entree03">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum dolor sed erat facilisis, vitae gravida nunc pellentesque. Morbi pulvinar ante quis enim faucibus porta. Ut pellentesque, eros ut elementum posuere, justo eros gravida eros, sed suscipit quam metus in purus. Donec mollis urna libero, ut ultricies tortor volutpat sed. Integer sit amet ultricies nibh. Fusce eget placerat lorem, et tristique mauris. Aliquam mollis libero id enim ullamcorper finibus. Fusce dapibus pellentesque vulputate. Donec sit amet volutpat massa. In volutpat, elit non blandit sagittis, dui nisl vehicula purus, a pulvinar enim metus vel orci.
    </div>
</div>
</body>
</html>

styles.css

h1 {
    color: black;
}
.photo {
    width: auto;
    height: 500px;
    float: left;
    margin-right: 15px;
}
.photo_a_droite {
    margin-left: 15px;
    float:right;
}
.grande_photo{
    width: 600px;
    margin: auto;
}

body {
    color: #990000;
    font-family: Arial;
    background-color: #FCFBFA;
    background-image: url(../images/fond.jpg);
    background-size: cover;
}
.page {
    width: 85%;
    margin: auto;
overflow: auto;
    background-color: #509;
}
.baleine {
    width: 3000px;
    height: 700px;
    background-color: #09BFF0;
}
.texte {
    width: 400px;
    height: 250px;
    float: left;
}
.entree {
    border : 1px solid black;
    padding: 10px;
    font-family: Courier New, Courier;
    background-color: #CCF0F6;
}
.entree01 {
    position: absolute;
    left: 150px;
    top: 20px;
    width: 500px;
    height: 180px;
}
.entree02 {
    position: absolute;
    left: 650px;
    top: 250px;
    z-index: 2;
    width: 250px;
    height: 380px;
    transform: rotate(4deg);
}
.image {}
.image01{
    position: absolute;
    left: 550px;
    top: 150px;
    z-index: 1;
    transform: rotate(-4.5deg);
}
.entree03 {
    position: absolute;
left: 250px;
top: 187px;
    width: 250px;
    height: 300px;
    z-index:4;
    overflow: scroll;
    transform: rotate(-2deg);
}
.transparence {opacity: 0.5;}

.entete {
    height: 120px;
    padding: 20px;
    background-color: #FFFFFF85;
    color: #234912;
}
.contenu {
    padding: 10px;
    background-color: #FEFEFA;
    color: #222;
    overflow:auto;
    padding-bottom: 100px;
    box-shadow: 2px 2px 5px #ACACAA;
}
.citation {
    font-style: italic;
    padding-left: 50px;
}