Ex n°12 - Fiche de Pub
void_invaders
Admin
Ven 17 Mar 2023 - 3:30
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap" rel="stylesheet">
<title>Fiche PB2 : Exercice 12</title>
<style>
.fichePB2 {
width: 460px;
height: 500px;
background: url(https://zupimages.net/up/23/11/08a5.png);
font: 12px roboto, sans-serif;
border-right: 40px solid #2f2c51;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fichePB2 p {
margin: 0;
}
.fichePB2 span {
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 15px;
color: #2f2c51;
}
.fichePB2 a {
color: #2f2c51;
text-decoration: none;
transition: all 0.8s ease-in-out;
}
.fichePB2 a:hover, .titrePB2 h1:hover {
letter-spacing: 2px;
}
.titrePB2 {
width: 101%;
padding: 5px 0;
border: 1px solid #2f2c51;
}
.titrePB2 h1 {
margin: 0;
padding: 0 8px;
font: 25px Oswald, sans-serif;
color: #fff;
font-weight: 500;
text-transform: uppercase;
text-shadow: 1px 1px 0px #030614;
line-height: 1;
transition: all 0.8s ease-in-out;
}
.titrePB2 p {
margin: 0;
padding: 0 20px;
font: 14px roboto, sans-serif;
text-transform: lowercase;
color: #00000099;
}
.contxPB2 {
padding: 0 10px;
}
.contxPB2 p {
margin: 0;
padding: 15px;
text-align: justify;
background-color: #ffffff99;
outline: 1px solid #2f2c51;
outline-offset: -5px;
}
.linksPB2 {
padding-left: 10px;
display: flex;
justify-content: space-between;
}
.linksPB2 a {
padding: 0 25px;
font: 18px Oswald, sans-serif;
color: #fff;
text-transform: uppercase;
text-decoration: none;
background-color: #2f2c51;
}
.infimgPB2 {
width: 103%;
padding-left: 10px;
display: flex;
justify-content: space-between;
}
.infimgPB2 img {
border: 1px solid #2f2c51;
}
.infosPB2 {
position: relative;
width: 140px;
height: 165px;
}
.infosPB2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.infosPB2:hover p {
opacity: 1;
}
.infosPB2 p {
position: absolute;
top: 0;
width: 120px;
padding: 18px 10px;
text-align: center;
background-color: #ffffffd9;
outline: 1px solid #2f2c51;
outline-offset: -5px;
line-height: 12px;
opacity: 0;
transition: all 0.8s ease-in-out;
}
.imgPB2 {
position: relative;
display: flex;
justify-content: center;
}
.imgPB2 img {
width: 150px;
height: 100%;
object-fit: cover;
}
.imgPB2 div {
position: absolute;
bottom: 0;
padding-bottom: 5px;
transition: all 0.8s ease-in-out;
opacity: 0;
}
.imgPB2:hover div {
opacity: 1;
}
.imgPB2 div p {
padding: 7px;
text-align: center;
background-color: #ffffffd9;
outline: 1px solid #2f2c51;
outline-offset: -5px;
}
.imgPB2 div p span {
font-size: 18px;
line-height: 1;
color: #2f2c51;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
.fichePB2 h2 {
text-align: center;
margin: 0;
padding: 0;
}
.fichePB2 h2 a {
padding: 0 100px;
background-color: #ffffff70;
font-family: 'Oswald', sans-serif;
font-size: 40px;
color: #2f2c51;
outline: 1px solid #2f2c51;
outline-offset: -5px;
}
.credPB2 {
text-align: center;
font-size: 10px;
color: #fff;
padding-bottom: 3px;
}
.credPB2 a {
color: #7d79a9;
}
</style>
</head>
<body>
<div class="fichePB2">
<div class="titrePB2">
<h1>Nom du forum</h1>
<p>type du forum — <b>00</b> membres — <b>0000</b> messages</p>
</div>
<div class="contxPB2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="linksPB2">
<a href="">Contexte</a>
<a href="">Prédéfinis</a>
<a href="">Annexes</a>
</div>
<div class="infimgPB2">
<div class="infosPB2">
<img src="https://zupimages.net/up/23/11/qorw.png" alt="img-infos-forum"/>
<p>
<span>Type d'avatar :</span><br/>
Dessin/Manga/3D<br/><br/>
<span>Taille de l'Avatar :</span><br/>
200*400px<br/><br/>
<span>Min. de lignes :</span><br/>
RP libre<br/><br/>
<a href="">En savoir plus</a>
</p>
</div>
<div class="imgPB2">
<img src="https://www.zupimages.net/up/23/11/uhds.png"/>
<div>
<p>
Membre du mois<br/>
<span>PSEUDO</span>
</p>
</div>
</div>
<div class="imgPB2">
<img src="https://www.zupimages.net/up/23/11/3f6b.png"/>
<div>
<p>
RP du mois<br/>
<span>PSEUDO & PSEUDO</span>
</p>
</div>
</div>
</div>
<h2><a href="">JOIN US</a></h2>
<div class="credPB2">void — <a href="https://www.epicode-entraide.com/">epicode</a></div>
</div>
</body>
</html>
|
|
|