par NC
- Code:
<div class="shopping">
<form>
<input name="shopping" id="resetshoppin" type="reset"/>
<input name="shopping" id="resume" type="radio"/>
<input name="shopping" id="idees" type="radio"/>
<input name="shopping" id="galerie" type="radio"/>
<div class="shhead">
<img width="100" height="100" src="https://i.pinimg.com/736x/a8/7c/2b/a87c2b71dc3833ccf616df6e5bbefff4.jpg" style="border: 1px solid #DDDDDD;border-radius:100px;" />
<b>Théandre Carmin</b>
</div>
<div class="shfilters">
<label for="resetshoppin"><i class="cp cp-refresh"></i> Refresh</label>
<label for="resume"><i class="cp cp-agenda-o"></i> Résumé</label>
<label for="idees"><i class="cp cp-group"></i> Idées de liens</label>
<label for="galerie"><i class="cp cp-image"></i> Galerie</label>
</div>
<div class="shitems" style="background-color:#F6F6F6;">
<!-- comienzo item -->
<div class="shitem resume">
<div class="shitembody" style="background-color:#FAFAFA; font-size:12px;"><center>
Monochrome <span style="color: #F948C9;">—</span> 24 ans <span style="color: #F948C9;">—</span> 14/02 <span style="color: #F948C9;">—</span> Masculin <span style="color: #F948C9;">—</span> Pan <span style="color: #F948C9;">—</span> Canadien <span style="color: #F948C9;">—</span> Employé polyvalent de restauration <span style="color: #F948C9;">—</span> Lux <span style="color: #F948C9;">—</span> Situation financière compliquée <span style="color: #F948C9;">—</span> Old Toronto</center>
</div>
</div>
<!-- final item -->
<!-- comienzo item -->
<div class="shitem resume">
<div class="shitembody" style="background-color:#FAFAFA; font-size:12px;"><center>Chiant <span style="color: #39E237;">—</span> Bavard <span style="color: #39E237;">—</span> Bruyant <span style="color: #39E237;">—</span> Charmeur <span style="color: #39E237;">—</span> Chiant <span style="color: #39E237;">—</span> Flemmard <span style="color: #39E237;">—</span>Étourdi <span style="color: #39E237;">—</span> Entêté <span style="color: #39E237;">—</span> Rêveur <span style="color: #39E237;">—</span> Chiant <span style="color: #39E237;">—</span> Curieux <span style="color: #39E237;">—</span> Passionné <span style="color: #39E237;">—</span> Autonome <span style="color: #39E237;">—</span> Égoïste <span style="color: #39E237;">—</span> Aimable <span style="color: #39E237;">—</span> Chiant</center>
</div>
</div>
<!-- final item -->
<!-- comienzo item -->
<div class="shitem resume">
<div class="shitembody" style="background-color:#FAFAFA; font-size:12px;">
<p><span style="color: #F948C9;">—</span> Né au Canada, adopté par un couple de deux femmes ; l'une photographe et l'autre peintre</p>
<p><span style="color: #F948C9;">—</span> Une famille aimante, dont il n'a pas réellement à se plaindre ; pour autant, le manque de couleurs dans sa vie (littéralement) se fait ressentir au milieu de ce couple passionné et dont les professions nécessitent (plus ou moins) de voir les couleurs</p>
<p><span style="color: #F948C9;">—</span> En dehors de ça, il passe une enfance relativement tranquille et banale</p>
<p><span style="color: #F948C9;">—</span> C'est lorsqu'il entre dans les études supérieures que sa vie devient un peu plus galère ; il déménage à Toronto, où il vivra seul grâce à l'aide financière de ses mères</p>
<p><span style="color: #F948C9;">—</span> En plus de cela, c'est là-bas qu'il développe un caractère volage, dans le seul but de goûter à l'amour (et ainsi aux couleurs), n'y récoltant que davantage de problèmes (en plus de ne même pas avoir réussi à atteindre son objectif une seule fois)</p>
<p><span style="color: #F948C9;">—</span> Ses études ne se passent pas très bien, et il se réoriente plusieurs fois avant de finalement décider cette année de quitter les cours, au moins pour le moment (et sans en avertir sa famille, bien sûr)</p>
<p><span style="color: #F948C9;">—</span> Probablement histoire d'alléger un peu sa conscience, il se met néanmoins en tête de trouver un travail et c'est ainsi qu'il rejoint le premier fast-food venu en tant qu'employé polyvalent de restauration</p>
</div>
</div>
<!-- final item -->
<!-- comienzo item -->
<div class="shitem idees">
<div class="shitemicon"><i class="game-icon game-icon-psychic-waves"></i></div>
<div class="shitembody">
<div class="shtit">Titre du lien</div>
<div class="shtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non augue mauris. Phasellus vitae erat id arcu tristique faucibus a ac felis. Vivamus accumsan nibh nisi. Sed ultrices condimentum sapien.</div>
</div>
</div>
<!-- final item -->
<!-- comienzo item -->
<div class="shitem galerie" style="border: 0px solid #DDDDDD;">
<div class="shitembody" style="background-color:#F6F6F6; font-size:12px;">
<center><img width="100" height="100" src="https://i.pinimg.com/736x/55/ff/cb/55ffcb73cb21b5f8d4516999c2911cf1.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /> <img width="100" height="100" src="https://i.imgur.com/b9vz6lz.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /> <img width="100" height="100" src="https://i.imgur.com/zuCZqbo.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /> <img width="100" height="100" src="https://i.imgur.com/OU3o7Z4.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /> <img width="100" height="100" src="https://i.imgur.com/go2wcKA.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /> <img width="100" height="100" src="https://i.imgur.com/3LtHowT.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /> <img width="100" height="100" src="https://i.imgur.com/M8HsYL3.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /> <img width="100" height="100" src="https://i.imgur.com/tsyQtYM.jpg" style="border: 1px solid #DDDDDD;border-radius:5px;" /></center>
</div>
</div>
<!-- final item -->
</div>
</form>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<style>.shopping { --bckg1: #f0f0f0; --bckg2: #f3f3f3; --bckg3: #f6f6f6; --bckg4: #f9f9f9; --bckg4: #fafafa; --border1:1px solid #ddd; --border1-c:#ddd; --border2:1px solid #ccc; --accent1:#FF43CE; --accent2:#35E634; --gbckg1:linear-gradient(180deg, var(--accent1), var(--accent2)); --gbckg2:linear-gradient(90deg, var(--accent1), var(--accent2)); --text:#999; --text2:#333; --title:#fff; --shadow: drop-shadow(2px 2px white); } .shopping input#resume:checked ~ .shitems .shitem:not(.resume) {display:none;} .shopping input#idees:checked ~ .shitems .shitem:not(.idees) {display:none;} .shopping input#galerie:checked ~ .shitems .shitem:not(.galerie) {display:none;} .shopping input#aaah:checked ~ .shitems .shitem:not(.aaah) {display:none;} .shopping input#resume:checked ~ .shfilters label[for="resume"] i, .shopping input#idees:checked ~ .shfilters label[for="idees"] i, .shopping input#galerie:checked ~ .shfilters label[for="galerie"] i, .shopping input#aaah:checked ~ .shfilters label[for="aaah"] i { background-image:var(--gbckg1);color:transparent; }</style><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"/><link href="https://dl.dropbox.com/s/thpzqkqhf1pzqnx/game-icons.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet"/><link href="//dl.dropbox.com/s/89pu189jpmr8kzm/shopping.css" rel="stylesheet"/>
