Coucou les copains !
Comme vous le voyez, j'utilise pas le code de "base" du forum, parce que je veux pas que vous voyiez ça comme un post officiel et tout. Je vais juste ... Poster des libres services de code de rp, notamment et vous pourrez également me passer commande si besoin ! S'il vous plait, ne vous sentez jamais mal d'utiliser mes codes / de m'en demander, j'aime beaucoup ça et généralement je manque juste un peu d'inspiration.
Pour ce qui est de prendre les codes, bah juste servez vous. Vous pouvez également récupérer ça sur d'autres forums, c'est ok pour moi. Je mets pas de crédits sur mes codes parce qu'entre nous je m'en tape un peu, bref, vous pouvez me notifier mais pas obligé. Vous pouvez également modifier ce que vous voulez dans mes codes, autant la structure que les couleurs, chill.
Pour ce qui est des commandes, contactez moi par mp ! Sous un de mes comptes (@Sen Ishida ; @Ceylan Alterra ; @Liseron Amaterasu ; @Mai Sinistros-Liu ; @Numa Celestial), sur discord pour ceux qui ont mon discord, ou simplement en postant un message ici, puis je vous contacterais ! N'ayez pas peur de déranger, si je n'ai pas le temps / l'envie je vous le dirais. Coder est autant un hobby qu'une occupation qui me vide la tête.
Bref !
Comme vous le voyez, j'utilise pas le code de "base" du forum, parce que je veux pas que vous voyiez ça comme un post officiel et tout. Je vais juste ... Poster des libres services de code de rp, notamment et vous pourrez également me passer commande si besoin ! S'il vous plait, ne vous sentez jamais mal d'utiliser mes codes / de m'en demander, j'aime beaucoup ça et généralement je manque juste un peu d'inspiration.
Pour ce qui est de prendre les codes, bah juste servez vous. Vous pouvez également récupérer ça sur d'autres forums, c'est ok pour moi. Je mets pas de crédits sur mes codes parce qu'entre nous je m'en tape un peu, bref, vous pouvez me notifier mais pas obligé. Vous pouvez également modifier ce que vous voulez dans mes codes, autant la structure que les couleurs, chill.
Pour ce qui est des commandes, contactez moi par mp ! Sous un de mes comptes (@Sen Ishida ; @Ceylan Alterra ; @Liseron Amaterasu ; @Mai Sinistros-Liu ; @Numa Celestial), sur discord pour ceux qui ont mon discord, ou simplement en postant un message ici, puis je vous contacterais ! N'ayez pas peur de déranger, si je n'ai pas le temps / l'envie je vous le dirais. Coder est autant un hobby qu'une occupation qui me vide la tête.
Bref !
#01 POST RP ;
Il marche surtout avec un titre de rp cours, en un mot ou deux. Bref faut que ça tienne sur une ligne en soi. Après, vous pouvez toujours changer la taille du texte !
Il marche surtout avec un titre de rp cours, en un mot ou deux. Bref faut que ça tienne sur une ligne en soi. Après, vous pouvez toujours changer la taille du texte !
- #01 POST RP:
- Code:
<div class="cyan_01"><in><h1>TITRE DU RP</h1><!--
--><img src="https://via.placeholder.com/100/000000" class="icon" /><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo diam, semper eu diam a, tempus eleifend lorem. Aliquam leo tortor, lobortis ac semper sed, gravida vitae augue. Etiam odio purus, egestas a felis sit amet, lobortis imperdiet lacus. Donec purus urna, dictum sit amet velit vulputate, molestie ullamcorper ex. Suspendisse potenti. Integer sagittis nec est ac varius. Quisque aliquam, nisi eget semper faucibus, massa magna hendrerit orci, ut euismod augue elit sed arcu. Suspendisse vitae arcu neque. Vestibulum interdum vehicula volutpat. Sed eu consectetur velit. Nullam dignissim, sem sit amet pharetra vulputate, nisl enim feugiat orci, vel maximus turpis turpis nec ligula. Phasellus faucibus arcu nec massa ultricies sodales. [color=#CD853F]Du dialogue qui claque.[/color] Curabitur quis pulvinar nunc, eu fringilla massa. Cras nec iaculis enim. Aenean malesuada urna nec ipsum efficitur ornare. Praesent aliquet ex vel mauris dapibus tincidunt.</p><!--
--><span class="footer">lieu | ft. ... | 00.00.20xx 00:00</span></in></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet"><!--
--><style>.cyan_01 {border:25px solid #0c0c0c; padding:15px; margin:0 50px;} .cyan_01 in {display:block; background:#0c0c0c; padding:10px; position:relative;} .cyan_01 h1 {margin:40px 0 50px; border:0 solid; color:#141414; font-family: 'Montserrat', sans-serif; text-align:center; font-size:75px; letter-spacing:-10px;} .cyan_01 .icon {position: absolute; top: 65px; left: 50%; transform: translateX(-50%); border-radius: 50%; border: 15px solid #0c0c0c; width: 130px;} .cyan_01 p {margin:0; font-size:11px; padding:40px 25px 30px; text-align:justify; color: rgba(255,255,255,.6);} .cyan_01 .footer {display:block; font-size:9px; text-transform:uppercase; text-align:center; letter-spacing:1px; color: #211f1e; font-weight: 900; line-height: 6px;}</style>
#02 POST RP ;
Celui là je l'aime bien, il est pas ultra optimisé en terme de longueur de code, mais j'aime bien l'idée d'avoir des lignes, comme ça, de différente épaisseur. Y a pas de filtre sur les images, mais je trouve que ça rend mieux avec une image en noir et blanc et une image avec des couleurs intenses / proches de la couleur de parole du perso.
Celui là je l'aime bien, il est pas ultra optimisé en terme de longueur de code, mais j'aime bien l'idée d'avoir des lignes, comme ça, de différente épaisseur. Y a pas de filtre sur les images, mais je trouve que ça rend mieux avec une image en noir et blanc et une image avec des couleurs intenses / proches de la couleur de parole du perso.
- #02 POST RP:
- Code:
<div class="cyan_02"><div><img src="https://64.media.tumblr.com/ab481650209d51710cc889b86b899684/caad75d6ad6fa86d-61/s400x600/2fde2fb387614488e1fbb5f468fcd5059f503812.png" class="icon" />
<img src="https://64.media.tumblr.com/a1a60c3f646448da4c2e7251495263be/caad75d6ad6fa86d-fc/s400x600/7155b25cb181d2042a63c3a9c2b189f7af81f49e.png" class="minicon" />
<div style="background:#D57C47;" class="bubulle"></div><!--
--><div class="footer"><span>00:00</span>
<span>00.00.20xx</span>
<span>Prénom Nom</span></div></div><!--
--><div><h1>Titre du rp</h1><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat, nibh a viverra ultrices, arcu ex laoreet quam, et commodo neque orci vel ex. Vestibulum ex leo, ultrices id lacus et, faucibus aliquet augue. Mauris id magna nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque aliquam rhoncus purus, nec interdum diam molestie et. Nunc tortor ligula, maximus posuere sollicitudin aliquet, vestibulum in erat. Quisque nec leo non magna auctor egestas vitae eu ligula. Cras molestie lobortis arcu, quis dignissim urna efficitur id. [color=#D57C47]He ben, si c'est pas une couleur sympa, ça.[/color]
Morbi accumsan nulla nisl, ac eleifend velit tincidunt convallis. Proin augue nisl, convallis eget cursus eget, rhoncus at ligula. Nam arcu lectus, fringilla vitae malesuada vitae, elementum ac nibh. Sed sed libero eget est lobortis molestie. Donec vitae ex ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dignissim molestie mollis.
Sed ullamcorper, nulla quis vehicula viverra, ex tortor pharetra enim, sit amet molestie dolor libero at erat. Aenean sit amet venenatis eros. Integer ligula justo, molestie id rhoncus in, aliquam sed leo. Nam id lacus arcu. Phasellus gravida, ex sed maximus vestibulum, enim eros tempor ex, in ultrices lorem odio eget elit. In tempus, velit quis tristique interdum, est elit egestas ex, nec vehicula lorem lectus eu eros. Pellentesque quis sem ipsum.</p></div></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@800&display=swap" rel="stylesheet"><!--
--><style>.cyan_02 {display:flex; background:#151413; padding:15px; margin:0 50px;} .cyan_02 > div:first-of-type {width:130px; margin-right:15px; position:relative; text-align:center;} .cyan_02 > div:last-of-type {width:337px;} .cyan_02 .icon, .cyan_02 .minicon, .cyan_02 .bubulle {position:relative; z-index:2; border-radius:50%;} .cyan_02 .icon {border:15px solid black; width:120px;} .cyan_02 .minicon {border:10px solid black; width:80px; margin:20px 0;} .cyan_02 .bubulle {display:inline-block; width:50px; height:50px; border:7px solid black;} .cyan_02 .footer {position:absolute; bottom:20px; left:50%; transform:translateX(-50%);} .cyan_02 span {display:inline-block; position:relative; z-index:2; background:black; color:#D57C47; padding:3px 6px 2px; margin:5px 0 0; font-size:10px; white-space: nowrap;} /*
Le titre, et le texte.
*/.cyan_02 h1 {position:relative; font-family: 'Lexend Deca', sans-serif; border:0 solid; background: black; color:#D57C47; text-align:right; padding:10px; font-size:22px; text-transform:uppercase;} .cyan_02 p {font-size:11px; text-align:justify; padding:20px; color:rgba(255,255,255,.8);}/*
Les lignes et détails du code.
*/.cyan_02 > div:first-of-type:before, .cyan_02 > div:first-of-type:after, .cyan_02 .footer:before, .cyan_02 .footer:after {content:""; display:block; position:absolute; background:black; left:50%; transform:translateX(-50%); z-index:1;} .cyan_02 > div:first-of-type:before {height:315px; width:5px; top:0;} .cyan_02 > div:first-of-type:after {height:315px; width:1px; top:15px} .cyan_02 .footer:before {height:90px; width:5px; bottom:0;} .cyan_02 .footer:after {height:90px; width:1px; bottom:15px;} .cyan_02 h1:before, .cyan_02 h1:after {content:""; position:absolute; width:100%; left:0; background:black;} .cyan_02 h1:before {bottom:-5px; height:3px;} .cyan_02 h1:after {bottom:-10px; height:1px;}</style>
#03 POST RP ;
Pour compenser avec le précédent, voilà un code absolument tout simple.
Pour compenser avec le précédent, voilà un code absolument tout simple.
- #03 POST RP:
- Code:
<div class="cyan_03"><p>Etiam ac aliquam turpis. Nam non dolor arcu. Integer aliquam, tortor nec eleifend malesuada, magna libero malesuada est, sit amet tristique augue est at odio. Aliquam dictum turpis id dolor elementum rutrum. Nunc lectus risus, elementum sed quam sed, ullamcorper imperdiet purus. Integer dictum rhoncus urna, id blandit ipsum condimentum ut. Aliquam ornare tellus vitae consectetur luctus. Nunc semper accumsan mauris nec tristique. Praesent lobortis nibh sed odio vulputate consequat. Suspendisse ac vulputate lorem.
[color=#008080]Ptit bout de dialogue avec une couleur sympa.[/color] Quisque viverra eleifend odio, nec condimentum urna condimentum a. Vivamus placerat convallis velit sit amet maximus. Mauris vulputate augue at neque tristique, eget efficitur sapien suscipit. Integer a suscipit purus. In iaculis cursus augue sed malesuada. Donec molestie euismod erat a vehicula. Vivamus iaculis enim id lectus viverra, quis dignissim est gravida. Aenean at aliquam tellus. Quisque vulputate nibh quis mollis varius. Sed sit amet libero vehicula, dignissim ipsum at, luctus tortor.</p></div><!--
--><style>.cyan_03 {margin:10px auto; width:370px; position:relative;} .cyan_03:before, .cyan_03:after{content:""; border:1px solid #008080; z-index:1; position:absolute; width:370px; height:200px;} .cyan_03:before {top:-10px; left:-10px;} .cyan_03:after{bottom:-10px; right:-10px;} .cyan_03 p {position:relative; z-index:2; margin:0; background:#151413; padding:30px; text-align:justify; font-size:11px; color:rgba(255,255,255,.8); box-shadow:0 0 3px rgba(0,0,0,.5);}</style>
#04 POST RP ;
Cette fois ci, je me suis qu'avec une petite image ça pourrait être sympa. Personnellement, pour avoir des images avec une bonne résolution (si vous souhaitez faire des rps très longs, par exemple), je vais sur burst, qui est un super site.
Cette fois ci, je me suis qu'avec une petite image ça pourrait être sympa. Personnellement, pour avoir des images avec une bonne résolution (si vous souhaitez faire des rps très longs, par exemple), je vais sur burst, qui est un super site.
- #04 POST RP:
- Code:
<div class="cyan_04"><div><h1><em>Titre du rp</em></h1><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo vitae enim sit amet suscipit. Sed a elementum eros. Vivamus id maximus tortor, sit amet vehicula leo. Vivamus eget dui nisi. Vivamus massa justo, imperdiet id neque non, consectetur porta ligula. In felis diam, egestas sit amet quam sit amet, tempus aliquam lacus. Nunc laoreet condimentum lorem, id tempor felis ultrices vel. Nulla dui eros, vestibulum nec dapibus non, ultrices eu lacus. Praesent sit amet mi nunc. Mauris non erat lacus. Sed sit amet placerat lacus. In egestas arcu lectus, eget faucibus eros vulputate ut.
<span>─ Raconte moi ton histoire.</span>
Morbi nec laoreet ex. Sed nec erat eget felis fermentum vulputate fermentum non quam. Phasellus efficitur sodales mi, at dignissim quam ullamcorper eu. Nunc eget aliquam felis, id varius risus. Aenean congue pulvinar sollicitudin. Nam a mollis est. Pellentesque ac facilisis enim, quis convallis sem. Praesent non porttitor nunc. Quisque non hendrerit sapien. Integer tincidunt, ipsum non pharetra vestibulum, dolor nisl dictum dui, ac consequat ex nisi vel massa. Nullam eget tortor libero.</p></div><!--
--><div></div></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@1,600&display=swap" rel="stylesheet"><!--
--><style>.cyan_04 {display:flex; background:#151413; width:450px; margin:0 auto;} .cyan_04 > div:first-of-type {width:370px; padding:30px;} .cyan_04 h1 {border:0 solid; color:#85C17E; font-family: 'Crimson Text', serif; text-transform:lowercase; font-size:30px; position:relative;} .cyan_04 h1:before {content:""; height:2px; width:310px; background:#211f1e; position:absolute; top:12px; left:0;} .cyan_04 h1 em {position:relative; display:inline-block; background:#151413; padding:5px 10px;} .cyan_04 p {font-size:11px; text-align:justify; color:rgba(255,255,255,.6); border:1px solid #211f1e; padding:10px; margin:0;} .cyan_04 > div:last-of-type {width:80px; background:url('https://www.zupimages.net/up/21/41/esm2.jpg'); background-size:cover; background-position:center;} .cyan_04 span {color:#85C17E; display:inline-block; padding:5px 10px;}</style>
#05 POST RP ;
Cette fois-ci, j'ai eu envie d'utiliser des gifs de gradients, ceux qu'on peut trouver sur le tumblr colormush, pour une ambiance un peu plus néon, mais facilement adaptable à votre goût.
Cette fois-ci, j'ai eu envie d'utiliser des gifs de gradients, ceux qu'on peut trouver sur le tumblr colormush, pour une ambiance un peu plus néon, mais facilement adaptable à votre goût.
- #04 POST RP:
- Code:
<div class="cyan_05"><tt></tt><!--
--><h1>Titre du rp</h1><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget egestas arcu. Vivamus finibus venenatis tincidunt. Fusce nec faucibus sapien, vitae tristique diam. Sed sodales tincidunt purus, sed luctus ante tempus nec. Phasellus ac odio volutpat, sollicitudin odio pulvinar, placerat purus. Proin velit urna, faucibus eu justo nec, dapibus tincidunt justo. Duis mattis nunc turpis, at cursus ex pulvinar id. Maecenas consectetur ornare nisl. Curabitur et efficitur odio, eget efficitur turpis. In convallis imperdiet dolor, vel commodo est porta lobortis. Suspendisse eget commodo neque. Donec fringilla augue velit, sit amet sodales nibh venenatis ac. Suspendisse potenti. Nullam eleifend eros a tristique ornare. Nunc pharetra egestas est ut vestibulum. Vestibulum fringilla in quam sit amet hendrerit.
Nunc eget quam lacinia, eleifend purus at, porta purus. In maximus auctor sapien at facilisis. Nullam eget rhoncus dolor. Suspendisse nec aliquam ex, eget ultricies turpis. Nullam vel mi ligula. Maecenas tortor enim, facilisis ac congue sit amet, vehicula eu justo. Sed interdum ipsum vel mi pharetra dapibus. [color=#a474cc]❝ Des bleus aux coeur, le coeur au bord des lèvres. ❞[/color] In sodales auctor ante vitae varius. Duis in leo auctor, dapibus elit tempor, suscipit tortor. Donec eleifend tincidunt leo, vitae posuere dolor condimentum sed. In finibus dignissim tellus, at scelerisque nisl imperdiet vel. Integer sagittis pulvinar magna, et convallis elit imperdiet sit amet. Vivamus sed posuere diam. Nunc in laoreet enim.</p><!--
--><tb></tb></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet"><!--
--><style>.cyan_05 {background:#151413; width:440px; margin:0 auto; position:relative; padding:70px;} .cyan_05 tt, .cyan_05 tb {display:block; position:absolute; width:100px; height:100px; background:url('https://64.media.tumblr.com/673f212150fcbdf16c355a60a28d6857/e7a56823ca6b1800-72/s400x600/c52102aed618f691c061412efb421563d2bc89e2.gifv');} .cyan_05 tt {top:0; left:0;} .cyan_05 tb {bottom:0; right:0;} .cyan_05 tt:after, .cyan_05 tb:after {content:""; position:absolute; width: 0; height: 0; border-style: solid;} .cyan_05 tt:after {top:0; left:0; border-width: 0 0 100px 100px; border-color: transparent transparent #151413 transparent;} .cyan_05 tb:after {bottom0; right:0; border-width: 100px 100px 0 0; border-color: #151413 transparent transparent transparent;}/*
*/.cyan_05 h1 {position:relative; z-index:2; font-family: 'Oswald', sans-serif; border:0 solid; color:#318991; margin: 0 0 -3px; line-height: 0; text-transform: uppercase; text-align: right; font-size: 30px;} .cyan_05 p {position:relative; z-index:2; font-size:11px; text-align:justify; color:rgba(255,255,255,.7); border:1px solid #318991; padding:20px;}</style>
#05 POST RP ;
Cette fois, c'est une commande ! C'était une commande pour Minuit ! Bon, ok entre temps Amau avait oublié. Mais j'aime bien l'ambiance qui ressort de ce code, et avoir la relation déjà affichée est effectivement une bonne idée !
Cette fois, c'est une commande ! C'était une commande pour Minuit ! Bon, ok entre temps Amau avait oublié. Mais j'aime bien l'ambiance qui ressort de ce code, et avoir la relation déjà affichée est effectivement une bonne idée !
- #05 POST RP:
- Code:
<div class="cyan_05"><div class="rel"><span>Prénom</span> [color=#D64045]▰ ▰ ▰ ▰ ▰ ▰ ▰ ▰ ▰ ▰[/color] ▱ ▱ ▱ ▱ ▱ ▱ ▱ ▱ ▱ ▱</div><!--
--><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit porttitor ante. Vivamus a nisi et leo rutrum facilisis non sed dui. Suspendisse rutrum tempus mi at porta. Curabitur luctus et velit ullamcorper fermentum. Vestibulum posuere nec neque eget malesuada. Mauris augue nisl, rhoncus at turpis pretium, hendrerit tincidunt eros. Morbi ut posuere massa. Nulla facilisi. Praesent sed ante placerat, dignissim lectus sed, mattis ipsum. Integer semper dolor urna, non aliquam nulla vestibulum eu. Aliquam imperdiet sapien et tortor pharetra auctor.
[color=#D64045]Morbi pellentesque porta orci ut elementum.[/color] Vestibulum ligula neque, interdum id tellus eget, efficitur condimentum arcu. Nunc suscipit nulla vitae dapibus consequat. Quisque venenatis dolor et dui lacinia, id maximus nunc ultricies. Aenean non mauris nulla. Mauris fermentum molestie mollis. Fusce in mauris pharetra, consequat ipsum id, maximus nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam interdum nibh sed cursus aliquam. Suspendisse ultricies condimentum placerat. Vivamus quam nisl, bibendum vitae convallis vel, vehicula vulputate dui. Mauris eu enim in nisi condimentum aliquet. Morbi luctus euismod elit, condimentum mattis velit ultricies id. Nulla quis leo vulputate, tempus sapien pharetra, maximus est.</div><!--
--><img src="https://via.placeholder.com/75/000000" class="icon" /></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet"><!--
--><style>.cyan_05 {width:450px; margin:0 auto; background:url('https://zupimages.net/up/21/44/habw.jpg'); background-size:cover; background-position:center; text-align:center; padding-bottom:25px;} .cyan_05 .rel {background:black; text-align:center; padding:20px; letter-spacing:1px; color:#727272; font-size:10px;} .cyan_05 .rel span {text-transform:uppercase; font-size:14px; font-family: 'Roboto Condensed', sans-serif; font-weight:900; color:#D64045;} .cyan_05 .text {margin:40px; background:rgba(0,0,0,.8); padding:40px; font-size:11px; text-align:justify;} .cyan_05 .icon {border:15px solid #000000; width:105px; height:105px; border-radius:50%;}</style>
#06 POST RP ;
Bon, j'ai bidouillé ça vite fait pour Viktor, et je me suis dis que c'était une bonne idée de le glisser ici, histoire de ! N'hésitez pas. Bon, c'est aux couleurs de Vik mais j'ai aucun doute sur votre capacité à vous adapter.
Bon, j'ai bidouillé ça vite fait pour Viktor, et je me suis dis que c'était une bonne idée de le glisser ici, histoire de ! N'hésitez pas. Bon, c'est aux couleurs de Vik mais j'ai aucun doute sur votre capacité à vous adapter.
- #06 POST RP:
- Code:
<div class="cyan_06"><!--
--><div class="text"><span><em>Titre du rp</em> [color=#333333]—[/color]</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel enim felis. Suspendisse nibh massa, maximus ac nibh viverra, ultrices rutrum est. Phasellus ac neque consectetur, hendrerit lectus at, maximus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec tempor felis sit amet tellus condimentum placerat. Nulla facilisi. Nam dui purus, euismod at accumsan iaculis, sollicitudin eu leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas commodo nisl diam, at ullamcorper felis porta a. Donec imperdiet ligula at porttitor porta. In hac habitasse platea dictumst. Aenean eget faucibus libero. Ut bibendum fringilla suscipit.
[color=#E0711D]Vivamus ut massa vel erat ultrices placerat.[/color] Nulla mattis commodo felis, sed ornare nisl mollis quis. Nunc at lorem porta, rutrum tortor maximus, blandit dolor. Sed mollis malesuada mi quis ornare. Sed a felis sit amet nulla scelerisque bibendum. Ut ac tristique tellus. Donec vel libero vitae quam feugiat eleifend non at neque. Donec ut elit sem. Cras sem eros, dignissim et elementum non, efficitur nec felis. Pellentesque urna tellus, dignissim ut dolor et, pharetra consequat augue. Praesent maximus libero ornare eros auctor scelerisque. Fusce dignissim sagittis efficitur. Aenean posuere gravida tempus. Nulla sagittis non purus quis tristique. Fusce tristique eu erat vel cursus.</div></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap" rel="stylesheet"><!--
--><style>.cyan_06 {width:475px; margin:0 auto; padding:50px; background: linear-gradient(135deg, #020024 0%, #381855 35%, #6c1b16 64%, #e0711d 100%);} .cyan_06 .text {padding:60px; background:rgba(0,0,0,.8); font-size:10px; color:rgba(255,255,255,.7); line-height:12px;} .cyan_06 span {display:block; text-align:right; font-family: 'Racing Sans One', cursive; font-size:37px; color:#595959; text-transform:lowercase; margin-bottom:20px;} .cyan_06 span em {background: -webkit-linear-gradient(-135deg, #020024 0%, #381855 35%, #6c1b16 64%, #e0711d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}</style>
#07 POST RP ;
Je pose aussi le modèle que j'ai utilisé pour Ismene ! J'ai changé les couleurs, comme ça vous pouvez visualiser avec une autre palette ! Pour l'icon, c'est une icon carrée mais perso j'aime bien les prendre sur Flaticon, un ptit mot clef, lineal, black et vous aurez tout l'embarras du choix !
Je pose aussi le modèle que j'ai utilisé pour Ismene ! J'ai changé les couleurs, comme ça vous pouvez visualiser avec une autre palette ! Pour l'icon, c'est une icon carrée mais perso j'aime bien les prendre sur Flaticon, un ptit mot clef, lineal, black et vous aurez tout l'embarras du choix !
- #07 POST RP:
- Code:
<div class="cyan_07"><bloc><img src="https://zupimages.net/up/22/06/3zi0.png" /><!--
--><span>lieu</span><!--
--><span>00.00</span><!--
--><span>partenaire</span></bloc><!--
--><texte><div><hh>TITRE</hh>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac purus commodo, molestie mi a, pretium nulla. Ut efficitur ultrices diam sit amet feugiat. Quisque commodo massa lectus, et scelerisque mi egestas eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi quam nunc, lobortis quis turpis eget, auctor semper nisl. Donec ac diam sed tortor feugiat tempus eu eu mauris. Integer eu porttitor metus, nec rhoncus odio. Donec a volutpat arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin laoreet elit eu risus maximus accumsan.
<blabla>Des paroles.</blabla>
Nullam egestas leo quis purus finibus ultrices. Morbi venenatis odio eu ante tempus, ac mollis velit semper. Fusce suscipit mollis augue sollicitudin ornare. Nulla facilisi. Sed dapibus neque aliquam nisi porttitor tempor eu a sapien. Praesent eleifend velit quis libero blandit condimentum. Nunc at massa lectus. Pellentesque sollicitudin, ante eleifend tristique bibendum, arcu orci congue sapien, non aliquam risus magna eget nibh. Cras interdum purus tellus, non placerat justo mattis at. Curabitur eget lacus in nibh auctor luctus. Aenean facilisis elementum urna posuere aliquet. Morbi id convallis metus, in aliquam ligula. Sed porttitor porttitor elit in sollicitudin.</div></texte></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><style>.cyan_07 {border:1px solid #86ad48; width:420px; margin:0 auto; background:#0f0e0e;} .cyan_07 bloc {display:inline-block; vertical-align:top; width:120px; background:#394427; height:350px; text-align:center; padding:15px; border:4px solid #211F1E; border-right:0 solid;} .cyan_07 bloc img {width:60px; margin-bottom:15px;} .cyan_07 bloc span {display:block; background:#0f0e0e; font-size:9px; padding:3px; color:#86ad48; text-transform:uppercase; font-weight:bold; line-height:12px; margin-bottom:4px;} .cyan_07 texte {display:inline-block; vertical-align:top; width:298px; padding:20px; height:350px; border:4px solid #211F1E; border-left:0 solid;} .cyan_07 texte div {padding:10px; height:310px; overflow:auto; font-size:11px; line-height:15px;} .cyan_07 texte hh {display:block; color:#86ad48; text-transform:uppercase; text-align:center; font-family: 'Oswald', sans-serif; font-size:16px;} .cyan_07 blabla {display:inline-block; padding-left:15px; color:#86ad48;} .cyan_07 texte div::-webkit-scrollbar-thumb {border-top:2px solid #0f0e0e; border-bottom:2px solid #0f0e0e; border-right:0 solid; border-left:0 solid; background:#394427;} .cyan_07 texte div::-webkit-scrollbar-track {border:1px solid #0f0e0e; background:#211F1E;}</style>
#08 POST RP ;
Bon, celui-ci était pour Dahlia, mais comme d'habitude je vous partage le code, à agrémenter ou modifier comme il vous semble, j'ai espacé un peu plus le css pour qu'il soit compréhensible pour le plus grand nombre !
Bon, celui-ci était pour Dahlia, mais comme d'habitude je vous partage le code, à agrémenter ou modifier comme il vous semble, j'ai espacé un peu plus le css pour qu'il soit compréhensible pour le plus grand nombre !
- #08 POST RP:
- Code:
<div class="cyan_08"><in><hh>Un titre</hh><hh1>Un titre</hh1><hh2>Un titre</hh2><!--
--><divider><img src="https://zupimages.net/up/22/10/6xyo.png"/></divider><!--
--><txt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus eros eu elit tempor suscipit. Duis lectus arcu, laoreet porttitor odio ut, finibus porttitor elit. Etiam ante nulla, consectetur in metus a, aliquet tristique elit. Phasellus mi lectus, venenatis non augue a, laoreet rhoncus odio. Suspendisse vel semper turpis, ac auctor nunc. Fusce congue erat felis. Sed finibus nulla enim, eu vestibulum lectus aliquam ut.
Duis eu diam sit amet orci euismod bibendum. In quis posuere odio. Nam dignissim pellentesque elit, vel imperdiet turpis pulvinar eu. Nunc scelerisque velit diam, ac luctus mauris aliquet a. Pellentesque at euismod nisl. Duis aliquam risus quis diam scelerisque pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<dia>— Des paroles.</dia>
Ut id nunc elit. Fusce ultricies non nisi id malesuada. Duis lobortis consequat ligula. Donec ac lectus posuere nisl malesuada congue vel sed nisl. Morbi pellentesque justo nec lacus consequat, nec hendrerit metus eleifend. In at ex ut turpis fringilla facilisis. Integer vitae lectus nisl. Integer at vestibulum libero.</txt></in></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,800&display=swap" rel="stylesheet"><style>.cyan_08 {display:block; width:420px; margin:0 auto; background:#121212; padding:10px; position:relative;}/*
*/.cyan_08 in {display:block; border:3px double #702963; padding:20px 0;}/*
*/.cyan_08 hh, .cyan_08 hh1, .cyan_08 hh2 {display:block; text-align:center; font-family: 'Open Sans', sans-serif; font-size:40px; text-transform:lowercase;}/*
*/.cyan_08 hh2 {padding:30px 0 20px; color:#702963; position:relative;}/*
*/.cyan_08 hh, .cyan_08 hh1 {position:absolute; width:400px; color:transparent;}/*
*/.cyan_08 hh {-webkit-text-stroke: 2px #0c0c0c; top:26px;}/*
*/.cyan_08 hh1 {-webkit-text-stroke: 3px #231520; top:46px;}/*
*/.cyan_08 txt {display:block; padding:40px; font-size:11px; color:#cccccc; line-height:16px;}/*
*/.cyan_08 divider {display:block; text-align:center; padding:25px 0 0;}/*
*/.cyan_08 divider img {width:200px;} /*
*/.cyan_08 dia {color:#702963;}</style>
#01 CHRONOLOGIE ;
Coucou les copains, j'arrive avec une chronologie toute simple. Pour la texture sur la bande à droite, je me suis servi des textures de transparenttextures et d'une couleur, c'est plus personnalisable et vous avez plus de choix. Ensuite, j'ai fais en sorte que vous puissiez modifier facilement les couleurs de chaque pastille, si vous souhaitez vous faire un petit code couleur, et idem pour la couleur de l'année !
Coucou les copains, j'arrive avec une chronologie toute simple. Pour la texture sur la bande à droite, je me suis servi des textures de transparenttextures et d'une couleur, c'est plus personnalisable et vous avez plus de choix. Ensuite, j'ai fais en sorte que vous puissiez modifier facilement les couleurs de chaque pastille, si vous souhaitez vous faire un petit code couleur, et idem pour la couleur de l'année !
- #01 CHRONOLOGIE:
- Code:
<div class="chrono_01"><bg><h1>Chronologie</h1><!--
--><div><p>Petite info de ce qu'il s'est passé et de comment ça s'est passé. Éventuellement accompagné d'un <a href="">lien</a></p><span style="background:#963a6b;"></span><em>00.00<br>[color=#963a6b]20xx[/color]</em></div><!--
--><div><p>Petite info de ce qu'il s'est passé et de comment ça s'est passé. Éventuellement accompagné d'un <a href="">lien</a></p><span style="background:#963a6b;"></span><em>00.00<br>[color=#963a6b]20xx[/color]</em></div><!--
--><hr><!--
--><div><p>Petite info de ce qu'il s'est passé et de comment ça s'est passé. Éventuellement accompagné d'un <a href="">lien</a></p><span style="background:#963a6b;"></span><em>00.00<br>[color=#963a6b]20xx[/color]</em></div><!--
--><div><p>Petite info de ce qu'il s'est passé et de comment ça s'est passé. Éventuellement accompagné d'un <a href="">lien</a></p><span style="background:#963a6b;"></span><em>00.00<br>[color=#963a6b]20xx[/color]</em></div><!--
--><hr><!--
--><div><p>Petite info de ce qu'il s'est passé et de comment ça s'est passé. Éventuellement accompagné d'un <a href="">lien</a></p><span style="background:#963a6b;"></span><em>00.00<br>[color=#963a6b]20xx[/color]</em></div><!--
--></bg><bd></bd></div><!--
--><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet"><!--
--><style>.chrono_01 {width:450px; margin:0 auto; position:relative; display:flex; background:#151413;} .chrono_01 bg, .chrono_01 bd {display:block;} .chrono_01 bg {width:350px;}.chrono_01 bd {width:100px; background:url('https://zupimages.net/up/21/14/41zq.png') #1c000f;} .chrono_01 h1 {font-family: 'Oswald', sans-serif; font-size: 27px; border-bottom:1px solid black; text-transform:uppercase; color:#963a6b; margin: 10px 18px 5px 10px; padding: 20px 10px 10px;} /*
*/.chrono_01 bg > div {display:flex; align-items:center; width:450px; position:relative; padding:10px 0;} .chrono_01 bg > div p {margin:0; width:322px; margin-left:10px; font-size:11px; text-align:justify; padding:10px; background:rgba(0,0,0,.3);} .chrono_01 bg > div span {width:16px; height:16px; border-radius:50%; margin:0 10px;} .chrono_01 bg > div em {width:72px; margin-right:10px; padding:5px; background:rgba(0,0,0,.8); line-height:13px; font-family: 'Oswald', sans-serif; font-style:normal;} .chrono_01 hr {border-top:1px solid black; margin:10px 18px 10px 10px;}</style>
J'vous écoute les copaings.
oh là là alors euh j'ai pas de commande à passer ou quoi mais je voulais juste dire que je trouve ces codes vraiment beaux ! genre ils sont simples mais pas trop simples, et vraiment élégants en plus.... je sais même pas lequel utiliser mon cerveau va exploser...
franchement c'est super ce que tu fais
franchement c'est super ce que tu fais
Oh. Merci mon petit chat, t'es un amour ! Ça me touche vraiment, vraiment beaucoup que tu sois venu me poster un petit message.
Je me permets de remonter le sujet parce qu'il y a eu un ajout ! ♪
Mais ??
Si j'avais vu ça avant j'aurais pas créé mon code tout caca là ! C'est super sympa ce que tu fais
Si j'avais vu ça avant j'aurais pas créé mon code tout caca là ! C'est super sympa ce que tu fais
Merci Cyan pour tes codes, ils sont splendides
Merci ça me touche beaucoup !