[FICHE DE PRESENTATION AVEC IMAGE]

Jawn

The relations between us in those latter days were peculiar.

# [FICHE DE PRESENTATION AVEC IMAGE] - Dim 7 Mar - 21:19

[FICHE DE PRESENTATION AVEC IMAGE] YUMTvOK

Code:: <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet"/><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/><div class="ls_fiche_prez"> <div class="ls_prez_img"><img src="https://imgur.com/woTAEMh.png"/></div><div class="ls_prez_name">John H. watson</div><div class="ls_prez_txt"> <h1>caractéristiques</h1> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida lobortis odio, eu egestas felis auctor mattis. Sed elementum convallis sapien, vitae lobortis enim viverra id. Pellentesque ornare sapien nisl, ut porttitor risus hendrerit ac. Cras pulvinar in mi et finibus. Phasellus sollicitudin leo at libero elementum cursus. Suspendisse sed sagittis ligula. Sed non nisl ante. Vivamus dui urna, finibus vel finibus ac, luctus sed nisi. Integer hendrerit id metus id pharetra. Duis et lorem ultricies, feugiat diam sit amet, varius nibh. Nullam tortor elit, accumsan ut aliquam ac, dapibus quis lacus. Nunc pretium a dolor ut ornare. Nunc tincidunt velit quis lorem fermentum lobortis. Proin interdum augue vel ex elementum egestas. Aenean gravida magna ac lectus venenatis luctus. Donec ac blandit tellus, non sagittis augue. Sed accumsan tempor molestie. </div><div class="ls_prez_cent_img"> <img src="https://imgur.com/i0UIrNg.png"/> <img src="https://imgur.com/i0UIrNg.png"/> <img src="https://imgur.com/i0UIrNg.png"/> </div><h1>this is your story</h1> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida lobortis odio, eu egestas felis auctor mattis. Sed elementum convallis sapien, vitae lobortis enim viverra id. Pellentesque ornare sapien nisl, ut porttitor risus hendrerit ac. Cras pulvinar in mi et finibus. Phasellus sollicitudin leo at libero elementum cursus. Suspendisse sed sagittis ligula. Sed non nisl ante. Vivamus dui urna, finibus vel finibus ac, luctus sed nisi. Integer hendrerit id metus id pharetra. Duis et lorem ultricies, feugiat diam sit amet, varius nibh. Nullam tortor elit, accumsan ut aliquam ac, dapibus quis lacus. Nunc pretium a dolor ut ornare. Nunc tincidunt velit quis lorem fermentum lobortis. Proin interdum augue vel ex elementum egestas. Aenean gravida magna ac lectus venenatis luctus. Donec ac blandit tellus, non sagittis augue. Sed accumsan tempor molestie. </div></div></div><div class="ls_prez_cred"><a target="_blank" href="https://somuchgravity.forumsrpg.com/">Jawn</a></div> <style>.ls_fiche_prez{width: 500px; margin: 20px auto 0px auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; background-image: url(https://imgur.com/3TTyhzL.png); background-size: 100%; background-position: 50% 50%; height: 450px; box-shadow: 6px 6px 1px #ccc;}.ls_prez_img{width: 325px; overflow: hidden; transition: all 800ms; position: absolute; margin: -40px 0px 0px -200px; z-index: 99;}.ls_prez_img img{width: 100%; filter: grayscale(100%); transition: all 800ms;}.ls_prez_img img:hover{transition: all 800ms; filter: grayscale(0%);}.ls_prez_name{text-transform: lowercase; letter-spacing: 0.5px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; font: 40px Abril Fatface; color: #ccc; text-shadow: -4px -4px 1px black; margin: 19px 0px 0px 20px; position: relative; z-index: 9; height: 100%;}.ls_prez_txt{width: 370px; background-image: url(https://imgur.com/CXYcMtc.png); padding: 20px; margin: 20px 20px 0px 0px; height: 390px; overflow: auto; position: relative; z-index: 9;}.ls_prez_txt h1{text-align: right; text-transform: lowercase; font: 30px Abril Fatface; color: #454545; border-bottom: 10px solid #ccc; line-height: 10px;}.ls_prez_txt div{margin: 10px 0px; text-align: justify; font: 11px Roboto; color: black;}.ls_prez_cent_img{transition: all 800ms; text-align: center !important; margin: 20px 0px !important;}.ls_prez_cent_img img{width: 80px; margin: 0px 5px; transition: all 800ms;}.ls_prez_cent_img img:hover{transition: all 800ms; filter: grayscale(100%); cursor: grab;}.ls_prez_cred{text-align: right; width: 500px; margin: 0 auto;}.ls_prez_cred a{font: 15px Abril Fatface; text-transform: lowercase; color: #ccc;}</style>

Sauter vers:

Permission de ce forum:

Vous ne pouvez pas répondre aux sujets dans ce forum