Page d'accueil #2

Codes

Code:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" />
<div class="pa_arte">
    
 <h1>
  Bienvenue, <span>{USERNAME}</span>  
 </h1>
    
 <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut pulvinar arcu, quis sodales orci. Morbi nisl orci, sodales vitae facilisis ac, vestibulum a est. Sed congue lacus ac dolor posuere condimentum. Curabitur nulla nulla, ultricies hendrerit urna vel, pulvinar mollis ante. Vivamus massa mi, convallis ac dolor sed, tristique iaculis turpis. Vivamus lacinia tempor orci, non semper lacus sagittis sed. Suspendisse ullamcorper justo id laoreet fringilla. Praesent vitae facilisis quam. Fusce sit amet urna metus.Fusce vitae risus quis ipsum consectetur dapibus. Proin gravida, massa sed hendrerit fringilla, felis mauris venenatis lectus, ac tempus mi mauris ac nulla. Ut in erat neque.    
 </p>
    
 <p>
   <span>Crédits</span> Le forum a été fondé par  <strong>pseudo</strong>  et est administré par  <strong>pseudo</strong> . La page d'accueil a été designée et codée par  <strong>Artemis</strong>  sur  <a href="https://artifices.forumactif.com/">Artifices</a> . Le codage du reste du forum a été codé par  <strong>pseudo</strong> . L'intégralité des textes appartiennent au staff et aux membres.    
 </p>
    
 <div class="staff_block">
    
 <div class="img_staff">
   <img src="https://via.placeholder.com/100" />  
 <div>
   <span>Pseudo <strong>Administrateur</strong></span>  
 </div>
    
 </div>
    
 <div class="img_staff">
   <img src="https://via.placeholder.com/100" />  
 <div>
   <span>Pseudo <strong>Administrateur</strong></span>  
 </div>
    
 </div>
    
 <div class="img_staff">
   <img src="https://via.placeholder.com/100" />  
 <div>
   <span>Pseudo <strong>Administrateur</strong></span>  
 </div>
    
 </div>
    
 </div>
    
 <div class="top_sites_liens">
   <a href="#">V</a> <a href="#">O</a> <a href="#">T</a> <a href="#">E</a>  
 </div>
    
 <div class="nouveautes_block">
   <span>00.00.00</span>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut pulvinar arcu, quis sodales orci. Morbi nisl orci, sodales vitae facilisis ac, vestibulum a est  
 <hr />
    
 </div>
    
 <div class="liens_importants">
  <a href="#"><span>Lien</span></a> <a href="#"><span>Lien</span></a> <a href="#"><span>Lien</span></a> <a href="#"><span>Lien</span></a> <a href="#"><span>Lien</span></a>
 </div>
    
 <div class="partos_pa">
   <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a> <a target="_blank" href="#"><img alt="partenaire" src="https://via.placeholder.com/50" /></a>  
 </div>
</div>

Code:

:root {--color-pink: #d85eb1;}

.pa_arte {
  width: 850px;
  height: 400px;
  background: #EFEFEF;
  margin: auto;
  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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 10px 5px 10px;
}

.pa_arte > h1 {
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #c2c2c2;
  font: 40px roboto;
  text-transform: lowercase;
  font-style: oblique;
  margin: 0;
  color: #c2c2c2;
  letter-spacing: -2px;
  position: relative;
  margin-bottom: 5px;
  text-align: left;
}

.pa_arte > h1:after {
  width: 100%;
  content: " ";
  height: 2px;
  background: var(--color-pink);
  position: absolute;
  bottom: -7px;
  left: 0;
}

.pa_arte > h1 > span {
  color: var(--color-pink);
}

.pa_arte > p:first-of-type {
  background: #f4f4f4;
  width: 635px;
  height: 130px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #cfcfcf;
  padding: 25px;
  overflow: auto;
  font: 11px roboto;
  text-align: justify;
  color: #979797;
  margin: 0;
  overflow: auto;
  
}

.pa_arte > p:nth-of-type(2) {
  background: var(--color-pink);
  height: 130px;
  width: 190px;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font: 11px calibri;
  color: white;
  text-align: justify;
  line-height: 11px;
  letter-spacing: 0.2px;
}

.pa_arte > p:nth-of-type(2) span {
  display: block;
  text-align: right;
  position: relative;
  font-size: 14px;
  font-style: oblique;
  margin-right: 5px;
  text-transform: lowercase;
  margin-bottom: 10px;
  
}

.pa_arte> p:nth-of-type(2) span:before {
  width: 120px;
  height: 1px;
  background: white;
  content: " ";
  position: absolute;
  left: 0;
  top: 6px;
  opacity: 0.8;

}

.pa_arte> p:nth-of-type(2) a {
  text-decoration: none;
  color: white;
}

.staff_block {
  width: 315px;
  height: 116px;
  background: #cccccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  
}

.img_staff {
  width: 95px;
  height: 95px;
  background: #f4f4f4;
  border: 1px solid #b5b5b5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.img_staff img {
  width: 80px;
  height: 80px;
  display: block;
  margin: auto;
}

.img_staff div {
  width: 100%;
  height: 100%;
  background: rgba(251,251,251,0.8);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: 10x;
  left: 0;
  font: 11px calibri;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
 
  
}

.img_staff div span {
  display: block;
  margin: auto;
  color: var(--color-pink);
}

.img_staff div span strong {
  font-weight: normal;
  font: 10px calibri;
  color: #858585;
}

.img_staff:hover div {
  opacity: 1;
}

.top_sites_liens {
  width: 114px;
  height: 121px;
  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;
 
}

.top_sites_liens a {
  display: block;
  width: 55px;
    height: 55px;
  background: var(--color-pink);
  text-align: center;
  text-decoration: none;
  color: white;
  font: 30px arial;
  line-height: 55px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;

}

.top_sites_liens a:hover {
  border-radius: 50%;
}

.nouveautes_block {
  height: 116px;
  width: 230px;
  background: #f4f4f4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #cfcfcf;
  padding: 15px;
  overflow: auto;
  font: 11px roboto;
  text-align: justify;
  color: #979797;
  line-height: 10px;
  overflow: auto;
}

.nouveautes_block span {
  color: var(--color-pink);
  float: left;
  margin: 0 5px 0 0;
}

.nouveautes_block span:after {
  content: "—";
  margin-left: 3px;
}

.nouveautes_block hr {
  opacity: 0.2;
}

.liens_importants {
  width: 155px;
  height: 116px;
}

.liens_importants a {
  display: block;
  width: 100%;
  border: 1px solid var(--color-pink);
  height: 18px;
  margin-bottom: 3.8px;
  text-align: center;
  text-decoration: none;
  font:10px roboto;
  text-transform: uppercase;
  line-height: 18px;
  position: relative;
  overflow: hidden;
  color: #d85eb1;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.liens_importants a:before {
  content: " ";
  width: 100%;
  height: 18px;
  background: var(--color-pink);
  position: absolute;
  left: -100%;
  top: 0;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  z-index: 1;
  
}

.liens_importants a span {
  z-index: 3;
  position: relative;
}

.liens_importants a:hover:before {
  left: 0;
}

.liens_importants a:hover {
  color: white;
}

.partos_pa {
  width: 100%;
  height: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: -5px;
}

Code:

:root {--color-pink: #d85eb1;}