Modèle de scénario

/*--------------------FICHE DE PRESENTATION PAR NYXBANANA-----------------------*/

.NBpresa__container {
width: 100%;
border: solid 10px #050505;
color: #050505;
background-color: #FAFAFA;
box-sizing: border-box;
}

.NBpresa__quicklook, .NBpresa__moar, .NBpresa__story, .NBpresa__player {
width: 450px;
margin: 0 auto;
position: relative;
}

.quicklook__letter, .player__title, .NBpresa__player::after, .story__title, .moar__title, .moar__name1, .moar__name2, .cara__title, .quicklook__name, .quicklook__info, .quicklook__quote, .quicklook__song a, .quicklook__q {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
}

.quicklook__letter {
position: absolute;
font-size: 200px;
width: 400px;
left: 50%;
bottom: 30px;
margin-left: -200px;
text-align: center;
font-weight: lighter;
}

.quicklook__name {
background-color: #050505;
padding: 20px 8px 8px 8px;
margin-bottom: 50px;
color: #FAFAFA;
display: inline-block;
}

.quicklook__info {
float: right;
padding: 20px 8px 8px 8px;
}

.quicklook__quote {
font-size: 24px;
width: 200px;
line-height: 1.2;
}

.quicklook__song a {
color: #050505 !important;
font-size: 9px;
width: 175px;
display: block;
line-height: 1.2;
}

.quicklook__think {
position: absolute;
right: 0;
width: 165px;
top: 150px;
text-align: justify;
font-size: 10px;
line-height: 1.2;
}

.quicklook__think::before {
content: "“";
display: block;
position: absolute;
top: -30px;
left: 0;
font-size: 50px;
}

.NBpresa__moar__container, .NBpresa__player__container {
background-color: #050505;
color: #FAFAFA;
position: relative;
}

.NBpresa__moar__bg, .NBpresa__player__bg {
position: absolute;
top: 0;
height: 0;
width: 100%;
height: 100%;
-webkit-filter: brightness(0.5) contrast(1.5) grayscale(1) opacity(20%);
filter: brightness(0.5) contrast(1.5) grayscale(1) opacity(20%);
}

.NBpresa__moar {
content: " ";
display: table;
}

.NBpresa__moar:after {
clear: both;
}

.NBpresa__moar {
*zoom: 1;
}

.moar__title, .story__title, .player__title {
font-size: 38px;
padding: 60px 0 70px 20px;
letter-spacing: 10px;
}

.moar__cara, .moar__vava {
float: left;
}

.moar__vava {
width: 200px;
height: 320px;
position: relative;
}

.moar__vava::after{
content: "";
display: block;
position: absolute;
width: 200px;
height: 320px;
border: 2px solid #1c1b1b;
top: -30px;
right: -20px;
}

.moar__name1, .moar__name2 {
position: absolute;
left: 30px;
bottom: 40px;
font-size: 18px;
color: #050505;
}

.moar__cara__container1, .moar__cara__container2 {
width: 200px;
float: left;
}

.moar__cara__container1 {
margin: -20px 0 150px 50px;
}

.moar__cara__container2 {
margin: -20px 50px 100px 0;
}

.moar__cara {
height: 320px;
overflow-y: auto;
text-align: justify;
padding-right: 3px;
font-size: 12px;
line-height: 1.3;
color: #bdbdbd;
}

.cara__title {
font-size: 18px;
}

.NBpresa__story {
padding-bottom: 50px;
}

.NBpresa__player {
padding-bottom: 100px;
}

.story__title, .player__title {
text-align: center;
line-height: 1.4;
}

.NBpresa__player::after {
content: "Fiche codée par NyxBanana";
display: block;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
font-size: 10px;
opacity: .8;
}

gertrude mcadams ft. elle fanning

carte d'identité Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus. caractère Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

anecdotes Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

derrière l'écran pseudo | prénom Quel âge as-tu ? ... Comment es-tu arrivé jusqu'à nous ? ... Comment trouves-tu notre forum ? ... A quelle fréquence penses-tu nous rendre visite ? ... Un petit mot pour la fin ? ...

i'm gonna pop your bubble gum heart

Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum, cursim ad Caesarem perferentes, cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum, nec diluere obiecta permissi nec defensi periere conplures. Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur. Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae.

Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente defensione carnifex rapinarum sequester et obductio capitum et bonorum ubique multatio versabatur per orientales provincias, quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.

