Prez SoH

In this example below you will see how to do a Prez SoH with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Etilya, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Etilya ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Prez SoH</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"/>
<div class="prez_cadre">
  <img class="prez_imghaut" src="https://i.imgur.com/FEPRDkO.png"/>
  <div class="prez_tt"><span>Prénom nom Prénom nom</span><br/>
    feat (source)
  </div>
  <div class="prez_iconehaut"></div>
  <table cellpadding="5">
    <tr>
      <td>
        <div class="prez_pouv">POUVOIR 1</div>
        <div class="prez_cara">CARACTERE Je suis une patate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam leo quis nibh scelerisque, et convallis metus tincidunt. Pellentesque aliquam commodo ipsum, eu interdum nunc posuere quis. Pellentesque dignissim pulvinar commodo. Curabitur nec viverra orci. Nunc sit amet metus quis eros euismod auctor et vel libero. Vestibulum pharetra, arcu id blandit rhoncus, nisl eros mollis felis, quis tempus leo turpis sed nulla. Sed et nunc sed eros ornare varius sit amet vel urna. Phasellus finibus et metus vel mattis.

Donec eu eros sit amet enim iaculis ultrices et aliquet neque. Vivamus quis sagittis ligula, eu luctus velit. Proin tempor elit a urna semper condimentum. Proin ut urna id arcu iaculis auctor. In volutpat metus ac ligula ultrices, ac facilisis diam viverra. Ut tempus arcu ut nibh tempus, quis posuere neque faucibus. Nullam ut dolor nunc. Etiam est felis, porta eget diam bibendum, aliquam sagittis eros. Praesent finibus congue metus, et posuere ligula bibendum sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nullam mollis lobortis lectus, vel posuere eros vehicula eget. Morbi aliquet cursus erat ac placerat. Praesent fringilla lorem ligula. Maecenas vel convallis ex. Suspendisse feugiat, lectus ut dictum semper, mauris nunc molestie ipsum, ac tincidunt orci magna ut justo. Ut cursus volutpat turpis at ultrices. Nullam sit amet urna rutrum, ultricies ante eget, bibendum augue. Sed viverra velit non varius sodales.</div>
    </div></td>
  <td>
    <div class="prez_infos">
      <span>Age</span>
      <div>écrire ici</div>
      <span>Ascendance</span>
      <div>écrire ici</div>
      <span>Nationalité</span>
      <div>écrire ici</div>
      <span>Métier/études</span>
      <div>écrire ici</div>
      <span>Orientation</span>
      <div>écrire ici</div>
      <span>Surnom(s)</span>
      <div>écrire ici</div>
      <span>Nom complet</span>
      <div>écrire ici</div>
      <img src="https://i.imgur.com/oXkJWAV.png" />
    </div>
  </td>
  </tr>
<tr>
  <td colspan="2">
    
    <div class="prez_quote">"LES PATATES DOMINERONT LE MONDE"</div>
    <div class="prez_hist">HISTOIRE Il était une fois une patate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam leo quis nibh scelerisque, et convallis metus tincidunt. Pellentesque aliquam commodo ipsum, eu interdum nunc posuere quis. Pellentesque dignissim pulvinar commodo. Curabitur nec viverra orci. Nunc sit amet metus quis eros euismod auctor et vel libero. Vestibulum pharetra, arcu id blandit rhoncus, nisl eros mollis felis, quis tempus leo turpis sed nulla. Sed et nunc sed eros ornare varius sit amet vel urna. Phasellus finibus et metus vel mattis.

Donec eu eros sit amet enim iaculis ultrices et aliquet neque. Vivamus quis sagittis ligula, eu luctus velit. Proin tempor elit a urna semper condimentum. Proin ut urna id arcu iaculis auctor. In volutpat metus ac ligula ultrices, ac facilisis diam viverra. Ut tempus arcu ut nibh tempus, quis posuere neque faucibus. Nullam ut dolor nunc. Etiam est felis, porta eget diam bibendum, aliquam sagittis eros. Praesent finibus congue metus, et posuere ligula bibendum sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nullam mollis lobortis lectus, vel posuere eros vehicula eget. Morbi aliquet cursus erat ac placerat. Praesent fringilla lorem ligula. Maecenas vel convallis ex. Suspendisse feugiat, lectus ut dictum semper, mauris nunc molestie ipsum, ac tincidunt orci magna ut justo. Ut cursus volutpat turpis at ultrices. Nullam sit amet urna rutrum, ultricies ante eget, bibendum augue. Sed viverra velit non varius sodales.</div>
  </td>
</tr>
</table>

<div class="prez_joueur"><span>PSEUDO gnagnagna</span></div>
<div class="prez_iconebas"></div>
<img class="prez_imgbas" src="https://i.imgur.com/wULP5Vl.png"/>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Etilya/prez-soh-yzOJjb */
.prez_cadre{
  width: 500px;
  background: #EEE1D6;
  margin: auto;
  color: #EFA3A7;
  position: relative;
  font-size: 12px;
  margin-top:30px;
}

.prez_imghaut{
  margin-top: -30px;
}

.prez_tt{
  top: 10px;
  left: 30px;
  position: absolute;
  color: #EEE1D6;
  font-size: 10px;
  width: 400px;
}

.prez_tt > span{
  font: 40px 'Amatic SC', cursive;
  line-height: 30px;
}

.prez_iconehaut{
  border-radius: 50px;
  background: #EEE1D6;
  height: 85px;
  width: 85px;
  position: absolute;
  right: 50px;
  top: 0px;
}

.prez_cadre > table{
  margin-left: 20px;
  border-left: 10px solid #EFA3A7;
}

.prez_pouv{
  height: 150px;
  width: 260px;
}

.prez_cara{
  width: 260px;
  height: 250px;
  text-align: justify;
}

.prez_infos{
  text-align: center;
  margin: auto;
  width: 170px;
}

.prez_infos > span{
  font: 20px 'Amatic SC', cursive;
}

.prez_infos > img{
  border: 1px solid #EFA3A7;
  padding: 2px;
  margin: auto;
}

.prez_infos > div{
  width: 150px;
  border-top: 1px solid #EFA3A7;
  margin: auto;
}

.prez_quote{
  text-align: center;
}

.prez_hist{
  text-align: justify;
  padding-right: 10px;
}

.prez_pouv, .prez_cara, .prez_hist{
  overflow-y: auto;
}

.prez_joueur{
  position: absolute;
  bottom: 50px;
  left: 120px;
  color: #EEE1D6;
  font-size: 10px;
}

.prez_joueur > span{
  font: 30px 'Amatic SC', cursive;
}

.prez_iconebas{
  position: absolute;
  height: 85px;
  width: 85px;
  background: #EEE1D6;
  border-radius: 50px;
  left: 30px;
  bottom: 20px;
}

.prez_imgbas{
  margin-bottom:-30px;
}

Comments