Fiche de Présentation #1

Codes

Code:

<div class="content_fichepresa"> <div class="entete_presa"><img src="https://zupimages.net/up/19/48/bs8z.jpg" alt="image_fiche"/><h1> <strong>Prénom</strong> Nom <span>citation trop dark</span></h1></div><div class="infos_perso">#âge #situation maritale #date de naissance #métier #orientation sexuelle #nationalité #groupe</div><div class="block_phy_ca"><h2>#Physique</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis congue sagittis. Mauris in metus suscipit, congue magna et, tristique turpis. In et ante lacus. Sed pellentesque, sem eleifend hendrerit eleifend, nibh ante faucibus sem, sit amet cursus nunc ante eu neque. Cras euismod, augue et varius imperdiet, nulla massa iaculis felis, nec congue neque nunc quis dolor. Sed auctor nunc tempus odio malesuada, eget egestas leo blandit. Aenean non lacus magna. Nulla ac dui est. Morbi ullamcorper feugiat enim vitae blandit. Duis a placerat est, vehicula tristique nibh. Nullam nec tincidunt felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla blandit commodo dapibus. Suspendisse potenti. Integer ornare neque quis nulla malesuada, ullamcorper pharetra odio tempor.Sed quis posuere ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae feugiat massa. Praesent consequat odio magna, quis consequat nisi vulputate a. Suspendisse potenti. Mauris et diam vehicula, hendrerit lectus vel, fermentum diam. Mauris ac risus eu lectus sagittis interdum. Quisque interdum nibh vitae tellus aliquam dignissim.</p></div><div class="block_phy_ca"><h2>#Caractère</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis congue sagittis. Mauris in metus suscipit, congue magna et, tristique turpis. In et ante lacus. Sed pellentesque, sem eleifend hendrerit eleifend, nibh ante faucibus sem, sit amet cursus nunc ante eu neque. Cras euismod, augue et varius imperdiet, nulla massa iaculis felis, nec congue neque nunc quis dolor. Sed auctor nunc tempus odio malesuada, eget egestas leo blandit. Aenean non lacus magna. Nulla ac dui est. Morbi ullamcorper feugiat enim vitae blandit. Duis a placerat est, vehicula tristique nibh. Nullam nec tincidunt felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla blandit commodo dapibus. Suspendisse potenti. Integer ornare neque quis nulla malesuada, ullamcorper pharetra odio tempor.Sed quis posuere ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae feugiat massa. Praesent consequat odio magna, quis consequat nisi vulputate a. Suspendisse potenti. Mauris et diam vehicula, hendrerit lectus vel, fermentum diam. Mauris ac risus eu lectus sagittis interdum. Quisque interdum nibh vitae tellus aliquam dignissim.</p></div><div class="block_history"><h2>#Histoire</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis congue sagittis. Mauris in metus suscipit, congue magna et, tristique turpis. In et ante lacus. Sed pellentesque, sem eleifend hendrerit eleifend, nibh ante faucibus sem, sit amet cursus nunc ante eu neque. Cras euismod, augue et varius imperdiet, nulla massa iaculis felis, nec congue neque nunc quis dolor. Sed auctor nunc tempus odio malesuada, eget egestas leo blandit. Aenean non lacus magna. Nulla ac dui est. Morbi ullamcorper feugiat enim vitae blandit. Duis a placerat est, vehicula tristique nibh. Nullam nec tincidunt felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla blandit commodo dapibus. Suspendisse potenti. Integer ornare neque quis nulla malesuada, ullamcorper pharetra odio tempor.Sed quis posuere ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae feugiat massa. Praesent consequat odio magna, quis consequat nisi vulputate a. Suspendisse potenti. Mauris et diam vehicula, hendrerit lectus vel, fermentum diam. Mauris ac risus eu lectus sagittis interdum. Quisque interdum nibh vitae tellus aliquam dignissim.Duis cursus, ipsum a tempus fringilla, metus magna pharetra purus, ac mollis sem ante ut dui. Nullam ac facilisis massa. Curabitur blandit purus nisi, ut tincidunt augue laoreet ut. Nullam pulvinar tincidunt sapien et mattis. Donec aliquam mi ac dignissim mattis. Fusce et bibendum sem. Etiam ut tortor orci. Maecenas fermentum rutrum ex, at semper velit egestas sit amet. Phasellus consectetur mauris ac metus tincidunt bibendum.</p></div><div class="infos_member"><img src="https://via.placeholder.com/75"/ alt="icone_membre"> <p>Pseudo : écrire ici
Âge : écrire ici
Comment as-tu connu le forum ? : écrire ici
Fréquence de connexion : écrire ici
Code du règlement: écrire ici
Autres : écrire ici</p></div><div class="credits_arte">artemis | <a href="https://artifices.forumactif.com/">www</a></div></div>
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400|Source+Sans+Pro&display=swap" rel="stylesheet"/>

