Welcome

Halloween Page d'accueil

Endless Curse

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Page d'accueil Endless Curse

PHPBB2

Optimisé /

Retour

Codage page d'accueil Endless Curse Halloween Forumactif

CSS

/************************************************** PAGE D'ACCUEIL, HALLOWEEN **************************************************/

/* Fond de l'accueil */
.fond_pa {
    background: url('http://i42.servimg.com/u/f42/13/02/95/50/sans_t50.png');
    width: 100%;
}

.fond_pa a, .fond_pa a:hover {
    color: #544A37;
    text-decoration: none !important;
    font-style: italic;
}

/* Mise en forme des colonnes */
.pa_colonne {
    float: left;
    margin: 5% 1.5%;
}

.clear {
    clear: both;
}

/* Blocs de l'accueil */
.bloc_PA {
    background: #B7AC84;
    border-bottom: 15px solid #544A37;
    border-top: 15px solid #544A37;
    color: #544A37;
    padding: 10px;
    text-align: justify;
    width: 300px;
    margin: 5% 0;
}

/* Mise en forme des divers titres de la PA */
.titre_PA {
    color: #443D2C;
    font-family: arial;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: -9%;
    text-shadow: 1px 1px 0 #000;
    text-transform: uppercase;
}

/* Concerne le premier membre du staff en hover */
.staff1 {
    background: url('http://i42.servimg.com/u/f42/13/02/95/50/tumblr45.png');
}

.staff2 {
    background: url('http://i42.servimg.com/u/f42/13/02/95/50/k11.png');
}

.staff1, .staff2 {
    display: inline-block;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.staff1_contenu, .staff2_contenu {
    background: #443D2C;
    color: #B7AC84;
    font-size: 10px;
    height: 100px;
    opacity: 0;
    position: relative;
    text-align: center;
    transform: all;
    transition: 1s;
    width: 100px;
    padding: 30% 0;
}

.staff1_contenu:hover, .staff2_contenu:hover {
    opacity: 0.8;
    transform: all;
    transition: 1s;
}

/************************************************** FIN PAGE D'ACCUEIL, HALLOWEEN **************************************************/

HTML

<div class="fondpa">
 <br /><br />
 <table style="width: 100%;" cellspacing="2" border="0">
 
 <tbody>
 
 <tr>
 
 <td style="width: 35%;">
 
 <div class="titre_PA">
 Titre forum
 </div>
 
 <div class="bloc_PA" style="height: 350px; overflow: auto;">
 <br />Tener quassari eius quicquid dispendium factum quicquid suae ad eius cogitatum solet caedibus corpus increpuisset ita salutis offensis dispendium cogitatum quicquid existimans etiam increpuisset animus caedibus angustus caedibus animus salutis corpus aut dispendium angustus offensis eius etiam factum luctuosam existimans corpus aut fecit fecit insontium tener solet et existimans insontium offensis levibus ad eius existimans insontium offensis corpus factum ad suae aut animus animus levibus ad dispendium animus ita suae luctuosam eius et caedibus ita offensis eius quicquid dispendium aegrum eius caedibus levibus caedibus offensis insontium factum tener fecit tener aegrum ad solet animus insontium angustus insontium increpuisset dispendium etiam. <a href="#"> La suite</a><br /><br /><br />
 <center>
 <select style="width: 90%" onchange="location = this.options
[this.selectedIndex].value"><option selected="selected">Les liens importants </option> <option value="#">Le Contexte </option> <option value="#">Le Règlement </option> <option value="#">Guide du visiteur </option> <option value="#">Les Problèmes & Suggestions </option> <option value="#">Les partenariats </option> </select>
 </center>
 
 </div><br /><br />
 <div class="bloc_PA">
 <strong>Annonces & News</strong> Ouverture à venir<br />
 </div>
 
 </td>
 
 <td style="width: 65%;">
 
 <center>
 
 <div class="titre_PA">
 
 <center>
 Bienvenue
 </center>
 
 </div>
 
 <div class="bloc_PA" style="width: 380px;">
 <br /> Bienvenue sur FORUM. Si vous êtes ici, c'est soit que vous êtes très chanceux, soit que vous êtes attirés par notre communauté. Pour les visiteurs curieux, nous vous conseillons de lire en premier lieu notre contexte dans son intégralité pour ne pas avoir de surprise, puis de suivre la procédure. Bien évidement, le staff est là pour répondre à vos questions, n'hésitez donc pas (la partie est ouverte aux invités). Amusez-vous bien ! <br /><br />✏ Avatars réels, personnalités asiatiques ;<br />✏ Prénom + NOM ;<br />✏ 500 mots minimum.
 </div>
 <br /><br />
 <div class="staff1">
 
 <div class="staff1_contenu">
 
 <div align="center">
 <br /><br /><strong>Kanon YUSAKI</strong> <br />★ <a style="color: #B7AC84;" href="#">MP</a><br />★ <a style="color: #B7AC84;" href="#">Profil</a>
 </div>
 
 </div>
 
 </div>
 
 <div class="staff2">
 
 <div class="staff2_contenu">
 
 <div align="center">
 <br /><br /><strong>Emiko YAMAZAKI</strong> <br />★ <a style="color: #B7AC84;" href="#">MP</a> <br />★ <a style="color: #B7AC84;" href="#">Profil</a>
 </div>
 
 </div>
 
 </div>
 <br /><br />
 <div class="titre_PA">
 Thanks
 </div>
 
 <div class="bloc_PA">
 Forum créé à partir de l'idée de base de PSEUDO. PA by Halloween. <br /> <br />
 
 
 </div>
 
 </center>
 
 </td>
 
 </tr>
 
 </tbody>
 
 </table>
</div>

Dernière modification : 25 April 2020 23 : 33.

#endlesscurse #pageaccueil #forumactif #codage #libreservice

Halloween