epsilon
forum de libre service de codage,
possibilité de commander des designs,
aucune inscription
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-22%
Le deal à ne pas rater :
Nike – Débardeur de running pour Femme
31 € 40 €
Voir le deal
Le Deal du moment : -25%
Promo sur APPLE Airpods 2 avec boitier de charge
Voir le deal
135 €

Sherlock
Sherlock
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
RENDU:
Fiche relationships 02 — Violin plucking source J5sk

fiche relationships 02

— violin plucking source —
Fiche technique
Version(s) des navigateurs : Chrome, Mozilla, Safari, Brave.
Dimensions : 600px de large et la hauteur s'adapte automatiquement.
Version(s) du forum : Toutes versions.
Couleurs proposées : Gris : #dadada | Rouge : #a03333 | Blanc : #f1f1f1 | Noir : #111
Police(s) utilisée(s) : Playfair Display SC et Lora.
Détail : Si vous voulez changer les couleurs et/ou les polices, vous n'avez qu'à remplacer les valeurs dans la partie "root" (donc ce genre de valeur : "Lora", serif; et #dadada), comme ça, tout va s'adapter automatiquement et pas besoin de remplacer tout ça un part un.

Vous pouvez ajouter autant d'informations que vous voulez (la partie avec le texte + la barre en dessous) ainsi que les images, la hauteur s'adapte automatiquement.

Me créditer n'est pas une option.
Sherlock | www.


Sherlock
Sherlock
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
PhpBB2 et ses copains :

Code:
<link href="https://fonts.googleapis.com/css2?family=Long+Cang&family=Open+Sans+Condensed:wght@300&family=Playfair+Display+SC:wght@400;700&display=swap" rel="stylesheet"><div class="VPS_relationships_background"> <div class="VPS_relationships_title"> <div>Prénom P. Nom de famille</div></div><div class="VPS_relationships_imgavatar"><img src="https://fakeimg.pl/300x200"/></div><div class="VPS_relationships_quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat laoreet erat vitae pulvinar. Etiam nec mi ut purus tincidunt finibus quis ut orci. Sed volutpat ligula vitae sodales faucibus. Cras euismod mi sed iaculis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel augue posuere, commodo quam gravida, iaculis nulla. Aliquam non neque venenatis, auctor purus at, fringilla ligula. Suspendisse ut metus libero. Aliquam tincidunt ipsum id leo congue malesuada. Vestibulum at massa quis ligula hendrerit lobortis. Aenean non dapibus nisi, eu porta mauris. Morbi fermentum ipsum a sollicitudin euismod. Aliquam convallis interdum nulla quis condimentum. Pellentesque ipsum arcu, sollicitudin eget erat non, maximus consectetur purus. Nam nibh enim, tincidunt ac justo quis, vestibulum elementum dui. Quisque tempus, nulla et commodo blandit, mi urna sodales velit, eget sollicitudin dolor tellus ut risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer malesuada luctus porta. Nunc mauris ante, varius eget quam non, tempus posuere libero. Curabitur arcu magna, dignissim sed condimentum sit amet, ornare vel ante. Proin ac iaculis leo, id malesuada augue. Donec vel faucibus metus. Sed velit nulla, fringilla a sem non, commodo lacinia lacus. Mauris quis malesuada ante, ac dignissim mauris. Vestibulum ut libero in orci feugiat pulvinar. Nunc purus nisl, dapibus ac ornare finibus, tincidunt ut felis. Donec accumsan ipsum eu ligula ultricies aliquet. Etiam vel justo et mi efficitur pellentesque non euismod nibh. Fusce volutpat laoreet consectetur. Aenean quis leo sit amet odio suscipit efficitur. In vestibulum ex consequat iaculis gravida. Etiam non erat a odio posuere scelerisque eu non magna. Sed nec laoreet nisl. Vestibulum porta lacus a justo pulvinar, eu iaculis libero ultricies. Vivamus laoreet sed ante ac tristique. Ut consectetur ultricies metus, vel ullamcorper odio vulputate sed.</div><div class="VPS_relationships_subtitle"> <div>Une quote sympa ici</div></div><div class="VPS_relationships_information"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices et mi consequat blandit. Cras at lectus dignissim turpis commodo mollis at eget enim. Praesent pharetra purus metus, sit amet faucibus nibh sodales et. Pellentesque eleifend sapien sit amet porttitor sodales. Fusce orci sem, condimentum eu condimentum a, convallis et eros. Nullam nibh massa, sagittis a nibh a, tincidunt ultricies neque. Mauris et iaculis felis. Nullam posuere aliquam nisl id congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id odio justo. Donec sit amet malesuada lorem. Donec dictum sem dolor, vel gravida libero aliquet sed. Nullam scelerisque metus in justo finibus blandit.</div><p>Petite information random ici</p><p>Petite information random ici</p><p>Petite information random ici</p></div><div class="VPS_relationships_imgadd"> <img src="https://fakeimg.pl/170x70"/> <img src="https://fakeimg.pl/170x70"/></div></div><div class="VPS_relationships_credit">Sherlock || <a target="_blank" href="https://epsilon-ls.forumactif.com/">www</a>.</div>

<style>:root{--font-titre: "Playfair Display SC", serif; --font-text: "Lora", serif; --couleur-principale: #dadada; --couleur-secondaire: #a03333; --troisieme-couleur: #f1f1f1; --font-color: #111;}.VPS_relationships_background{background-color: var(--couleur-principale); width: 600px; height: auto; padding: 10px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}.VPS_relationships_title{background-color: var(--couleur-secondaire); width: 580px; height: 100px; border: 10px var(--troisieme-couleur) solid; outline: 1px var(--couleur-secondaire) solid;}.VPS_relationships_title > div{font: 20px var(--font-titre); padding: 20px; color: var(--troisieme-couleur); margin: 0 auto; width: 500px; border-bottom: 1px var(--troisieme-couleur) solid; height: 20px; text-align: center;}.VPS_relationships_imgavatar{width: 300px; height: 200px; border: 1px var(--troisieme-couleur) solid; padding: 5px; margin: 10px 0;}.VPS_relationships_imgavatar > img{width: 300px; height: 200px; object-fit: cover;}.VPS_relationships_quote{width: 250px; height: 212px; overflow: auto; padding: 0 10px; border-left: 10px var(--couleur-secondaire) solid; margin: 10px 0; font: 12px var(--font-text); text-align: justify;}.VPS_relationships_subtitle{width: 600px; height: 80px; border-bottom: 10px var(--troisieme-couleur) solid;}.VPS_relationships_subtitle > div{font: 20px var(--font-titre); padding: 20px; color: var(--couleur-secondaire); margin: 0 auto; width: 500px; border-bottom: 1px var(--troisieme-couleur) solid; height: 20px; text-align: center;}.VPS_relationships_information{width:400px; height:auto; margin:10px 0 0 0;}.VPS_relationships_information > div{width:380px; height:50px; background-color:var(--troisieme-couleur); border-radius:10px; overflow:auto; font:12px var(--font-text); text-align:justify; padding:10px;}.VPS_relationships_information > p{font:12px var(--font-text); border-bottom:1px var(--couleur-secondaire) solid; padding-bottom:5px; width:400px;}.VPS_relationships_imgadd{width:190px; height:auto; margin:10px 0 0 0;}.VPS_relationships_imgadd > img{margin:0 10px 5px; width:170px; height:70px; object-fit:cover; border:5px var(--troisieme-couleur) solid;}.VPS_relationships_credit{font:12px var(--font-text); color:var(--font-color); width:600px; margin:5px auto; text-align:center;}.VPS_relationships_credit a{color:var(--couleur-secondaire); text-decoration:none;}</style>
Sherlock
Sherlock
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
ModernBB & AwesomeBB :

Code:
<link href="https://fonts.googleapis.com/css2?family=Long+Cang&family=Open+Sans+Condensed:wght@300&family=Playfair+Display+SC:wght@400;700&display=swap" rel="stylesheet"><div class="VPS_relationships_background"> <div class="VPS_relationships_title"> <div>Prénom P. Nom de famille</div></div><div class="VPS_relationships_imgavatar"><img src="https://fakeimg.pl/300x200"/></div><div class="VPS_relationships_quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat laoreet erat vitae pulvinar. Etiam nec mi ut purus tincidunt finibus quis ut orci. Sed volutpat ligula vitae sodales faucibus. Cras euismod mi sed iaculis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel augue posuere, commodo quam gravida, iaculis nulla. Aliquam non neque venenatis, auctor purus at, fringilla ligula. Suspendisse ut metus libero. Aliquam tincidunt ipsum id leo congue malesuada. Vestibulum at massa quis ligula hendrerit lobortis. Aenean non dapibus nisi, eu porta mauris. Morbi fermentum ipsum a sollicitudin euismod. Aliquam convallis interdum nulla quis condimentum. Pellentesque ipsum arcu, sollicitudin eget erat non, maximus consectetur purus. Nam nibh enim, tincidunt ac justo quis, vestibulum elementum dui. Quisque tempus, nulla et commodo blandit, mi urna sodales velit, eget sollicitudin dolor tellus ut risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer malesuada luctus porta. Nunc mauris ante, varius eget quam non, tempus posuere libero. Curabitur arcu magna, dignissim sed condimentum sit amet, ornare vel ante. Proin ac iaculis leo, id malesuada augue. Donec vel faucibus metus. Sed velit nulla, fringilla a sem non, commodo lacinia lacus. Mauris quis malesuada ante, ac dignissim mauris. Vestibulum ut libero in orci feugiat pulvinar. Nunc purus nisl, dapibus ac ornare finibus, tincidunt ut felis. Donec accumsan ipsum eu ligula ultricies aliquet. Etiam vel justo et mi efficitur pellentesque non euismod nibh. Fusce volutpat laoreet consectetur. Aenean quis leo sit amet odio suscipit efficitur. In vestibulum ex consequat iaculis gravida. Etiam non erat a odio posuere scelerisque eu non magna. Sed nec laoreet nisl. Vestibulum porta lacus a justo pulvinar, eu iaculis libero ultricies. Vivamus laoreet sed ante ac tristique. Ut consectetur ultricies metus, vel ullamcorper odio vulputate sed.</div><div class="VPS_relationships_subtitle"> <div>Une quote sympa ici</div></div><div class="VPS_relationships_information"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices et mi consequat blandit. Cras at lectus dignissim turpis commodo mollis at eget enim. Praesent pharetra purus metus, sit amet faucibus nibh sodales et. Pellentesque eleifend sapien sit amet porttitor sodales. Fusce orci sem, condimentum eu condimentum a, convallis et eros. Nullam nibh massa, sagittis a nibh a, tincidunt ultricies neque. Mauris et iaculis felis. Nullam posuere aliquam nisl id congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id odio justo. Donec sit amet malesuada lorem. Donec dictum sem dolor, vel gravida libero aliquet sed. Nullam scelerisque metus in justo finibus blandit.</div><p>Petite information random ici</p><p>Petite information random ici</p><p>Petite information random ici</p></div><div class="VPS_relationships_imgadd"> <img src="https://fakeimg.pl/180x70"/> <img src="https://fakeimg.pl/180x70"/></div></div><div class="VPS_relationships_credit">Sherlock || <a target="_blank" href="https://epsilon-ls.forumactif.com/">www</a>.</div>

<style>:root{--font-titre: "Playfair Display SC", serif; --font-text: "Lora", serif; --couleur-principale: #dadada; --couleur-secondaire: #a03333; --troisieme-couleur: #f1f1f1; --font-color: #111;}.VPS_relationships_background{background-color: var(--couleur-principale); width: 600px; height: auto; padding: 10px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}.VPS_relationships_title{background-color: var(--couleur-secondaire); width: 580px; height: 110px; border: 10px var(--troisieme-couleur) solid; outline: 1px var(--couleur-secondaire) solid;}.VPS_relationships_title > div{font: 20px var(--font-titre); padding: 20px; color: var(--troisieme-couleur); margin: 0 auto; width: 500px; border-bottom: 1px var(--troisieme-couleur) solid; height: 55px; text-align: center;}.VPS_relationships_imgavatar{width: 320px; height: 200px; padding: 5px; margin: 10px 0;}.VPS_relationships_imgavatar > img{width: 310px; height: 205px; object-fit: cover; border: 5px var(--troisieme-couleur) solid;}.VPS_relationships_quote{width: 250px; height: 212px; overflow: auto; padding: 0 10px; border-left: 10px var(--couleur-secondaire) solid; margin: 10px 0; font: 12px var(--font-text); text-align: justify;}.VPS_relationships_subtitle{width: 600px; height: 80px; border-bottom: 10px var(--troisieme-couleur) solid;}.VPS_relationships_subtitle > div{font: 20px var(--font-titre); padding: 20px; color: var(--couleur-secondaire); margin: 0 auto; width: 500px; border-bottom: 1px var(--troisieme-couleur) solid; height: 55px; text-align: center;}.VPS_relationships_information{width:380px; height:auto; margin:10px 0 0 0;}.VPS_relationships_information > div{width:380px; height:50px; background-color:var(--troisieme-couleur); border-radius:10px; overflow:auto; font:12px var(--font-text); text-align:justify; padding:10px;}.VPS_relationships_information > p{font:12px var(--font-text); border-bottom:1px var(--couleur-secondaire) solid; padding-bottom:5px; width:380px; margin: 10px 0;}.VPS_relationships_imgadd{width:190px; height:auto; margin:10px 0 0 0;}.VPS_relationships_imgadd > img{margin:0 10px 5px; width:180px; height:70px; object-fit:cover; border:5px var(--troisieme-couleur) solid;}.VPS_relationships_credit{font:12px var(--font-text); color:var(--font-color); width:600px; margin:5px auto; text-align:center;}.VPS_relationships_credit a{color:var(--couleur-secondaire); text-decoration:none;}</style>
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum