2 Favoris
VIP depuis le 06/03/2020
Galad-El le 10 Fév 2021 à 12h36

Un ptit code rapide histoire d'essayer de faire quelques fiches de temps en temps XD En LS mais franchement pas très intéressante donc n'hésitez pas à modifier le code ^^

HTML

<style>
body {
--orange: #c95f1e;
--noir: #1c191c;
margin: 0;
font-family: 'Arial', sans-serif;
color: var(--noir);
}

.fiche {
background-color: black;
height: 470px;
background-image: url('https://www.wyvartem.fr/python/media/images/morteterre.png');
background-size: cover;
background-position: center;
overflow: hidden;
}

.content {
height: 100%;
width: 100%;
overflow: auto;
box-sizing: border-box;
border: 20px solid var(--noir);
}

nav {
position: fixed;
width: calc(100% - 40px);
}

nav ul {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
justify-content: flex-end;
}

nav li {
padding: 5px 10px;
margin: 0 5px;
border-bottom: 2px solid #c95f1e;
background-color: #1c191cab;
position: relative;
border-radius: 0 0 5px 5px;
}

nav li::after {
content: '';
width: 100%;
height: 0;
position: absolute;
left: 0;
bottom: 0;
background-color: #c95f1e;
transition: height 0.3s ease-in;
}

nav li:hover::after {
height: 100%;
}

nav li:hover
{
cursor: pointer;
color: black !important;
}

nav li a {
position: relative;
z-index: 2;
color: var(--orange);
text-decoration: none;
font-size: 0.8rem;
letter-spacing: 1px;
}

nav li a::after, nav li a::before {
content: ' ♦ ';
opacity: 0.3;
}

nav li:hover a {
color: var(--noir);
transition: color 0.3s ease-in;
}

.texte {
max-width: 400px;
max-height: 300px;
overflow: hidden;
margin-left: 50px;
margin-top: 70px;
font-size: 0.85rem;
text-align: justify;
line-height: 1.3rem;
background-color: rgba(38,28,28,0.5);
color: rgba(235,170,50);
}

.texte p {
width : calc(100% + 13px);
height: 300px;
overflow: auto;
padding: 20px;
box-sizing: border-box;
margin: 0;
}</style>

<div class="fiche">
<div class="content">
<nav>
<ul>
<li><a href="">Lien</a></li>
<li><a href="">Lien plus grand</a></li>
<li><a href="">Dernier lien</a></li>
</ul>
</nav>

<div class="texte">
<p>
Debitis quas dolores modi itaque est reiciendis deserunt error. Et unde nam iusto eius. Dignissimos illum omnis numquam consectetur magnam. Totam provident corrupti aut maxime facilis occaecati architecto. Aut ut facilis quos sint laborum dolorem enim. Tenetur quisquam repellat blanditiis molestiae voluptas omnis.

Voluptate rerum quis rerum non sunt magnam necessitatibus nulla. Sit optio iusto ut est provident. Molestiae pariatur alias ut. Velit ex et placeat. Et delectus provident qui sit perspiciatis. Quia unde facere ut.

Dolore inventore quidem asperiores blanditiis. Atque quia illo ut non. Nulla quibusdam fugiat maiores dolor aut. Eos aut ut aut sed dignissimos ad ut. Nihil dolor voluptatem dolorem exercitationem. Reiciendis impedit voluptas ad aut.

Nostrum quo aliquam necessitatibus voluptate tenetur dolorum. Consequuntur et et velit eos labore deleniti. Voluptate maiores consequuntur similique voluptatem laudantium. Aperiam voluptatum error eaque et ut sequi. Sit non aut qui delectus. Esse quis enim ratione odio itaque.

Facere quas ea est corrupti laborum ipsum. Culpa reiciendis praesentium similique mollitia omnis esse unde. In in ratione ea provident deserunt assumenda temporibus error.
</p>
</div>
</div>
</div>

Commentaires

Avatar de Yamazakura
Yamazakura le 10 Fév 2021 à 15h39
Elle n'en reste pas moins joli ! J'aime beaucoup ^^
Avatar de Alek
Alek le 10 Fév 2021 à 20h08
J'aime beaucoup les couleurs de cette fiche nomnom
Avatar de Serah
Serah le 15 Fév 2021 à 17h00
Ta fiche n'en reste pas moins efficace et très jolie !
Page :

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