Accueil
Arya
Lun 5 Avr 2021 - 12:15
Helloww
Laissez-moi vous partager pour cette anniversaire une page d'accueil :3
La largeur est de 750px.
Les couleurs, polices et images sont modifiables, n'hésitez pas à me contacter en cas de difficulté :3
Le principe est simple, vous pouvez tout rentrer dans le Modules > Pages HTML et ensuite vous servir de l'iframe à afficher dans la page d'accueil. Comme une fiche de partenariat.
Laissez-moi vous partager pour cette anniversaire une page d'accueil :3
La largeur est de 750px.
Les couleurs, polices et images sont modifiables, n'hésitez pas à me contacter en cas de difficulté :3
Installation
Le principe est simple, vous pouvez tout rentrer dans le Modules > Pages HTML et ensuite vous servir de l'iframe à afficher dans la page d'accueil. Comme une fiche de partenariat.
- Code:
<iframe scrolling="no" frameborder="0" marginheight="0" style="width: 800px; height: 300px;" src="LE LIEN DE VOTRE PA"></iframe>
Code
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fORUM PA</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link href="https://fonts.gstatic.com" rel="preconnect" /><link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Amarante&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gupter&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" />
<style type="text/css">
a, a:link, a:hover {
text-decoration: none!important;
color: #730701!important;}
/*SCROLLBAR*/
::-webkit-scrollbar { /*taille dans les messages ou fiches */
height: 2px!important;
width: 4px!important;
background-color:#d6d5cc!important; /* couleur de fond */
}
html > ::-webkit-scrollbar {
width: 4px!important; /* largeur de la barre du forum */
}
::-webkit-scrollbar-thumb {
background: linear-gradient(90deg,#9c9b92,#c5c4b5);!important; /* couleur de la barre qui se déplace */
border: 50px!important;
}
::-webkit-scrollbar-track-piece {
background-color:#d6d5cc!important; /* couleur de fond */
}
.blocpa{
background-color:#cbcac1;
height: 290px;
width: 750px;
margin: auto;
overflow: hidden;
font-size: 11px;
font-family: verdana;}
.blocbienvenue{
background-color:#AFA79B;
height: 25px;
color: #dad6ca;
text-align: center;
font-family: 'Playfair Display', serif;
line-height: 25px;
font-size: 15px;
text-transform: uppercase;}
.ligne1PA{
margin: auto;
display: flex;
justify-content: space-around;}
.ligneinterne{
width: 490px;
padding: 5px;
display: flex;
justify-content: space-around;
flex-direction: column;
position: relative;
left: -5px;}
.lienspa{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
width: 490px;
height: 20px;
line-height:20px;
color: #730701!important;
text-align: center;
text-transform: uppercase!important;
font-size: 12px!important;
text-decoration:none!important;
font-family: 'Gupter', serif;}
.ligneinterne1{
width: 492px;
padding-top: 5px;
display: flex;
justify-content: space-between;}
.contexte {
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
font-family:Verdana;
color: #84846c;
width: 240px;
height: 133px;
text-align: justify;
padding: 5px;
overflow: auto;
}
.titre {
color: white;
background: linear-gradient(90deg,#9c9b92,#c5c4b5);
font-family: 'Gupter', sans-serif!important;
padding: 1px;}
.event{
box-sizing:border-box;
height: 145px;
}
.eventimg {
display:inline-block;
overflow:hidden;
width: 205px;
height: 135px!important;
border: 5px solid #9C9B92;
object-fit:cover;
}
.eventimg div{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color:#E8E7DE;
box-sizing:border-box;
height:150px!important;
position:relative;
top:0;transition:.5s;
width:205px;
font-family: verdana, sans-serif;
overflow: auto;
color:#84846c;
text-align: left;}
.eventimg:hover div{
top:-138px;
transition:.5s;
padding: 1px!important;
}
.onglets_staff{padding-top:10px;}
.onglets_staff img{
width:52px; height: 52px;text-align: center!important;object-fit:cover;
}
.contenu_ongletstaff {
background-color:#E8E7DE;
border: 1px solid #e6e6e2;
width:218px;
font-family: 'Gupter', serif;
overflow: hidden;
font-size: 11px;
color:grey;
margin: auto;
text-align: center;
display: none;
height: 50px;
}
.pseudo{color:#730701!important; font-family: 'Playfair Display', serif!important; font-size: 15px!important;}
.fonction{color:#3a3939;font-family: 'Playfair Display', serif!important; font-size: 15px!important;}
.postesvacants{
text-align:center;padding-top:15px;}
.postesvacants img{
width: 35px;
height: 35px;
border: 2px solid #9C9B92;
object-fit:cover;
}
.col3ligne1 {
width: 220px;padding-top: 5px;text-align: center;
}
.ligne2PA{
padding: 5px;
display: flex;
justify-content: space-around;}
.part1{width: 250px;
height: 70px;text-align: center;}
.part1 a{font-size: 9px;
text-transform: uppercase;}
.infos{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
font-size : 11px;
font-family: verdana;
color: #84846c;
width: 460px;
height: 60px;
text-align: justify;
padding: 5px;
overflow: auto; line-height: 11px;
position: relative;
left: 3px;}
.blocpa select {
width: 200px;
height: 23px;
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
color: #84846c;
}
.quote-fiche-presinfos {
color: #730701;
display: inline;
font-family: Lato, serif;
font-size: 10px;
font-weight: 500;
margin-top: -10px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="blocpa"><div class="blocbienvenue">Bienvenue sur Forum</div>
<div class="ligne1PA">
<div class="ligneinterne">
<div class="lienspa">
<a href="xx" target="_blank">Règlement</a> | <a href="xx" target="_blank">Bottin</a> | <a href="xx" target="_blank">Groupes</a> | <a href="x" target="_blank">Invités et Partenariats</a> | <a href="xx" target="_blank">Jeux</a>
</div>
<div class="ligneinterne1">
<div class="contexte">
<span class="titre">CONTEXTE</span> écrire ici le contexte.
</div>
<div class="event">
<div class="eventimg">
<img src="https://zupimages.net/up/21/04/vzbp.png" style="width:205px; height: 135px" />
<div>
<span class="titre">07/01/2021</span> Naissance de l'idée.
<br />
<span class="titre">00/00/2021</span> Ouverture du Forum.
</div>
</div>
</div>
</div>
</div>
<div class="col3ligne1">
<div class="systeme_ongletsstaff">
<div class="contenu_ongletsstaff">
<div id="contenu_onglet_staff1" class="contenu_ongletstaff">
<span class="pseudo">Le Corbeau -</span> <span class="fonction">Fondateur</span> <br />DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>
</div>
<div id="contenu_onglet_staff2" class="contenu_ongletstaff">
<span class="pseudo">Aelis Crawford -</span> <span class="fonction">Fondatrice</span> <br />DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>
</div>
<div id="contenu_onglet_staff3" class="contenu_ongletstaff">
<span class="pseudo">Katherina Browns -</span> <span class="fonction">Fondatrice</span> <br /> DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>
</div>
<div id="contenu_onglet_staff4" class="contenu_ongletstaff">
<span class="pseudo"> Karl Godwinson -</span> <span class="fonction">Fondateur</span> <br /> DISPONIBLE <br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>
</div>
<div class="onglets_staff">
<span onclick="javascript:change_onglet('staff1');" id="onglet_staff1" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin410.png" /></span> <span onclick="javascript:change_onglet('staff2');" id="onglet_staff2" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin111.png" /></span> <span onclick="javascript:change_onglet('staff3');" id="onglet_staff3" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin210.png" /></span> <span onclick="javascript:change_onglet('staff4');" id="onglet_staff4" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin310.png" /></span>
</div>
</div>
</div>
<div class="postesvacants">
<a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> </div>
</div>
</div><div class="ligne2PA">
<div class="part1">
<select onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
TOP PARTENAIRES
</option>
<option value="http://lien_forum" target="_blank">
Nom Forum
</option>
<option value="http://lien_forum" target="_blank">
Nom Forum
</option>
</select>
<div>
<a href="xxx" target="_blank">Nos partenaires</a> <span class="quote-fiche-presinfos">|</span> <a href="xx" target="_blank">Demandes</a>
</div>
</div>
<div class="infos">
<span class="titre">INFOS PRATIQUES</span> Il n'y a pas de minimum de ligne ☾ Votre Avatar doit être de
Il n'y a pas de minimum de ligne ☾ Votre Avatar doit être de
<div class="quote-fiche-presinfos">
<strong>200 x 320</strong>
</div>
☾ Celui-ci n'est réservé qu'après votre fiche terminée ☾ Vous avez
<div class="quote-fiche-presinfos">
<strong>3 JOURS</strong>
</div>
pour poster votre fiche et
<div class="quote-fiche-presinfos">
<strong>7 JOURS</strong>
</div>
pour la finaliser ☾ Le forum est administré par XXXX ☾ Le design est de XX et le code de PA par Arya
</div>
</div>
</div></body>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</script><script type="text/javascript">
//<!--
var anc_onglet = 'staff1';
change_onglet(anc_onglet);
//-->
</script></html>
