Structure 1 - montages par codes HTML/CSS

Ma page texte et images reprend le principe d'une structure, avec des blocs, contenant des images, d'autres avec des textes, d'autres avec des boutons; on pourrait afficher des vidéos ou d'autres montages.

Je voudrais parler du cadre de fond, sur lequel nous pourrons ensuite placer les éléments que nos aurons choisis.

Ainsi, par exemple, le survol d'un bouton peut afficher un texte et un clic dessus peut afficher une image, au dessus de cadre placés en fond.

Tans que nous y sommes, nous allons construire ça en mesures adaptative pour que se soit adapté aux différents écrans.

Vignettes images.

<div style="width: 20vw; height: 80vh; float: left; margin: 0vh 0vw; border: 0.3vw double black;">Vignettes images.</div>

Textes

<div style="width: 40vw; height: 80vh; float: left; margin: 0vh 1vw; border: 0.3vw double black;">Textes<br></div>

Boutons

<div style="width: 20vw; height: 80vh; float: left; margin: 0vh 0vw; border: 0.3vw double black;">Boutons<br><br>...</div>

Plaçons un bouton ici, qui fera apparaître un texte au survol, texte que nous allons placer au dessus du bloc central et, au clic, il agrandira une vignette du bloc de gauche.

Albert et Julie viennent de se marier.

Ils arrivent enfin à l’hôtel après une longue journée de célébrations.
Ils passent une nuit torride !
Julie était encore vierge mais elle a vite compris !.
Une nuit d'extase !!!
Lorsqu'elle ouvre les yeux, Albert est sous la douche.
Il chante comme un grand ténor.
En sortant de la douche, il constate qu'il n'a pas de serviette.
Il va dans la chambre. Julie est assise sur le bord du lit.
Albert est nu.
Julie le regarde, lentement, attentivement, de haut en bas pour enfin, fixer son regard sur sa zigounette.
Mais, mais..... Albert, c'est quoi ça ?
C'est la chose avec laquelle tu as eu tellement de plaisir cette nuit, lui dit-il en rougissant.
Elle lui répond: «
Mon Dieu, ça s'use si vite; et c'est tout ce qui reste ??? »

Voici un exemple de structure avec 3 parties distinctes; nous pouvons placer les vignettes/images à gauche car en s'agrandissant, elles partent par défaut vers la droite; le bloc central peut-être consacrer au texte; le bloc de droite pourra contenir les boutons, puisque nous sommes en majorité droitiers.

Ces blocs ne servent qu'à définir le cadre de fond car pour qu'un élément soit animé par un bouton, il faut que les 2 ou les 3 soient dans le même bloc; nous déplacerons donc chaque élément au dessus de son bloc mais ils seront tous, dans notre exemple, dans le bloc boutons.

Ce qui donne un code général, "brut de fonderie "!

<div style="width: 20vw; height: 80vh; float: left; margin: 0vh 0vw; border: 0.3vw double black; text-align: center;">Vignettes images.<br /><br /><div style="width: 20vw; height: 80vh; float: left; margin: 0vh 0vw; border: 0.3vw double black;">Vignettes images.</div></div>
<div style="width: 40vw; height: 80vh; float: left; margin: 0vh 1vw; border: 0.3vw double black; text-align: center;">Textes<br /><br /><div style="width: 40vw; height: 80vh; float: left; margin: 0vh 1vw; border: 0.3vw double black;">Textes<br></div></div>
<div style="width: 20vw; height: 80vh; float: left; margin: 0vh 0vw; border: 0.3vw double black; text-align: center;">Boutons<br /> <input id="b1" type="text" value="bouton 1" />
<p id="b1a">blague;</p>
<p id="b1b"> </p>
</div>

Comme vous le voyez, les éléments sont tous écrits dans le bloc boutons mais sont positionnés en indépendant, au dessus des autres blocs pour être animés par le bouton (2 actions: hover et focus).