Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

KoalaVolant
KoalaVolant
Dim 21 Juin 2020 - 18:22
Cette fiche de scénario / prédef va avec cette fiche là : clic

Si vous choisissez d'autres codes de ce thème, pour les couleurs, voici les étapes :
1. Retirer les :root{ leur contenu } de tous les CSS des codes de ce thème que vous choisirez
2. Rajouter cet unique :root qui est disponible sur le sujet "Concordance des couleurs"

Ce code fait partie du thème complet "Douceur minimaliste"



HTML



Code:
<div class="prespart presscenar"><div class="pres0"><div class="pres1"><img src="https://i.servimg.com/u/f62/11/66/37/71/hyeonb13.png"><div><h1>Prénom Nom</h1>
<h2>ft. Nom de l'avatar</h2>
<strong>Date et lieu de naissance :</strong> blablabla
<strong>Groupe :</strong> blablabla
<strong>Profession / Grade / Statut dans l'école :</strong> blablabla
<strong>Orientation sexuelle / Genre :</strong> blablabla</div></div><div class="pres2"><h3>Informations sur le scénario</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla risus, tempus a ullamcorper vel, vulputate nec augue. Aenean nunc tortor, aliquet et suscipit ac, vestibulum eu quam. Nam vel dui mauris. Aenean commodo odio libero, in semper lectus pretium vitae. Donec nisi dolor, porttitor id molestie sed, volutpat et ante. Cras pellentesque leo sit amet turpis viverra venenatis. Nunc velit sem, dictum eget augue id, rutrum rutrum arcu. Etiam id ultricies nibh, at rhoncus velit. Phasellus quis tortor a leo volutpat cursus sit amet in dui. Vestibulum tincidunt elit a mi ultricies, sit amet pellentesque lectus faucibus. Duis ipsum orci, convallis tincidunt turpis in, posuere facilisis augue. Duis vestibulum, nunc et aliquet consectetur, nisi turpis molestie justo, a volutpat justo metus eget augue.

Curabitur non varius est, sed auctor leo. Nullam volutpat metus in purus laoreet feugiat. Nulla pulvinar feugiat metus tristique scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus tellus ut nibh consectetur pretium. Duis tortor magna, lobortis sit amet porttitor a, dapibus et leo. Sed elementum felis sit amet eros suscipit, non ultricies ligula condimentum. Morbi sit amet imperdiet tellus, facilisis suscipit est. Suspendisse velit nisi, aliquam eu lacus vel, sodales hendrerit leo. Mauris pulvinar hendrerit magna eget convallis. Nam eget tortor ex. Ut lacinia diam tortor. Donec et felis velit. Proin porttitor dolor a dui euismod, id finibus dolor sodales. Fusce vel euismod velit, at efficitur lacus. Maecenas interdum mollis tristique.</span></div></div>
<div class="presliens"><h3>Ses liens</h3><div><img src="https://66.media.tumblr.com/d5d402b54878547bf9095242e4889078/tumblr_pui9e65g5l1r8dxfio6_500.gif"><span><strong>Prénom Nom + Lien : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla risus, tempus a ullamcorper vel, vulputate nec augue. Aenean nunc tortor, aliquet et suscipit ac, vestibulum eu quam. Nam vel dui mauris. Aenean commodo odio libero, in semper lectus pretium vitae. Donec nisi dolor, porttitor id molestie sed, volutpat et ante. Cras pellentesque leo sit amet turpis viverra venenatis. Nunc velit sem, dictum eget augue id, rutrum rutrum arcu. Etiam id ultricies nibh, at rhoncus velit. Phasellus quis tortor a leo volutpat cursus sit amet in dui. Vestibulum tincidunt elit a mi ultricies, sit amet pellentesque lectus faucibus. Duis ipsum orci, convallis tincidunt turpis in, posuere facilisis augue. Duis vestibulum, nunc et aliquet consectetur, nisi turpis molestie justo, a volutpat justo metus eget augue.</span></div><div><img src="https://66.media.tumblr.com/d5d402b54878547bf9095242e4889078/tumblr_pui9e65g5l1r8dxfio6_500.gif"><span><strong>Prénom Nom + Lien : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla risus, tempus a ullamcorper vel, vulputate nec augue. Aenean nunc tortor, aliquet et suscipit ac, vestibulum eu quam. Nam vel dui mauris. Aenean commodo odio libero, in semper lectus pretium vitae. Donec nisi dolor, porttitor id molestie sed, volutpat et ante. Cras pellentesque leo sit amet turpis viverra venenatis. Nunc velit sem, dictum eget augue id, rutrum rutrum arcu. Etiam id ultricies nibh, at rhoncus velit. Phasellus quis tortor a leo volutpat cursus sit amet in dui. Vestibulum tincidunt elit a mi ultricies, sit amet pellentesque lectus faucibus. Duis ipsum orci, convallis tincidunt turpis in, posuere facilisis augue. Duis vestibulum, nunc et aliquet consectetur, nisi turpis molestie justo, a volutpat justo metus eget augue.</span></div></div><div class="pres3"><h3>Plus d'infos de la part du créateur</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla risus, tempus a ullamcorper vel, vulputate nec augue. Aenean nunc tortor, aliquet et suscipit ac, vestibulum eu quam. Nam vel dui mauris. Aenean commodo odio libero, in semper lectus pretium vitae. Donec nisi dolor, porttitor id molestie sed, volutpat et ante. Cras pellentesque leo sit amet turpis viverra venenatis. Nunc velit sem, dictum eget augue id, rutrum rutrum arcu. Etiam id ultricies nibh, at rhoncus velit. Phasellus quis tortor a leo volutpat cursus sit amet in dui. Vestibulum tincidunt elit a mi ultricies, sit amet pellentesque lectus faucibus. Duis ipsum orci, convallis tincidunt turpis in, posuere facilisis augue. Duis vestibulum, nunc et aliquet consectetur, nisi turpis molestie justo, a volutpat justo metus eget augue.

