Welcome

Halloween Fiches & Messages

Bingo Book Naruto

Halloween, LS codage Forumactif Fiches & Messages Autres Bingo Book

Toutes versions

Optimisé Système d'onglet pour ce bingo book : un onglet par personne recherchée.
Trois versions sont prévues dans le CSS : une pour Suna, une pour Kiri et une pour les errants. Il suffit de changer le data-faction="suna" par "kiri" ou "errants". Les icônes des onglets sont à modifier dans le CSS, tout comme les couleurs générales.

Retour

HTML

--><div id="container_bingo"><input id="bb_suna_1" class="inp" type="radio" name="tab-group" checked="checked"><label for="bb_suna_1" class="lab"><span class="bb_pseudo">Nom Prénom</span></label><input id="bb_suna_2" class="inp" type="radio" name="tab-group"><label for="bb_suna_2" class="lab"><span class="bb_pseudo">Nom Prénom</span></label><input id="bb_suna_3" class="inp" type="radio" name="tab-group"><label for="bb_suna_3" class="lab"><span class="bb_pseudo">Nom Prénom</span></label><input id="bb_suna_4" class="inp" type="radio" name="tab-group"><label for="bb_suna_4" class="lab"><span class="bb_pseudo">Nom Prénom</span></label><ul id="bb_fiches"><!--

PREMIER RECHERCHE 
--><li class="bb_fiche_1"><div class="bb_pseudo">Nom Prénom</div><div class="bb_avatar"><img src="https://imgur.com/oCP929u.png" alt="/"></div><div class="bb_detail"><span>Rang :</span> X<br><span>Grade :</span> Genin<br><span>Village :</span> Sunagakure no Satō<br><span>Localisation :</span> Kaze<br><br><span>Méfaits :</span><br>A voler des malabars</div><div class="bb_informations"><h5>Informations</h5><br><p>Se promène avec avec une tortue rouge qui prend le thé.</p></div><div class="bb_recompenses"><img src="https://imgur.com/rIViROT.png" alt="Bingo Book de Suna RIViROT">1 Ryō</div></li><!--

SECOND RECHERCHE 
--><li class="bb_fiche_2"><div class="bb_pseudo">Nom Prénom</div><div class="bb_avatar"><img src="https://imgur.com/l3XpfCT.png" alt="/"></div><div class="bb_detail"><span>Rang :</span> X<br><span>Grade :</span> Genin<br><span>Village :</span> Sunagakure no Satō<br><span>Localisation :</span> Kaze<br><br><span>Méfaits :</span><br>A voler des malabars</div><div class="bb_informations"><h5>Informations</h5><br><p>Se promène avec avec une tortue rouge qui prend le thé.</p></div><div class="bb_recompenses"><img src="https://imgur.com/rIViROT.png" alt="Bingo Book de Suna RIViROT">1 Ryō</div></li><!--

TROISIEME RECHERCHE 
--><li class="bb_fiche_3"><div class="bb_pseudo">Nom Prénom</div><div class="bb_avatar"><img src="https://imgur.com/oCP929u.png" alt="/"></div><div class="bb_detail"><span>Rang :</span> X<br><span>Grade :</span> Genin<br><span>Village :</span> Sunagakure no Satō<br><span>Localisation :</span> Kaze<br><br><span>Méfaits :</span><br>A voler des malabars</div><div class="bb_informations"><h5>Informations</h5><br><p>Se promène avec avec une tortue rouge qui prend le thé.</p></div><div class="bb_recompenses"><img src="https://imgur.com/rIViROT.png" alt="Bingo Book de Suna RIViROT">1 Ryō</div></li><!--

QUATRIEME RECHERCHE
--><li class="bb_fiche_4"><div class="bb_pseudo">Nom Prénom</div><div class="bb_avatar"><img src="https://imgur.com/l3XpfCT.png" alt="/"></div><div class="bb_detail"><span>Rang :</span> X<br><span>Grade :</span> Genin<br><span>Village :</span> Sunagakure no Satō<br><span>Localisation :</span> Kaze<br><br><span>Méfaits :</span><br>A voler des malabars</div><div class="bb_informations"><h5>Informations</h5><br><p>Se promène avec avec une tortue rouge qui prend le thé.</p></div><div class="bb_recompenses"><img src="https://imgur.com/rIViROT.png" alt="Bingo Book de Suna RIViROT">1 Ryō</div></li></ul></div><!--

