Welcome

Halloween Administration

Naruto

Halloween, LS codage Forumactif Fiches & Messages Administration Naruto

Toutes versions

Optimisé Une fiche créée pour un forum qui n'aura pas vu le jour. Les liens utiles apparaissent au survol de la croix.

Retour

Codage Naruto administration Halloween Forumactif

CSS

.fiche_administrative {
        width: 650px;
        margin: auto;
        background: #fff;
        position: relative;
        font-family: 'Montserrat', sans-serif;
  	overflow: hidden;
}

.fiche_administrative header {
        background: url('https://i.imgur.com/gKJXN8M.png');
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
}

.fiche_administrative header div {
        background: url('https://imgur.com/8gylqwu.png') no-repeat center;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
}

.fiche_administrative h2 {
        background: #000;
        border: 0;
        color: #fff;
        font-family: Staatliches, cursive;
        font-size: 50px;
        letter-spacing: 2px;
        margin: 20px 0 0;
        padding: 0 10%;
        display: flex;
        align-items: center;
        height: 70px;
        font-weight: normal;
}

.fiche_administrative h3 {
        border: 0;
        color: #fff;
        font-family: Montserrat, sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        margin: 1.3% 0 0;
        text-shadow: 1px 1px #000;
        text-transform: uppercase;
}

.fiche_administrative .content {
        display: flex;
        width: 90%;
        margin: 13% auto;
}

.fiche_administrative .naruto {
        align-items: center;
        align-self: center;
        display: flex;
        font-family: Staatliches, cursive;
        font-size: 100px;
        height: 571px;
        justify-content: center;
        width: 180px;
        line-height: 1;
        margin: 0 -65px 0 0;
  	color: #000;
}

.fiche_administrative .contenu {
        border-left: 1px solid #dadada;
        padding: 2% 4% 10% 15%;
        background: #fff;
        width: 90%;
}

.fiche_administrative .paragraphe {
    	display: flex;
}

.fiche_administrative p {
        font-size: 12px;
        margin: 0;
  	text-align: justify;
}

.fiche_administrative .numero {
        background: #000;
        color: #fff;
        font-family: Staatliches, cursive;
        font-size: 20px;
        letter-spacing: 2px;
        padding: 2%;
        display: block;
        height: fit-content;
        margin: 0 5% 0 0;
        width: 80px;
        text-align: center;
}

.fiche_administrative .important {
        border-bottom: 10px solid #00FFFE;
        line-height: .2;
        display: inline-block;
}

.block_noir {
        content: "";
        display: block;
        width: 80px;
        height: 170px;
        background: #000;
        position: absolute;
        bottom: 0;
}

.fiche_administrative .credit {
        align-items: center;
        background: #000;
        color: #fff;
        display: flex;
        font-family: Staatliches, cursive;
        font-size: 14px;
        height: 66px;
        justify-content: center;
        letter-spacing: 2px;
        position: relative;
        text-align: center;
        width: 80%;
        z-index: 1;
        flex-direction: column;
}

.fiche_administrative footer {
        display: flex;
        position: relative;
        width: 100%;
        margin: 15% 0 0 12%;
}

.fiche_administrative .liens_ut {
        text-align: center;
        width: 8%;
}

.blocs_liens_sujets {
        align-items: center;
        background: #1f1f1f;
        bottom: -170px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        font-family: Staatliches, cursive;
        font-size: 13px;
        height: 104px;
        justify-content: center;
        left: 0;
        position: absolute;
        transition: .5s all;
        width: 80%;
}

.blocs_liens_sujets a {
        height: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f5f5f5;
  	text-decoration: none;
}

.fiche_administrative .liens_ut:hover .blocs_liens_sujets {
    	bottom: 66px;
}

.blocs_liens_sujets span {
        color: #00fffe;
        padding: 0 10% 0 0;
}

.fiche_administrative .liens_ut img {
  	transition: .5s all;
  	margin: 25% 0 0;
}

.fiche_administrative .liens_ut:hover .cross {
    	transform: rotate(190deg);
}

#credit_hallow {
        color: #f3f3f3;
        display: block;
        font-family: Staatliches, cursive;
        font-size: 10px;
}

HTML

#naruto #administration #forumactif #codage #libreservice

Halloween