Fiche random

                        <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>