--></div>

CSS

/************************** BINGO BOOK **************************/
:root {
  	--couleur-suna: #bb3030;
  	--couleur-kiri: #3074bb;
  	--couleur-errants: #30bb74;
}

#bingo_book {
        width: 700px;
        margin: auto;
}

#container_bingo {
    display: grid;
    grid-template-areas:
        "a e"
        "b e"
        "c e"
        "d e";
    justify-content: center;
    grid-template-rows: 50px 50px 50px auto;
}

label[for="bb_suna_1"],
label[for="bb_kiri_1"],
label[for="bb_errants_1"] {
  	grid-area: a;
}

label[for="bb_suna_2"],
label[for="bb_kiri_2"],
label[for="bb_errants_2"] {
  	grid-area: b;
}

label[for="bb_suna_3"],
label[for="bb_kiri_3"],
label[for="bb_errants_3"] {
  	grid-area: c;
}

label[for="bb_suna_4"],
label[for="bb_kiri_4"],
label[for="bb_errants_4"] {
  	grid-area: d;
}

span.bb_pseudo {
        position: absolute;
        right: 1.5em;
        top: .2em;
        font-size: 0;
        width: 150px;
        text-align: right;
}

#container_bingo .inp {
        width: 0;
        margin: 0;
        visibility: hidden;
}

#container_bingo .lab {
        background-size: contain;
        margin: 0 .8em 0 0;
        height: 24px;
        width: 18px;
  	position: relative;  	
}

#bingo_book[data-faction='suna'] #container_bingo .inp:checked + .lab {
    	background: url(https://imgur.com/TnewHsx.png);
}

#bingo_book[data-faction='kiri'] #container_bingo .inp:checked + .lab {
    	background: url(https://imgur.com/L20eZzt.png) no-repeat center;
    	background-size: contain;
}

#bingo_book[data-faction='errants'] #container_bingo .inp:checked + .lab {
    	background: url(https://imgur.com/Mk7CYLj.png) no-repeat center;
    	background-size: contain;
}

#bingo_book[data-faction='suna'] #container_bingo .lab {
        background: url(https://imgur.com/imBXbun.png);
}

#bingo_book[data-faction='kiri'] #container_bingo .lab {
    	background: url(https://imgur.com/9kXMAaJ.png) no-repeat;  	
    	background-size: contain;
}

#bingo_book[data-faction='errants'] #container_bingo .lab {
    	background: url(https://imgur.com/spfEhaQ.png) no-repeat;  	
    	background-size: contain;
}

#bingo_book[data-faction='suna'] #container_bingo .inp:checked + .lab .bb_pseudo,
#bingo_book[data-faction='kiri'] #container_bingo .inp:checked + .lab .bb_pseudo,
#bingo_book[data-faction='errants'] #container_bingo .inp:checked + .lab .bb_pseudo {
    	font-size: 1.5em;
}

#bingo_book[data-faction='suna'] #container_bingo .inp:not(:checked) + .lab:hover .bb_pseudo,
#bingo_book[data-faction='kiri'] #container_bingo .inp:not(:checked) + .lab:hover .bb_pseudo,
#bingo_book[data-faction='errants'] #container_bingo .inp:not(:checked) + .lab:hover .bb_pseudo {
        font-size: 1.5em;
}

#container_bingo .inp:checked + .lab {
    	transition: .3s;
}

ul#bb_fiches {
    background: url(https://imgur.com/i0jtmsN.png) no-repeat bottom #f4f4f4;
    display: grid;
    grid-area: e;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    height: 680px;
    list-style: none;
    margin: 0;
    padding: 3em;
    width: 445px;
    box-sizing: border-box;
}

