Fiche de Pub #1
void_invaders
Admin
Sam 11 Mar 2023 - 2:44
Le HTML à coller dans une page HTML sur votre forum (PA → Modules → HTML & JAVASCRIPT → Gestion des pages HTML → Création en mode avancé (HTML), cochez "non" pour les deux options après avoir nommé la page) :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Barlow+Condensed&display=swap" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<title>Fiche de Pub</title>
<style>
:root {
--clrbg: #d5d5d5; /*couleur des fonds des blocs avec du texte*/
--clrB: #000; /*couleur noir, donc fond de la fiche et les ombres sur les sous-titre et les blocks*/
--clrW: #fff; /*couleur blanche, donc ombre du titre et couleur des sous-titres*/
--clr1: #879f80; /*couleur des liens impairs*/
--clr2: #738c8e; /*couleur des liens pairs*/
--clr3: #817188; /*couleur des bordures du premier bloc texte*/
--clr4: #a38493; /*couleur des bordures du deuxième bloc texte*/
--bkgd: url(https://zupimages.net/up/23/10/nxs8.png); /*image de fond de la fiche, en 500px de large pour 700px de haut*/
}
.fichePB1 {
width: 500px;
background-color: var(--clrB);
font: 12px roboto, sans-serif;
}
.fichePB1 h1, .fichePB1 h2, .titrePB1 a, .fichePB1 p, .exbtnPB1 textarea {
text-transform: uppercase;
margin: 0;
padding: 0;
border: none;
}
.titrePB1 a, .titrePB1 h1 {
font: 50px 'Georgia', serif;
}
.titrePB1, .fichePB1 h2, .fichePB1 p i, .exbtnPB1 textarea, .credPB1 {
text-align: center;
}
.fichePB1 a:hover, .titrePB1:hover h1, .titrePB1:hover a {
letter-spacing: 1px;
}
.fichePB1 a {
text-decoration: none;
}
.fichePB1 a:hover {
color: var(--clr2)!important;
}
.titrePB1 {
position: relative;
text-align: center;
}
.titrePB1 a {
position: relative;
background: linear-gradient(to right, var(--clr1), var(--clr2), var(--clr3), var(--clr4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
}
.titrePB1 h1 {
position: absolute;
width: 100%;
color: var(--clrW);
z-index: 0;
top: 1px;
left: 1px;
}
.contfichePB1 {
background-image: var(--bkgd);
background-size: cover;
padding: 20px;
display: grid;
grid-template-columns: repeat(46, 10px);
grid-template-rows: repeat(66, 10px);
border: 1px solid var(--clrB);
}
.bannPB1 {
grid-column: 1/31;
grid-row: 1/21;
box-shadow: 4px 4px 0px var(--clrB);
overflow: hidden;
}
.bannPB1 img {
object-fit: cover;
width: 100%;
height: 100%;
}
.linksPB1 {
grid-column: 31/47;
grid-row: 1/21;
display: grid;
align-content: space-evenly;
}
.linksPB1 a, .fichePB1 h2 {
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
text-transform: uppercase;
text-shadow: 1px 1px 0px var(--clrB);
}
.linksPB1 a {
background-color: var(--clrbg);
padding-left: 5px;
padding-bottom: 2px;
font-size: 24px;
color: var(--clr1);
box-shadow: 4px 4px 0px var(--clrB);
}
.linksPB1 a:nth-child(even) {
color: var(--clr4);
}
.fichePB1 h2 {
font-size: 18px;
color: var(--clrW);
letter-spacing: 4px;
align-self: center;
}
.citaPB1 {
grid-column: 1/47;
grid-row: 22/25;
}
.fichePB1 p {
grid-row: 26/41;
background-color: var(--clrbg);
overflow: auto;
padding: 5px 10px;
text-align: justify;
text-transform: none;
border-width:10px 1px 10px 1px;
border-style: solid;
box-shadow: 3px 3px var(--clrB);
scrollbar-width: thin;
}
.fichePB1 p::-webkit-scrollbar {
width: 3px;
}
.fichePB1 p::-webkit-scrollbar-thumb {
background: linear-gradient(var(--clr1), var(--clr2), var(--clr3), var(--clr4));
}
.fichePB1 p::-webkit-scrollbar-track {
background: var(--clrbg);
}
.fichePB1 p.c1 {
grid-column: 1/24;
border-color: var(--clr2);
scrollbar-color: var(--clr2) var(--clr3);
}
.fichePB1 p i {
display: inline-block;
width: 100%;
height: auto;
padding-top: 7px;
font-size: 10px;
}
.fichePB1 p.c2 {
grid-column: 25/47;
border-color: var(--clr3);
scrollbar-color: var(--clr3) var(--clr2);
}
.btnPB1 {
grid-column: 1/47;
grid-row: 42/45;
}
.exbtnPB1 {
grid-column: 1/47;
display: inline-flex;
align-items: center;
justify-content: flex-end;
}
.exbtnPB1 img {
box-shadow: 3px 3px var(--clrB);
}
.exbtnPB1 textarea {
width: 340px;
font-size: 12px;
background-color: #d5d5d5;
margin-left: 20px;
padding: 11px 0px;
box-shadow: 3px 3px var(--clrB);
outline:none;
resize: none;
}
.ex1 {
grid-row: 46/51;
}
.ex2 {
grid-row: 54/59;
}
.ex3 {
grid-row: 62/67;
}
.ex1 img {
height: 50px;
width: 50px;
}
.ex2 img {
height: 31px;
width: 88px;
}
.ex3 img {
height: 35px;
width: 100px;
}
.credPB1 {
font: 10px roboto, sans-serif;
color: #fff;
padding: 2px 0;
text-transform: lowercase;
}
.credPB1 a {
color: #fff;
}
</style>
</head>
<body><div class="fichePB1">
<div class="titrePB1">
<a href="LIEN DU FORUM">Nom du forum</a>
<h1>Nom du Forum</h1>
</div>
<div class="contfichePB1">
<div class="bannPB1">
<img src="http://via.placeholder.com/300x200" alt="bann-forum-300-200"/>
</div>
<div class="linksPB1">
<a href="LIEN DU SUJET/DE LA CATEGORIE">NOM DU LIEN</a>
<a href="LIEN DU SUJET/DE LA CATEGORIE">NOM DU LIEN</a>
<a href="LIEN DU SUJET/DE LA CATEGORIE">NOM DU LIEN</a>
<a href="LIEN DU SUJET/DE LA CATEGORIE">NOM DU LIEN</a>
<a href="LIEN DU SUJET/DE LA CATEGORIE">NOM DU LIEN</a>
</div>
<h2 class="citaPB1">Une jolie citation en lien avec le forum</h2>
<p class="c1">
▬ Genre du forum
<br/>▬ Avatars Réels/Irréels
<br/>▬ <b>0000</b> Messages
<br/>▬ <b>00</b> Membres
<br/>▬ Ouverture depuis le <b>00/00/00</b>
<br/><i>Petite phrase ou texte d'accroche pour inviter les gens à venir ou spécifier les effectifs recherchés ou autre...</i>
</p>
<p class="c2">
<b>Petit résumé bref du contexte ou de l'utilité du forum.</b> 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.
</p>
<h2 class="btnPB1">Les Boutons</h2>
<div class="exbtnPB1 ex1">
<img src="http://via.placeholder.com/50x50" alt="logo-forum-50-50"/>
<textarea readonly><a href="LIEN DU FORUM" target="_blank"><img src="LIEN DE L'IMAGE" alt="logo-lien-forum"/></a></textarea>
</div>
<div class="exbtnPB1 ex2">
<img src="http://via.placeholder.com/88x31" alt="logo-forum-88-31"/>
<textarea readonly><a href="LIEN DU FORUM" target="_blank"><img src="LIEN DE L'IMAGE" alt="logo-lien-forum"/></a></textarea>
</div>
<div class="exbtnPB1 ex3">
<img src="http://via.placeholder.com/100x35" alt="logo-forum-100-25"/>
<textarea readonly><a href="LIEN DU FORUM" target="_blank"><img src="LIEN DE L'IMAGE" alt="logo-lien-forum"/></a></textarea>
</div>
</div>
<div class="credPB1">void — <a href="https://www.epicode-entraide.com/">epicode</a></div>
</div>
</body>
</html>
Le code iframe à utiliser pour placer votre fiche sur les autres forums (n'oubliez pas de modifier le lien en le remplaçant pas le lien de votre page HTML nouvellement créée, que vous trouverez via PA → Modules → HTML & JAVASCRIPT → Gestion des pages HTML, à côté du nom de votre page :
- Code:
[center]<iframe width="515" height="830" src="LIEN DE VOTRE PAGE HTML"></iframe>[/center]
|
|
|