Code:

/* fiche de presentation | artemis pour epicode et artifices */

:root {--color-background: #46335c;
}

.content_fichepresa {
  width: 550px;
  height: 810px;
  position: relative;
  margin: auto;
  background: #c2c0c3;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  border-top: 8px solid var(--color-background);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.entete_presa {
  width: 550px;
  height: 215px;
  position: relative;
  margin: -15px;
  overflow: hidden;
 background: -webkit-gradient(linear, left top, left bottom, from(#534487), to(#9939b5));
 background: -o-linear-gradient(#534487, #9939b5);
 background: linear-gradient(#534487, #9939b5);
  
  
}

.entete_presa img {
  width: 550px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.4;
  position: relative;
  z-index: 0;
}

.entete_presa h1 {
  width: 550px;
  height: 215px;
  margin: 0;
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 110px;
  top: 0;
  left: 0;
  z-index: 99;
  font: 30px montserrat;
  text-transform: uppercase;
  color: white;
  font-weight: 200;
  text-align: center;
}

.entete_presa h1 > strong {
  font-weight: 300;
}

.entete_presa > h1 > span {
  display: block;
  font: 9px source code pro;
  letter-spacing: 2px;
  font-weight: light;
  margin-top: -8px;
}

.infos_perso {
  width: 100%;
  background: var(--color-background);
  color: white;
  font: 10px calibri;
  text-align: center;
  text-transform: uppercase;
  word-spacing: 2px;
  margin-top: 28px;
  padding: 6px 5px 6px 5px;
  
  
}

.block_phy_ca {
  width: 255px;
  height: 215px;
  background: #eeeeee;
  margin-top: 10px;
}

.block_phy_ca > h2, .block_history > h2 {
  width: 100%;
  margin: 0;
  background: var(--color-background);
  height: 25px;
  text-align: right;
  font-weight: normal;
  font: 11px calibri;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 25px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-right: 5px;
  color: white;
  
}

.block_phy_ca > p {

  width: 100%;
  height: 180px;
}

.block_phy_ca > p, .block_history > p {
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font: 12px calibri;
  overflow: auto;
  text-align: justify;
  line-height: 12px;
  color: #4f4c50;
}

.block_history {
  width: 100%;
  height: 180px;
  background: #eeeeee;
  margin-top: 8px;
}

.block_history > p {
  height: 145px;
}

.infos_member {
  width: 100%;
  height: 95px;
  background: var(--color-background);
  margin-top: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px;
}

.infos_member > img {
  border: 5px solid #eeeeee;
  float: left;
  width: 75px;
  height: 75px;
  object-fit: cover;
}

.infos_member > p {
  color: white;

  height: 85px;
  margin: 0;
  font: 12px calibri;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  float: right;
  width: 425px;
  padding: 0 5px;
  overflow: auto;
}

.credits_arte {
  width: 550px;
  position: absolute;
  bottom: 2px;
  font: 10px arial;
  text-align: center;
  letter-spacing: 1px;
  color: #363636;

}

.credits_arte > a {
  text-decoration: none;
  color: #46335c;
  text-transform: none;
}

Code:

:root {--color-background: #46335c;
}