Curabitur non varius est, sed auctor leo. Nullam volutpat metus in purus laoreet feugiat. Nulla pulvinar feugiat metus tristique scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus tellus ut nibh consectetur pretium. Duis tortor magna, lobortis sit amet porttitor a, dapibus et leo. Sed elementum felis sit amet eros suscipit, non ultricies ligula condimentum. Morbi sit amet imperdiet tellus, facilisis suscipit est. Suspendisse velit nisi, aliquam eu lacus vel, sodales hendrerit leo. Mauris pulvinar hendrerit magna eget convallis. Nam eget tortor ex. Ut lacinia diam tortor. Donec et felis velit. Proin porttitor dolor a dui euismod, id finibus dolor sodales. Fusce vel euismod velit, at efficitur lacus. Maecenas interdum mollis tristique.</span></div></div>

CSS



Les couleurs sont modifiables dans le root. Sinon vous pouvez juste modifier var(--main-color) par #e3e3e3 par exemple !

Code:
/* Fiche de scénario par Koala Volant */

:root{
  --main-color:#555;
  --snd-color:#fff;
  --third-color:#888;
  --four-color:#FCC5A0;
  --five-color:#F28977;
  --five-v-color:#FAC0B6;
  --six-color:#B9919A;
    --six-v-color:#DAC5CA;
  
  --font1: 'Source Sans Pro', sans-serif;
  --font2:'Playfair Display', serif;
  --fontjournal:'Alfa Slab One', cursive;
}

.prespart{ width:80%; margin:0 auto; color:var(--main-color); }
.prespart *{ box-sizing:border-box;}

.pres0{ display:flex; justify-content:space-between; align-items:center;}
.prespart strong{ color:var(--six-color); font-family:var(--font2); font-size:13px; }
.prespart h3{ text-align:center; padding:5px; color:var(--snd-color); font-family:var(--font1); font-size:12px; letter-spacing:3px; font-weight:normal; width:100%; }

/* Identité */

.pres1, .pres1 img, .pres1 div{ min-width:230px; max-width:230px; min-height:368px; }
.pres1{ position:relative; overflow:hidden; }
.pres1 img{ position:relative; top:0; left:0; z-index:888; padding:3px; border:1px solid var(--four-color);  }
.pres1 div{ position:absolute; top:0px; left:-230px; transition:800ms; z-index:999; padding:10px; text-align:justify; background-color:var(--snd-color); overflow:auto; max-height:368px; }
.pres1:hover div{ left:0;}
.pres1 div h1{ font-family:var(--font1); letter-spacing:1px; color:var(--main-color); text-align:center; font-size:22px; line-height:24px; text-transform:uppercase; margin:0px; }
.pres1 div h2{ font-family:var(--font2); color:var(--five-color); font-size:12px; line-height:16px; margin:0px; text-align:center; position:relative; top:-15px; }

/* Petites infos */

.pres2 span{ width:100%; display:block; padding:15px; text-align:justify; background-color:var(--snd-color); max-height:220px; overflow:auto; border:1px solid var(--six-color); }

/* Pour les scenarios */

.presliens{ display:flex; justify-content:space-between; flex-wrap:wrap; }
.presliens div{ margin-bottom:10px; display:flex; flex-direction:column; width:49%; }
.presliens div img{ max-width:100%; max-height:120px; object-fit:cover; margin-bottom:5px; }
.presliens div span{ max-width:100%; max-height:150px; overflow:auto; background-color:var(--snd-color); border:1px solid var(--six-color); padding:10px; text-align:justify; }
Revenir en haut

Nos amis proches

Fiche de predef/scénario Parto512 Logo WyvArtem