#container_bingo #bb_suna_1:checked ~ #bb_fiches .bb_fiche_1,
#container_bingo #bb_suna_2:checked ~ #bb_fiches .bb_fiche_2,
#container_bingo #bb_suna_3:checked ~ #bb_fiches .bb_fiche_3,
#container_bingo #bb_suna_4:checked ~ #bb_fiches .bb_fiche_4,
#container_bingo #bb_kiri_1:checked ~ #bb_fiches .bb_fiche_1,
#container_bingo #bb_kiri_2:checked ~ #bb_fiches .bb_fiche_2,
#container_bingo #bb_kiri_3:checked ~ #bb_fiches .bb_fiche_3,
#container_bingo #bb_kiri_4:checked ~ #bb_fiches .bb_fiche_4,
#container_bingo #bb_errants_1:checked ~ #bb_fiches .bb_fiche_1,
#container_bingo #bb_errants_2:checked ~ #bb_fiches .bb_fiche_2,
#container_bingo #bb_errants_3:checked ~ #bb_fiches .bb_fiche_3,
#container_bingo #bb_errants_4:checked ~ #bb_fiches .bb_fiche_4 {
    	visibility: visible;
}

#bb_fiches > li {
        grid-area: 1 /1;
        width: 100%;
        visibility: hidden;
}

/* Contenu */
#bb_fiches li {
        display: grid;
        grid-template-areas:
            "a a"
            "b c"
            "d d"
            "e e";
}

.bb_pseudo {
        grid-area: a;
        font-family: 'Unica One', sans-serif;
        text-transform: uppercase;
        font-size: 2em;
        margin: 0 0 .5em;
}

#bingo_book[data-faction='suna'] .bb_pseudo {
        color: var(--couleur-suna);
}

#bingo_book[data-faction='kiri'] .bb_pseudo {
        color: var(--couleur-kiri);
}

#bingo_book[data-faction='errants'] .bb_pseudo {
        color: var(--couleur-errants);
}

.bb_avatar img {
    grid-area: b;
    height: 280px;
    width: 180px;
    object-fit: cover;
}

.bb_detail {
        grid-area: c;
        width: 170px;
        margin: 0 0 0 15px;
        height: 100%;
        overflow: auto;
}

.bb_detail span::before {
        background: url(https://i.imgur.com/VtbpuiI.png) no-repeat;
        display: inline-block;
        width: 15px;
        height: 10px;
        content: "";
        background-size: contain;
}

.bb_detail span {
        font-weight: bold;
        text-transform: uppercase;
        color: #000;
}

.bb_informations {
    	grid-area: d;
}

.bb_informations h5 {
        text-transform: uppercase;
        color: #fff;
        font-family: 'Unica One', sans-serif;
        color: #fff;
        font-size: 1.5em;
        font-weight: normal;
        margin: 1em 0 0;
        padding: 0 0 .2em;
        display: block;
        width: 110px;
}

#bingo_book[data-faction='suna'] .bb_informations h5 {  	
        border-bottom: 2px solid var(--couleur-suna);
}

#bingo_book[data-faction='kiri'] .bb_informations h5 {  	
        border-bottom: 2px solid var(--couleur-kiri);
}

#bingo_book[data-faction='errants'] .bb_informations h5 {  	
        border-bottom: 2px solid var(--couleur-errants);
}

.bb_informations p {
    background: url(https://imgur.com/LoCBjwA.png) no-repeat center #fff;
    background-size: contain;
    color: #000;
    font-size: 1em;
    height: 140px;
    overflow: auto;
    padding: 1em 2em;
}

.bb_recompenses {
        grid-area: e;
        margin: .4em auto 0;
        text-transform: uppercase;
        font-family: 'Unica One', sans-serif;
        font-size: 3em;
        display: flex;
        align-items: center;
}

#bingo_book[data-faction='suna'] .bb_recompenses {  	
        color: var(--couleur-suna);
}

#bingo_book[data-faction='kiri'] .bb_recompenses {  	
        color: var(--couleur-kiri);
}

#bingo_book[data-faction='errants'] .bb_recompenses {  	
        color: var(--couleur-errants);
}

.bb_recompenses img {
    	width: 50px;
}

#bingobook #naruto #forumactif #codage #libreservice

Halloween