1 Favori
VIP depuis le 06/03/2020
Galad-El le 12 Mar 2021 à 17h53

Aussitôt dit aussitôt recyclé, voici une petite fiche pour Equideow ! Le codage sur ce site étant ce qu'il est j'ai dû revoir mes idées à la baisse, du coup ça n'est pas spécialement intéressant comme design (mais il faut bien que je remplisse mes LS) !

HTML

<div style="width: 850px; height: 600px; overflow: hidden; background-image: url('https://www.wyvartem.fr/python/media/images/pervenche.png'); margin: 0 auto; font-family: 'Arial', sans-serif; font-size: 12px;">

<div style="background-color: white; padding: 10px; text-transform: uppercase; letter-spacing: 2px; color: #268cc4; text-align: right; max-height: 15px; overflow: hidden;">
| <a style="color: #35125d; text-decoration: none;" href="">Lien</a>
| <a style="color: #35125d; text-decoration: none;" href="">Lien</a>
| <a style="color: #35125d; text-decoration: none;" href="">Lien</a>
| <a style="color: #35125d; text-decoration: none;" href="">Lien</a>
| <a style="color: #35125d; text-decoration: none;" href="">Lien</a>
</div>


<div style="height: 565px; overflow: auto; width: 860px; border-left: 2px solid white;">


<div style="width: 400px; margin-right: 0; margin-left: auto; height: auto; margin-top: 250px;">
<div style="background-image: url('https://www.zupimages.net/up/20/14/pjqu.png'); font-size: 20px; color: white; font-family: 'Times New Roman', serif; font-variant: small-caps; letter-spacing: 3px;">
<div style="padding: 10px;">Titre de la zone</div>
<div style="width: 50px; height: 3px; background-color: #35125d;; margin-left: 10px;"></div>
</div>
<div style="background-color: white; padding: 25px; line-height: 20px; text-align: justify; padding-right: 50px;">Vel et odio eveniet eum consequuntur velit et explicabo. Quis reiciendis voluptas optio illum cumque ut. Neque dolores sunt blanditiis.

Similique aperiam occaecati voluptatibus facilis incidunt nam dolorum. Incidunt deserunt itaque autem aspernatur iusto pariatur reiciendis voluptatem. Pariatur doloremque corrupti autem enim aut maiores modi quisquam. Eligendi sed saepe dolore consequatur. Et expedita et dolorem veniam in sint.

Voluptatem minima harum et animi commodi voluptas nemo distinctio. Enim ipsa et suscipit ducimus. Quia officia et sunt qui rerum officiis. Optio ut velit quo. Voluptas et quod sed.

</div>
</div>

<div style="width: 400px; margin-right: 0; margin-left: auto; height: auto; margin-top: 25px;">
<div style="background-image: url('https://www.zupimages.net/up/20/14/pjqu.png'); font-size: 20px; color: white; font-family: 'Times New Roman', serif; font-variant: small-caps; letter-spacing: 3px;">
<div style="padding: 10px;">Titre de la zone</div>
<div style="width: 50px; height: 3px; background-color: #35125d;; margin-left: 10px;"></div>
</div>
<div style="background-color: white; padding: 25px; line-height: 20px; text-align: justify; padding-right: 50px;">Vel et odio eveniet eum consequuntur velit et explicabo. Quis reiciendis voluptas optio illum cumque ut. Neque dolores sunt blanditiis.

Similique aperiam occaecati voluptatibus facilis incidunt nam dolorum. Incidunt deserunt itaque autem aspernatur iusto pariatur reiciendis voluptatem. Pariatur doloremque corrupti autem enim aut maiores modi quisquam. Eligendi sed saepe dolore consequatur. Et expedita et dolorem veniam in sint.

Voluptatem minima harum et animi commodi voluptas nemo distinctio. Enim ipsa et suscipit ducimus. Quia officia et sunt qui rerum officiis. Optio ut velit quo. Voluptas et quod sed.

</div>
</div>

<div style="width: 400px; margin-right: 0; margin-left: auto; height: auto; margin-top: 25px;">
<div style="background-image: url('https://www.zupimages.net/up/20/14/pjqu.png'); font-size: 20px; color: white; font-family: 'Times New Roman', serif; font-variant: small-caps; letter-spacing: 3px;">
<div style="padding: 10px;">Titre de la zone</div>
<div style="width: 50px; height: 3px; background-color: #35125d;; margin-left: 10px;"></div>
</div>
<div style="background-color: white; padding: 25px; line-height: 20px; text-align: justify; padding-right: 50px;">Vel et odio eveniet eum consequuntur velit et explicabo. Quis reiciendis voluptas optio illum cumque ut. Neque dolores sunt blanditiis.

Similique aperiam occaecati voluptatibus facilis incidunt nam dolorum. Incidunt deserunt itaque autem aspernatur iusto pariatur reiciendis voluptatem. Pariatur doloremque corrupti autem enim aut maiores modi quisquam. Eligendi sed saepe dolore consequatur. Et expedita et dolorem veniam in sint.

Voluptatem minima harum et animi commodi voluptas nemo distinctio. Enim ipsa et suscipit ducimus. Quia officia et sunt qui rerum officiis. Optio ut velit quo. Voluptas et quod sed.

</div>
</div>

<div style="text-align: right; margin: 15px 10px; font-style: italic;">
<a style="color: white; text-decoration: none;" href="https://ouranos.equideow.com/joueur/fiche/?id=30036342">Fiche HTML de Jalisca I</a>
</div>

</div>


</div>

CSS

body {
margin: 0;
padding: 0;
}

Commentaires

Avatar de Zukki
VIP depuis le 14/03/2020
Zukki le 13 Mar 2021 à 07h34
Recyclage

Ca fait une jolie fiche ! :3

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.