Welcome

Halloween Page d'accueil

Trois colonnes

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Page d'accueil en trois colonnes

PHPBB2

Non optimisé Les informations du staff s'affichent au survol

Retour

Codage page d'accueil en trois colonnes Halloween Forumactif

CSS

/********************************************************** PAGE ACCUEIL, HALLOWEEN **********************************************************/
.fond_pa {
    background: url('http://i58.servimg.com/u/f58/18/43/33/39/1510.png');
    padding: 15px;
    color: #483433;
    font-size: 11px;
}

.fond_pa a, .fond_pa a:hover {
    color: #A55A3A;
    text-decoration: none !important;
}

/* Titres */
.fond_pa h2 {
    color: #663924;
    font-family: Condiment, cursive;
    font-size: 45px;
    margin: 5% 0;
}

.fond_pa h3 {
    color: #CC8B6E;
    font-family: 'Vampiro One', cursive;
    font-size: 30px;
    text-align: center;
    margin: 0 0 5% 0;
}

/* Mise en forme colonnes */
.pa_colonne_gauche, .pa_colonne_milieu, .pa_colonne_droite {
    float: left;
}

.pa_colonne_gauche {
    width: 25%;
}

.pa_colonne_milieu {
    width: 40%;
    margin: 0 2%;
}

.pa_colonne_droite {
    width: 30%;
}

.clear {
    clear: both;
}

/* Liens utiles */
.pa_navigation a {
    display: block;
}

.pa_navigation {
    margin: 0 0 10% 0;
}

/* Contexte */
.pa_contexte {
    font-family: arial;
    height: 150px;
    overflow: auto;
    text-align: justify;
    width: 250px;
    margin: 0 0 10% 0;
}

/* Nouveautes */
.pa_news {
    height: 100px;
    overflow: auto;
    width: 200px;
}

.pa_news span {
    color: #A55A3A;
}

/* Staff */
.infobulle {
    display: inline-block;
}

.infobulle img {
    height: 80px;
    object-fit: cover;
    width: 80px;
}

.infobulle > div {
    margin-top: -4.4%;
    opacity: 0;
    position: absolute;
    transform: scale(0.3) rotate(-45deg);
    transition: all .3s linear;
    visibility: hidden;
}

.infobulle:hover > div {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(0deg);
}

.contenu_bulle {
    background: #483433;
    font-size: 11px;
    height: 60px;
    margin: auto;
    padding: 10px;
    text-align: center;
    width: 60px;
    color: #fff;
}

/* Partenaires */
.pa_partenaires {
    float: left;
    width: 250px;
    margin-top: -8%;
}

.pa_partenaires_contenu {
    width: 400px; 
    height: 50px; 
    overflow: auto;
}

/* Credits */
.bloc_credits {
    width: 200px;
    padding: 15px;
    transform: rotate(-2deg);
}

/********************************************************** FIN PAGE ACCUEIL, HALLOWEEN **********************************************************/

HTML

<div class="fond_PA">
 
<div class="titre_PA">
 <span style="color: #A55A3A;"> ♛ </span> Bienvenue sur FORUM
</div>
 
<center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<center>
 
<div class="titre_bloc">
 Navigation
</div><br /><a href="http://ombra.purforum.com/t2-reglement" style="color: #A55A3A !important;">Règlement</a><br /><a href="http://ombra.purforum.com/t3-mythe" style="color: #A55A3A !important;">Contexte</a><br /><a href="http://ombra.purforum.com/f4-esprits-a-incarner" style="color: #A55A3A !important;">Esprits à incarner</a><br /><a href="http://ombra.purforum.com/f8-une-question-un-probleme" style="color: #A55A3A !important;">Zone invité</a><br /><a href="http://ombra.purforum.com/t4-description-des-races" style="color: #A55A3A !important;">Espèces</a><br /><br />
<div class="titre_bloc">
 Top-sites
</div><a href="http://www.root-top.com/topsite/stupidlamb/in.php?ID=827"><img src="http://img15.hostingpics.net/pics/613387cercueilVampire1.png" /></a>
</center>
 
</td>
 
<td style="width: 50px;">
 
</td>
 
<td>
 
<center>
 
<div class="titre_bloc">
 Synopsis
</div><br />
<center>
 
<div style="width: 250px; height: 150px; overflow: auto; font-family: arial; text-align: justify;">
 Bienvenue sur Ombra. J'espère que tu es bien conscient d'une chose : si tu ne te méfie pas de tous ces êtres assoiffés de sang, tu y laisseras ta peau... ou plutôt ton sang. Choisi donc bien ton camp, surtout si tu es un Humain. Tu es libre de devenir le serviteur d'un Vampire ou d'un Demi-vampire. Je te déconseille de rester près d'un Dhampire : ils sont certes des tueurs de Vampires, ça ne les empêche pas de détester les Humains. Pire : ils les méprisent. Tu es vraiment prêt pour ça ? Alors, rejoins-nous vite !<br /><br />Ne reste pas sur ta faim et <a href="http://ombra.purforum.com/t3-mythe" style="color: #A55A3A !important;">lis la suite ...</a>
</div>
 
</center><br /><br />
<div class="titre_bloc">
 Nouvelles
</div><br /> <span style="width: 350px; height: 100px; overflow: auto;"> <span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a></span>
</center>
 
</td>
 
<td style="width: 20px;">
 
</td>
 
<td>
 
<div class="titre_bloc">
 Staff
</div><br />
<center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div><br />
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div>
 
</td>
 
<td>
 
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div><br />
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</center>
 <br />
<div class="titre_bloc">
 Crédits
</div><br />
<div class="bloc_crédits">
 Design par <a href="#" style="color: #A55A3A !important;">Nom</a> ; Codage de la PA par <a href="http://ls-halloween.fr" style="color: #A55A3A !important;">Halloween</a>
</div>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<center>
 <img src="http://img15.hostingpics.net/pics/467523ImagePAOmbra.png" style="width: 250px;" />
</center>
 
</td>
 
<td>
 
<div class="titre_bloc">
 Nos compagnons
</div><br />
<div style="width: 400px; height: 50px; overflow: auto;">
<a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a>
</div>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</div><link href="http://fonts.googleapis.com/css?family=Carrois+Gothic+SC|Vampiro+One|Condiment" rel="stylesheet" type="text/css" />

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

#pageaccueiltroiscolonnes #pageaccueil #forumactif #codage #libreservice

Halloween