Bonjour tout le monde,
Voici mon premier LS de PA suite à la demande de 1charlotte, faite ici.
LS ~ PA verte très simple + staff en gifs animés :
Voici mon premier LS de PA suite à la demande de 1charlotte, faite ici.
Découvrez un aperçu de cette PA en ligne:
www - et en image
www - et en image
La PA contient en elle-même :
- Une zone titre de bienvenue
- Une zone staff avec gifs animés & affichage complet au survol.
- Une zone "contexte" scrollable.
- Une zone "texte" pour mettre ce que vous voulez.
- Un lecteur de musique
Un simple merci envers le demandeur et le codeur est le bienvenu ^^
- Code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pa 1Charlotte</title>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<style>
.infos-membre a
{-webkit-transition: all .3s ease;
transition: all .3s ease;}
#pa-charlotte {
position: relative;
width: 800px;
min-height: 500px;
background: #c9d669;
margin: 0 auto;
font-family: sans-serif;
line-height: 1.3;
}
#pa-charlotte table td {
vertical-align: top;
}
#pa-charlotte h2 {
margin: 0; padding: 0;
font-family: 'Playfair Display', serif;
font-size: 20px; text-align: center;
color: green;
font-weight: no;
}
#pa-charlotte h1 {
font-size: 30px;
font-style: italic;
margin: 0; padding: 0;
font-family: "times new roman", serif;
}
#pa-charlotte a {
text-decoration: none;
color: green;
border-radius: 10px;
}
#pa-charlotte a:hover {
color: #27421e;
}
ul#staff {
width: 290px;
min-height: 30px;
padding: 0; margin: 0;
list-style-type: none;
position: relative;
}
ul#staff li {
width: 290px;
min-height: 40px;
padding: 0; margin: 0;
list-style-type: none;
z-index: 2;
position: relative;
}
.crop {
width: 290px;
height: 40px;
overflow: hidden;
padding: 0; margin: 0;
}
.over-staff .crop img {
display: block;
width: 290px;
margin: 0 auto;
padding: 0; margin: 0;
position: relative;
z-index: 50;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
/*filter: url(grayscale.svg); /* Firefox 4+ */*/
filter: gray; /* IE 6-9 */
}
.over-staff img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}
ul#staff li.over-staff span.infobulle {
width: 180px;
min-height: 50px;
background: #A8B358;
padding: 10px;
position: absolute;
top: 0; left: -200px;
z-index: 100;
display: none;
}
ul#staff li:hover span.infobulle {
display: block;
}
.infobulle img {
max-width: 100%;
height: auto;
}
.infobulle p {
padding: 1.5px 0; margin: 0;
text-align: center;
}
.pseudo {
text-transform: uppercase;
font-size: 14px;
}
.content-contexte {
max-height: 380px;
overflow-y: auto;
background: #A8B358;
padding: 10px 15px 10px 10px;
border-radius: 15px;
font-size: 14px;
}
.content-textes {
max-height: 380px;
overflow-y: auto;
background: #A8B358;
padding: 10px 15px 10px 10px;
border-radius: 15px;
font-size: 14px;
}
#credits {
position: absolute;
bottom: -15px; right: 0;
font-size: 9px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="pa-charlotte">
<table width="100%" cellspacing="20">
<tr>
<td colspan="3" style="text-align: center;">
<h1>Bienvenue {USERNAME}</h1><br>
<embed src="http://www.archive-host.com/mediaplayer.swf" width="230" height="20" allowscriptaccess="always" allowfullscreen="true" flashvars="height=20&width=230&file=http://www.aht.li/2547163/Ito_Kashitaro_-_One_Step_Ahead.mp3&volume=50&searchbar=false&autostart=false&repeat=false" />
</td>
</tr>
<tr>
<td style="width: 290px;">
<!-- -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
Z O N E S T A F F
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ -->
<h2>Staff</h2>
<ul id="staff">
<!-- ATTENTION, BCP DE BLOC A MANIER AVEC PRUDENCE -->
<!-- MEMBRE 1 & INFOBULLE 1 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif dans l'infobulle -->
<img src="https://31.media.tumblr.com/ce73e07c4d6dd88f397d4d3be9b0cad7/tumblr_n57iupKb5l1souoceo4_400.gif" />
<!-- espace infos du membre -->
<div class="infos-membre">
<p class="pseudo">1charlotte</p>
<p>Administratrice</p>
<p><a href="">mp</a> -
<a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://31.media.tumblr.com/ce73e07c4d6dd88f397d4d3be9b0cad7/tumblr_n57iupKb5l1souoceo4_400.gif" style="top: -45px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 2 & INFOBULLE 2 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 3 & INFOBULLE 3 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 4 & INFOBULLE 4 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 5 & INFOBULLE 5 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 6 & INFOBULLE 6 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 7 & INFOBULLE 7 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 8 & INFOBULLE 8 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 9 & INFOBULLE 9 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
<!-- MEMBRE 10 & INFOBULLE 10 -->
<li class="over-staff">
<span class="infobulle">
<!-- l'image gif de l'infobulle -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" />
<div class="infos-membre">
<p class="pseudo">Pseudo</p>
<p>Administratrice</p>
<p><a href="">mp</a> - <a href="">profil</a></p>
</div>
</span><!-- fin infobulle -->
<div class="crop">
<!-- image gif "aperçu staff" -->
<img src="https://38.media.tumblr.com/77614937aee916b5eba073bcde6f68ca/tumblr_mr13l41awT1s8hnhko1_500.gif" style="top: -65px;"/> <!-- le top, permet de choisir la partie de l'image -->
</div>
</li>
</ul>
<!-- ====== FIN DES STAFF ====== -->
</td>
<td style="width: 240px;">
<!-- CONTEXTE -->
<h2>Contexte</h2>
<div class="content-contexte">
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Commodi, eaque, ipsa, aut minima ipsum vitae provident dolorum pariatur repellat molestias numquam omnis nesciunt <a href="">impedit facilis</a> fugiat ea eos magnam saepe!</p>
<p>Ipsa, similique distinctio amet tempore veniam. Eaque, iusto, saepe, deleniti ea assumenda nulla tempora quas ab distinctio illo sint veniam nostrum in ipsam et consequatur expedita voluptatem facilis odio asperiores.</p>
<p>Deserunt, laboriosam, ipsa, quo adipisci natus aut enim iusto cupiditate asperiores doloremque voluptas reprehenderit vero iste temporibus aliquam. Doloribus, itaque, assumenda ut atque fugit officiis perspiciatis voluptatum qui at pariatur.</p>
<p>Recusandae, ducimus consequatur accusamus tenetur officiis rerum porro itaque soluta vitae libero minima nam modi sunt tempora aut beatae repudiandae exercitationem fugit assumenda quos nihil at dolor optio et suscipit?</p>
<p>Eos, inventore, voluptate, dicta odio commodi pariatur unde laboriosam molestias ullam ipsa ad consectetur amet temporibus quisquam ipsum esse soluta veniam molestiae veritatis possimus. Deserunt error atque sed dicta assumenda?</p>
</div>
</td>
<td>
<!-- TEXTES -->
<h2>Et textes</h2>
<div class="content-textes">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, eaque, ipsa, aut minima ipsum vitae <a href="">provident</a> dolorum pariatur repellat molestias numquam omnis nesciunt impedit facilis fugiat ea eos magnam saepe!</p>
<p>Ipsa, similique distinctio amet tempore veniam. Eaque, iusto, saepe, deleniti ea assumenda nulla tempora quas ab <a href="">distinctio</a> illo sint veniam nostrum in ipsam et consequatur expedita voluptatem facilis odio asperiores.</p>
<p>Deserunt, laboriosam, ipsa, quo adipisci natus aut enim iusto cupiditate asperiores doloremque voluptas reprehenderit vero iste temporibus aliquam. Doloribus, itaque, assumenda ut atque fugit officiis perspiciatis voluptatum qui at pariatur.</p>
<p>Recusandae, ducimus consequatur accusamus tenetur officiis rerum porro itaque soluta vitae libero minima nam modi sunt tempora aut beatae repudiandae exercitationem fugit assumenda quos nihil at dolor optio et suscipit?</p>
<p>Eos, inventore, voluptate, dicta odio commodi pariatur unde laboriosam molestias ullam ipsa ad consectetur amet temporibus quisquam ipsum esse soluta veniam molestiae veritatis possimus. Deserunt error atque sed dicta assumenda?</p>
</div>
</td>
</tr>
</table>
<div id="credits">
PA réalisée sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
</div>
</div>
</body>
</html>
Afin de "rogner" les gifs pour l'aperçu, changer le "margin-top" qui se trouve sur la balise image!
Merci de ne pas toucher aux crédits envers Never-Utopia.
Merci de ne pas toucher aux crédits envers Never-Utopia.
Une question ?
Je serai ravi de vous y répondre là-bas : problème avec votre code.
