<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Marine</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:400,700'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pa_staff">
<div class="tabs-onglets">
<a href="#asia">▲</a>
<a href="#feldt">▲</a>
<a href="#camila">▲</a>
<a href="#eliot">▲</a>
<a href="#margot">▲</a>
<a href="#maxine">▲</a>
<a href="#lenny">▲</a>
<a href="#cleolya">▲</a>
</div>
<div id="contenu">
<div id="asia" class="content-staff">
<img src="https://pa1.narvii.com/6665/4d694f4440443653d99b95439f312367eaf1d2d1_128.gif">
<span class="pseudo">Asia I. Ferrari</span>
<span class="rang">le fossile staffien</span>
<span class="mc">c. nevada eova-tessier + keyla haven hepburn</span>
<span class="links"><a href="http://www.i-love-harvard.com/u2189" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=2189" target="_blank">message</a> </span>
</div>
<div id="feldt" class="content-staff">
<img src="https://78.media.tumblr.com/26bce0a18f2ad0de10a4e1a5c7416404/tumblr_inline_orrj88fe201up6rfw_100.gif">
<span class="pseudo">Feldt Crossroad</span>
<span class="rang">la force tranquille</span>
<span class="mc">Xaver Von Hohenzollern</span>
<span class="links"><a href="http://www.i-love-harvard.com/u1712" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=1712" target="_blank">message</a> </span>
</div>
<div id="camila" class="content-staff">
<img src="https://78.media.tumblr.com/6af5f9d4d3c445dedf04128096715f2c/tumblr_inline_omgb2clzvd1rt3h0f_500.gif">
<span class="pseudo">Camila Wildingham</span>
<span class="rang">la catin des bois</span>
<span class="mc">meghan harrison + azraël-sky strudwick</span>
<span class="links"><a href="http://www.i-love-harvard.com/u3670" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=3670" target="_blank">message</a> </span>
</div>
<div id="eliot" class="content-staff">
<img src="https://78.media.tumblr.com/599fb69a6ad0aff5f2717ef7172cd4c7/tumblr_inline_odqbwbtiPS1u6kzlb_500.gif">
<span class="pseudo">Eliot Llewellyn</span>
<span class="rang">pause caca</span>
<span class="mc">romie barclay</span>
<span class="links"><a href="http://www.i-love-harvard.com/u7044" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=7044" target="_blank">message</a> </span>
</div>
<div id="margot" class="content-staff">
<img src="https://78.media.tumblr.com/820bf00465d5ea69fc06a26620c6db2a/tumblr_inline_otgk5jclpe1tcn0o3_500.gif">
<span class="pseudo">Margot Weasley</span>
<span class="rang">la partenaire de vitaa</span>
<span class="mc">hecate malcolm + reena oesterwind</span>
<span class="links"><a href="http://www.i-love-harvard.com/u28" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=28" target="_blank">message</a> </span>
</div>
<div id="maxine" class="content-staff">
<img src="https://78.media.tumblr.com/41d465c48b5766f6903ebe80b6ea98c9/tumblr_inline_ods8v58AsO1t0yoye_500.gif">
<span class="pseudo">Maxine Thomspers</span>
<span class="rang">l'éleveuse de moutons</span>
<span class="mc"> </span>
<span class="links"><a href="http://www.i-love-harvard.com/u6150" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=6150" target="_blank">message</a> </span>
</div>
<div id="lenny" class="content-staff">
<img src="https://78.media.tumblr.com/514affcf1e570d6305184350c3fbd69a/tumblr_inline_og8m1yGCMk1smr9mv_500.gif">
<span class="pseudo">Lenny J. Malcolm</span>
<span class="rang">le grand méchant loup</span>
<span class="mc">sacha c. angharad + gabano wolfgang</span>
<span class="links"><a href="http://www.i-love-harvard.com/u6793" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=6793" target="_blank">message</a> </span>
</div>
<div id="cleolya" class="content-staff">
<img src="https://78.media.tumblr.com/7f3100771e93bb8a2719a24af31f6d14/tumblr_inline_ouc6bmpTHM1rif5je_100.gif">
<span class="pseudo">Cléolya A. Strauss</span>
<span class="rang">la cutance incarnée</span>
<span class="mc">ava a-s strudwick</span>
<span class="links"><a href="http://www.i-love-harvard.com/u7393" target="_blank">profil</a> | <a href="http://www.i-love-harvard.com/privmsg?mode=post&u=7393" target="_blank">message</a> </span>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/darkdreams/a-pen-by-marine-WzzypL */
body {
background-image: url("https://i.imgur.com/L8jZHsY.png");
}
.pa_staff {
position: relative;
width: 320px;
height: 130px;
background: rgba(2555, 255, 255, 0.8);
border: 1px solid #d3d3d3;
border-radius: 5px;
overflow: hidden;
margin: 0 auto;
}
.pa_staff .tabs-onglets {
position: absolute;
bottom: 0;
padding: 5px;
width: calc(100% - 10px);
height: 20px;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.pa_staff .tabs-onglets a {
color: #89a896;
text-decoration: none;
padding: 0 10px;
transition: 0.25s all ease-in-out;
}
.pa_staff .tabs-onglets .selected,
.pa_staff .tabs-onglets a:hover {
color: #f0868d;
transform: rotate(180deg);
}
.pa_staff #contenu {
padding: 10px;
overflow: auto;
width: 100%;
height: 130px;
}
.pa_staff #contenu h1 {
margin-top: 0;
}
.pa_staff .content-staff {
text-align: center;
padding: 5px;
}
.pa_staff .content-staff img {
width: 70px;
border-radius: 50%;
box-shadow: 3px 2px 0px 5px #c4cbbc;
float: left;
margin-right: 10px;
margin-top: -3px;
}
.pa_staff .content-staff .pseudo {
position: relative;
z-index: 10;
display: inline-block;
background: #f1f1f1;
padding: 2px 15px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
font: 700 14px "Lato";
text-transform: uppercase;
color: #f0868c;
transform: rotate(-2deg);
}
.pa_staff .content-staff .rang {
position: relative;
display: inline-block;
width: 65%;
font: 9px Times;
color: #6f925f;
letter-spacing: 1px;
text-transform: uppercase;
background: #f1eff0;
border-radius: 5px;
padding: 2px 0;
margin-top: -10px;
}
.pa_staff .content-staff .rang:before,
.pa_staff .content-staff .rang:after {
content: "";
position: absolute;
width: 3px;
height: 3px;
background-color: #9c9c9e;
top: 40%;
border-radius: 50%;
}
.pa_staff .content-staff .rang:before {
left: 5px;
}
.pa_staff .content-staff .rang:after {
right: 5px;
}
.pa_staff .content-staff .mc {
display: inline-block;
width: 74%;
font: 9px "Lato";
text-transform: lowercase;
color: rgba(0, 0, 0, 0.4);
font-style: italic;
}
.pa_staff .content-staff .links {
font: 10px "Arial";
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0, 0, 0, 0.3);
}
.pa_staff .content-staff .links a {
text-decoration: none;
font-weight: bold;
}
.pa_staff .content-staff .links a:first-child {
color: #f0868c;
}
.pa_staff .content-staff .links a:last-child {
color: #6f925f;
}
/*Downloaded from https://www.codeseek.co/darkdreams/a-pen-by-marine-WzzypL */
$(function() {
$('.tabs-onglets').each(function(){
var onglets = this;
var ongletActuel = $('a:first', onglets).addClass('selected').attr('href');
// Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
$(ongletActuel).show().siblings().hide();
// Gestion de l'événement clic
$('a', onglets).click(function(e) {
var idOnglet = $(this).attr('href');
// Si autre onglet, afficher le contenu demandé et masquer le contenu restant
if (idOnglet != ongletActuel) {
$(idOnglet).fadeIn().siblings().hide();
// Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
$('a', onglets).removeClass('selected');
$(this).addClass('selected');
ongletActuel = idOnglet;
}
// Empêche le déclenchement du lien
e.preventDefault();
});
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
jQuery
v3.3.1
