Welcome

Halloween Page d'accueil

Scénarithèque

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Scénarithèque

ModernBB

Optimisé Il y a un jeu d'onglets sur le staff, et des infobulles sur les partenaires et réseaux.
Réalisé pour le forum Scénarithèque.

Retour

Codage page d'accueil Scénarithèque Halloween Forumactif

CSS

/********************************************************** PAGE ACCUEIL **********************************************************/
.pa_scenari {
        width: 850px;
        background: #f9e8e1;
        margin: auto;
        padding: 1%;
        box-sizing: border-box;
        color: #84868e;
        font-family: Arial, sans-serif;
        font-size: 12px;
}

.pa_scenari::after {
        clear: both;
        display: block;
        content: "";
}

.pa_droite {
    	margin: .4% 0 0;
  	width: 30%;
}

.pa_milieu {
    	margin: 1.2% .5% 0;
  	width: 36%;
}

.pa_gauche {
  	width: 33%;
}

.pa_gauche, .pa_milieu, .pa_droite {
        float: left;
}

.pa_scenari a {
  	transition: .5s all;
}

/* TITRES */
/* Bienvenue */
.pa_scenari h2 {
        color: #a3939e;
        font-variant: small-caps;
        font-size: 26px;
        border: 0;
        font-family: 'Noto Sans', sans-serif;
        display: inline-block;
}

/* Autres titres */
.pa_scenari h3 {
        color: #f9e7e0;
        text-shadow: 1px 1px #000;
        text-transform: uppercase;
        font-size: 14px;
        border: 0;
  	font-family: 'Noto Sans', sans-serif;
        text-align: center;
}

/* LIENS JE CHERCHE FORUM SCENARIO */
.pa_boutons {
    	float: right;
  	width: 40%;
}

.pa_boutons a {
        background: #676b76;
        color: #fff;
        display: inline-block;
        width: 48%;
        text-align: center;
        margin: 1%;
}

.pa_boutons a:hover {
  	background: #a3939e;
}

a.pa_cherche {
        display: block;
        background: #a3939e;
        margin: auto;
        width: 150px;
}

/* STAFF */
.pa_gauche h3 {
        text-align: left;
        margin: 0 0 0 10%;
}

.bloc_staff {
        background: #676b76;
        color: #eae6e5;
        font-size: 14px;
        margin: -5% 0 0;
        padding: 5% 5% 0;
}

/* Systeme onglets */
.paonglet {
        cursor: pointer;
        display: inline-block;
        font-size: 26px;
        margin: 0;
}
                 
.paonglet_1 {
  	color: #a3939e;
}
          
.contenu_paonglet {
        display: none;
        height: 130px;
}

/* Image staff */
img.img_staff {
        border: 3px solid;
        float: left;
        margin: 0 10% 0 0;
}

/* Titres : Pseudo, rang */
.bloc_staff h4 {
        font-size: 20px;
        font-weight: normal;
}

.bloc_staff h5 {
        font-size: 14px;
        line-height: 1.5;
        font-weight: normal;
}

.bloc_staff h5 span {
        display: block;
        text-transform: uppercase;
}

/* Present absent */
.pa_statut {
        color: #fff;
        padding: 1%;
        display: table;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        margin: 2% 0;
}

.pa_statut.present {
    	background: #bacb9d;
}

.pa_statut.absent {
  	background: #f8a24f;
}

/* Liens staff */
.contenu_paonglet a {
    	color: #fff;
}

.contenu_paonglet a:hover {
    	color: #a3939e;
  	background: none;
}

/* A LHONNEUR */
.pa_honneur {
        background: #a3939e;
        padding: 2%;
        text-align: center;
        margin: 2% 0 0;
}

.pa_honneur h3 {
        text-align: center;
        margin: 0;
}

.pa_honneur div {
        display: inline-block;
        margin: 0 2% 2%;
}

.pa_honneur span {
        display: block;
        color: #000;
        text-align: left;
}

/* INTRODUCTION */
.pa_introduction {
        background: #faf1ee;
        height: 183px;
        width: 100%;
        padding: 2%;
        box-sizing: border-box;
        overflow: auto;
        text-align: justify;
}

/* DERNIERS AJOUTS */
.pa_news {
        background: #676b76;
        width: 100%;
        height: 133px;
        overflow: auto;
        padding: 2%;
        box-sizing: border-box;
        margin: 1.9% 0 0;
        color: #f9e6df;
}

.pa_news h3 {
        text-align: left;
        margin: 0;
}

.pa_news div {
        margin: 0 5% 4%;
        line-height: 1;
}

.pa_news div a {
        color: #f9e6df;
        font-variant: small-caps;
}

.pa_news div a:hover {
    	color: #a3939e;
}

.pa_news div span {
    	font-style: italic;
  	font-size: 10px;
}

/* PARTENAIRES */
.pa_partenaires {
        background: #a3939e;
        padding: 0 5% 2%;
        box-sizing: border-box;
        text-align: center;
        height: 183px;
}

.pa_partenaires h3 {
    	padding: 2% 0 0;
}

/* Bulles */
.pa_infobulle {
    	display: inline-block;
  	margin: 1%;
}

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

.pa_infobulle > div::before {
        border: 5px solid transparent;
        border-bottom: 10px solid #f1ded9;
        content: "";
        width: 0;
        top: -10px;
        position: absolute;
        left: 46.5%;
}

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

.pa_contenu_bulle {
        background: #f1ded9;
        padding: 2%;
        text-align: center;
        width: 150px;
}

.pa_contenu_bulle {
        background: #f1ded9;
        padding: 2%;
        text-align: center;
        width: 140px;
        margin-top: 5px;
        font-size: 10px;
}

.pa_contenu_bulle h4 {
    	text-transform: uppercase;
}

/* LIENS UTILES */
.liens_rapides a {
        color: #84868e;
        background: #fff;
        display: block;
        text-align: center;
        margin: 2% auto 0;
        padding: .7% 0;
        width: 90%;
}

.liens_rapides a:hover {
  	color: #f9e6df;
  	background: #a3939e;
}

a.scenari_credits {
        text-align: right;
        display: block;
        font-style: italic;
        text-transform: lowercase;
        letter-spacing: -1px;
        font-size: 10px;
        margin: 0 2% 0 0;
        color: #b3afaf;
}

HTML

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

#scenaritheque #pageaccueil #forumactif #codage #libreservice

Halloween