/* FICHE DE PRESENTATION PAR REVEREND LILY G */
/* cyrillic */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/RdfS2KomDWXvet4_dZQehvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/9NqNYV_LP7zlAF8jHr7f1vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v18/cycBf3mfbGkh66G5NhszPQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* hebrew */
@font-face {
font-family: 'Suez One';
font-style: normal;
font-weight: 400;
src: local('Suez One'), local('SuezOne-Regular'), url(https://fonts.gstatic.com/s/suezone/v1/0RHaX4U39H5gje3plavIkBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Suez One';
font-style: normal;
font-weight: 400;
src: local('Suez One'), local('SuezOne-Regular'), url(https://fonts.gstatic.com/s/suezone/v1/NbP6qMfQq9hiuVWpHYLvhxTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Suez One';
font-style: normal;
font-weight: 400;
src: local('Suez One'), local('SuezOne-Regular'), url(https://fonts.gstatic.com/s/suezone/v1/ml_pO8aziPWinsvwguX7dPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.case1 {
width:250px;
height: 420px;
background-color: white;
border: 1px solid white;
}

.case2 {
width: 250px;
height: 420px;
background-color: whitesmoke;
}

.case3 {
width: 250px;
height: 250px;
background-color: whitesmoke;
}

.case4 {
width: 250px;
height: 250px;
background-color: white;
}

.contentcase1 {
width: 200px;
height: 320px;
margin-top: 25px
}

.contentcase2 {
width: 200px;
height: 370px;
overflow: auto;
padding: 25px;
}

.contentcase3 {
width: 200px;
height: 200px;
padding: 25px;
overflow: auto;
}

.contentcase4 {
width: 200px;
height: 200px;
padding: 25px
}

.dents {
content:url('https://2img.net/r/hpimg4/pics/302262Sanstitre2.png')
}

.sodapoptitre {
font-family: 'Suez One';
color: #c6353a;
font-size: 16px;
text-align: center;
padding: 5px;
border-bottom: 1px solid #c6353a;
}

.sodapopsoustitre {
font-family: arial;
font-size: 9px;
letter-spacing: 5px;
color: grey;
}

.sodapopminititre {
font-family: 'Lobster';
color: #304779;
font-size: 16px;
text-align: justify;
padding-left: 10px;
}

.sodapoptextes {
font-family: arial;
font-size: 11px;
text-align: justify;
color: #2d2e30;
line-height: 1;
}

.sodapopbehindthescreen {
height: 50px;
overflow: auto;
font-family: arial;
font-size: 9px;
text-align: justify;
color: #2d2e30;
line-height: 1;
}

.iconsodapop {
width: 100px;
border-radius: 100px;
border: 2px solid #5c719d;
}

.fondhistoire {
width: 455px;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 25px;
padding-right: 25px;
background-color: whitesmoke;
}

.contenthistoire {
width: 400px;
}

.imagehistoire {
width: 400px;
}

.dentshistoire {
content:url(https://2img.net/r/hpimg4/pics/388314Sanstitre5.png);
margin-top: -18px;
}

.histoiretitre {
font-family: 'Lobster';
color: #304779;
font-size: 16px;
text-align: center;
padding: 5px;
padding-top: 25px;
border-bottom: 1px solid #304779;
margin-bottom: 15px;
}

.histoiretexte {
width: 400px;
font-family: arial;
font-size: 11px;
text-align: justify;
color: #2d2e30;
line-height: 1;
padding-bottom: 25px;
}

.imagehistoire2 {
width: 400px;
}

.dentshistoire2 {
content:url(https://2img.net/r/hpimg4/pics/388314Sanstitre5.png);
margin-bottom: -18px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);}

/* FIN FICHE DE PRESENTATION */

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet tellus a lacus eleifend, eu iaculis est convallis. Pellentesque sed nulla odio. Phasellus quis ex ante. Sed felis turpis, convallis at porttitor ut, mattis quis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sodales eros dui, ac lacinia neque ornare sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

I. Un titre

In vel auctor est, sed lobortis dui. Maecenas non tincidunt nisi, vel egestas massa. Fusce egestas, turpis quis placerat ornare, erat nisi aliquet diam, in fringilla quam augue eu ligula. Morbi sit amet aliquam lorem. Nam placerat risus in mauris imperdiet aliquam. Etiam gravida augue hendrerit pharetra tempor. Vivamus lectus orci, consectetur in facilisis sit amet, pharetra a est. Ut in lobortis libero. Nullam nisi tellus, porta sit amet ex id, ultricies volutpat nunc. Duis tempor, ipsum ac ultrices venenatis, ante justo tristique nisl, a finibus ex dolor non risus. Duis elementum nibh sed magna suscipit vehicula. Phasellus congue consequat tortor in tristique. Integer convallis lacus sit amet nunc mattis semper. Etiam porta dignissim tortor feugiat volutpat. Nulla facilisi.

II. Un autre titre

Curabitur rhoncus elit viverra luctus finibus. Quisque commodo varius lacus, vel semper arcu. Phasellus volutpat eget magna eget faucibus. Cras a nibh mi. Sed tempus non dolor id rutrum. Nullam eu sem nisi. Mauris a cursus ex, id aliquet tellus. Quisque viverra, dui eu pulvinar ultrices, est sem pharetra orci, ut euismod nunc nunc at erat. Vestibulum pellentesque rutrum enim id molestie. Proin faucibus congue diam, sed sodales felis iaculis nec. Proin in fermentum sem. Nullam ac metus lacinia, rhoncus dui ac, hendrerit libero. Integer id ligula in risus tempor tempor nec in enim. Integer vel eros accumsan, vehicula purus ac, gravida erat.

III. Encore un titre

Quisque porttitor leo non metus interdum lacinia. Pellentesque aliquam felis eros, nec mollis mi placerat vel. Praesent quis consequat magna. Curabitur vestibulum eu nunc eu eleifend. Aenean massa erat, molestie ornare felis sit amet, efficitur pharetra erat. Maecenas iaculis dui nec sem euismod, at feugiat justo lobortis. Cras vel imperdiet arcu. Praesent et aliquet ligula. Ut nec interdum lectus. Curabitur faucibus feugiat nulla, ullamcorper molestie purus sodales ut. Sed consectetur felis eu nisi maximus, sit amet pellentesque lectus pretium. Quisque ut leo eros. Donec ut lorem quis urna ullamcorper semper eget sit amet arcu.

Voilà quand tu écris en gras.
Voilà quand tu écris en italique.

Un joli titre

UNE PETITE CITATION PAR ICI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

PLUMYTS ️ 2020