void_invaders

Lun 6 Mai 2024 - 21:12

Fiche RP#2

Maquette : KoalaVolant
Code : void_invaders
Dimensions : 600px de large pour 800px de haut, scrollbar cachée mais fonctionnelle
Polices : Mina pour la citation et le feat, Roboto pour le texte

~~Merci de laisser les crédits et de ne pas toucher au code en dehors des couleurs, des polices et des images~~

void_invaders

❝ Before you criticize someone, you should walk a mile in their shoes. That way when you criticize them, you are a mile away from them and you have their shoes. ❞

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis erat in mi iaculis, vitae mollis dui vulputate. Aliquam non felis quis nunc semper malesuada eget vulputate diam. Sed in ligula nec tellus iaculis mattis vel nec metus. Maecenas et nisl nibh. Nulla vitae massa a arcu gravida laoreet sed vel neque. Suspendisse faucibus cursus lobortis. Ut cursus ex at arcu ultricies, nec varius justo vestibulum. Nulla tristique, libero quis tincidunt vehicula, diam enim ultrices sapien, ut vestibulum sapien eros at sapien. In eget dictum felis. Nulla ut consequat lorem. Quisque a est dignissim, volutpat lorem vitae, tempor purus. Integer molestie ornare consequat. Nulla eu aliquet nulla, ut accumsan lacus.

Ut accumsan dui nec ante dapibus elementum. Nulla tellus ex, egestas volutpat lectus ut, elementum pellentesque risus. Nullam ac pellentesque turpis. Proin convallis orci arcu. Sed cursus, nisi eu efficitur maximus, purus dui gravida nulla, sit amet iaculis arcu orci in quam. Curabitur sed sem elementum, euismod nibh non, pretium urna. Nunc viverra erat a magna hendrerit, eu iaculis lectus imperdiet. Nam sed lacus placerat, condimentum lacus finibus, porttitor sem. Mauris mollis, turpis nec dignissim varius, augue nunc sagittis magna, consequat blandit ex diam vel eros.

Nam luctus diam vel enim mollis, sit amet eleifend magna vestibulum. In hac habitasse platea dictumst. Vivamus luctus gravida maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam mattis justo vel sapien accumsan, non finibus ex congue. Sed vel mi nec turpis gravida posuere. Praesent ac fermentum elit, in gravida mauris. Vivamus ultrices ut nisi eu euismod. Proin vestibulum risus eget lorem fermentum tempus. Fusce tempor nunc et lacus fermentum, sit amet pulvinar neque aliquet. Vestibulum rutrum accumsan massa, sit amet ornare urna eleifend at. Fusce commodo consectetur dolor a commodo. Ut cursus suscipit augue commodo fringilla. Aliquam ut mauris condimentum, ornare urna a, hendrerit turpis. Praesent nec accumsan justo. Integer justo enim, commodo id sem vel, elementum rhoncus quam.

Vestibulum sed sodales diam. Donec venenatis magna ut ipsum semper dapibus vel id libero. Cras elit risus, malesuada eu mi hendrerit, accumsan imperdiet lorem. Ut in finibus urna. Suspendisse potenti. Fusce sed metus leo. Sed fringilla cursus cursus. Curabitur et varius massa, vitae tincidunt nibh. Aliquam rutrum eleifend turpis, sed lobortis sem rhoncus interdum. Sed bibendum justo eget arcu placerat porta. Vestibulum sit amet sem cursus, eleifend turpis et, semper dolor.

Donec posuere rutrum tortor, sit amet porta ex pellentesque sit amet. Cras aliquet turpis sit amet tellus aliquet varius. Sed posuere elit et nisl iaculis, quis eleifend diam egestas. Pellentesque vehicula a quam eget vulputate. Etiam molestie semper metus et mattis. Proin mauris magna, mattis id urna pretium, tempor eleifend arcu. Aenean eleifend fringilla dolor in scelerisque. Sed maximus metus vitae quam tempus, dapibus ornare nisi fringilla. Maecenas sit amet accumsan sapien, non efficitur ante. Nullam eget nunc ligula. Donec at dolor ac ipsum pulvinar pharetra id non risus. Morbi eleifend, augue id vestibulum ullamcorper, purus enim feugiat orci, at accumsan elit purus non diam. Donec semper nunc id pretium consequat. Phasellus blandit tellus non facilisis imperdiet.

Feat. Luciano & Zanzibar

