Le CSS :
- Code:
/* ---------- PA --------- */
.corPA {
width:1000px;
background-color:white;
padding:0;
margin-left:auto;
margin-right:auto;
border:1px solid grey;
margin-left:-5px;
}
.titPA {
text-transform:uppercase;
font-size:15px;
font-style:italic;
color:grey;
font-family:Arial;
font-weight:bold;
text-decoration:none!important;
transition:all 0.65s linear;
}
.titPA:hover {
color:lightpink;
text-decoration:none!important;
}
.imgPA {
margin:0;
width:98%;
background-size:cover!important;
height:50px;
text-align:center;
padding:10px;
}
.imgPA span {
color:white;
font-family:'Oleo Script',cursive;
font-size:30px;
}
.corprin {
padding:10px;
width:100%;
text-align:center;}
.princPA {
text-transform:uppercase;
font-family:Arial;
font-weight:bold;
color:lightpink;
font-size:25px;
}
.princorPA {
margin-top:-20px;
width:60%;
margin-left:auto;margin-right:auto;
border:2px solid lightpink;
margin-bottom:10px;
border-radius:30px;
text-align:justify;
padding:2%;
color:black;
font-family:Arial;font-size:12px;
border-top:none!important;
}
.nouvPA {
padding:5px 10px;background-color:lightpink;
border-radius:25px; color:white; font-weight:bold;
font-size:12px;font-family:Arial;
}
/* --------- FIN PA ---------- */
Le code :
- Code:
<link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet" />
<div class="corPA">
<div class="imgPA" style="background:url('https://i.pinimg.com/564x/cc/0d/6f/cc0d6ff4338f318973735fa9e0a6394c.jpg') no-repeat;">
<br /> <span>Titre du forum</span>
</div>
<div class="corprin">
<a href=LIEN UTILE 1" class="titPA">Titre du lien utile 1</a> • <a class="titPA" href="LIEN UTILE 2">Titre du lien utile 2</a> • <a href="LIEN UTILE 3" class="titPA">Titre du lien utile 3</a> • <a href="LIEN UTILE 4" class="titPA">Titre du lien utile 4</a> <br /><br /> <span class="princPA">Principe/Contexte du forum</span>
</div>
<div class="princorPA">
Ici vous expliquez le principe/Le contexte.
</div>
<div class="corprin">
<span class="nouvPA">Nouveauté 1<a href="Lien vers la nouveuté">ici</a></span>
</div>
</div>