KoalaVolant & void_invaders ▬ Pisrale

Je vous propose ci-dessous deux versions du code :

- La première version se suffit à elle-même, mais le CSS n'est pas modifiable car la feuille de style est importé directement via la balise <link>, qui permet d'intégrer une feuille de style externe au forum. Cette version s'adresse aux moins expérimentés qui n'ont pas accès à la feuille de style CSS du forum et qui ne ressentent pas le besoin de personnaliser le code.

- La seconde version contient une balise <style> dans laquelle vous retrouvez tout le CSS utilisé. C'est dans cette balise que vous pourrez modifier les couleurs et les polices. Cette version s'adresse aux personnes comprenant un peu le fonctionnement du CSS et qui souhaitent pouvoir personnaliser le code.

void_invaders

HTML AVEC FEUILLE DE STYLE IMPORTÉE (non modifiable) :

Code:: <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/6t2ur15j6xbwbcl/commandes.css"><div class="RPKV2"><div class="RPKV2_head">❝ ÉCRIRE CITATION OU TITRE ICI ❞</div><div class="RPKV2_img"><div><img src="URL IMAGE OU GIF 150*90"/></div><div><img src="URL IMAGE OU GIF 150*90"/></div><div><img src="URL IMAGE OU GIF 150*90"/></div></div><div class="RPKV2_txt">ÉCRIRE LE RP ICI</div><div class="RPKV2_foot">ÉCRIRE FEAT. ICI</div><div class="RPKV2_cred">KoalaVolant & void_invaders ▬ <a href="https://pisrale.forumactif.com/">Pisrale</a></div></div>

HTML AVEC CSS INTÉGRÉ (modifiable) :

Code:: <style>@import url('https://fonts.googleapis.com/css2?family=Mina:wght@400;700&display=swap'); .RPKV2 {margin: auto; width: 600px; background-color: #fff; display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 15px 15px 5px; font-family: "Mina", sans-serif;} .RPKV2_head {width: 100%; text-align: center; background: linear-gradient(to right, rgb(64 224 208 / 90%), rgb(255 140 0 / 70%), rgb(255 0 128 / 70%)); border-radius: 10px; padding: 30px; font-size: 20px; color: #fff;} .RPKV2_img {z-index: 0; width: 100%; display: flex; justify-content: space-around; padding: 0 10px;} .RPKV2_img div {position: relative; z-index: 0; width: 150px; height: 90px;} .RPKV2_img div::after {position: relative; z-index: 2; content: ""; display: block; width: 150px; height: 90px; outline: 1px solid #fff; outline-offset: -10px; border-radius: 40px;} .RPKV2_img img {position: absolute; z-index: 1; width: 150px; height: 90px; border-radius: 10px;} .RPKV2_txt {height: 450px; font-size: 14px; font-family: 'Roboto', sans-serif; text-align: justify; padding: 0 10px; overflow: auto; scrollbar-width: none;} .RPKV2_foot {width: 100%; background: linear-gradient(to right, rgb(64 224 208 / 90%), rgb(255 140 0 / 70%), rgb(255 0 128 / 70%)); border-radius: 20px; font-size: 16px; font-weight: lighter; text-align: center; padding: 7px 0 5px; color: #fff; letter-spacing: 10px;} .RPKV2_cred {padding-bottom: 10px; font-size: 10px; text-transform: uppercase; color: rgb(163, 163, 163);} .RPKV2_cred a {text-decoration: none; font-weight: bolder; color: rgb(64 224 208);}</style><div class="RPKV2"><div class="RPKV2_head">❝ ÉCRIRE CITATION OU TITRE ICI ❞</div><div class="RPKV2_img"><div><img src="URL IMAGE OU GIF 150*90"/></div><div><img src="URL IMAGE OU GIF 150*90"/></div><div><img src="URL IMAGE OU GIF 150*90"/></div></div><div class="RPKV2_txt">ÉCRIRE LE RP ICI</div><div class="RPKV2_foot">ÉCRIRE FEAT. ICI</div><div class="RPKV2_cred">KoalaVolant & void_invaders ▬ <a href="https://pisrale.forumactif.com/">Pisrale</a></div></div>

Sujets similaires

3 gifs + Titre + feat. ▬ #2 KoalaVolant & void_invaders

Pisrale :: Codages :: Personnage :: Réponses rps

Nos amis proches

3 gifs + Titre + feat. ▬ #2 KoalaVolant & void_invaders Parto512