test mise en page

04/12/2018

Details

Les avatars sont triés par âge, et dans chaque catégorie, par date de naissance croissante. en survolant chaque image, vous trouverez le nom de la personne, sa date de naissance, son activité ou groupe, mais aussi son pays d'origine.

Rappel : Pour chercher un nom que vous connaissez ou une quelconque autre information tel que le nom d'un groupe par exemple, il vous suffit d'appuyer sur la touche F3 de votre clavier et de taper votre recherche.

04/12/2018

html

Code:: <link href='https://fonts.googleapis.com/css?family=Oswald|Open+Sans' rel='stylesheet' type='text/css'>

<center>
  <div class="mainfond">
   <div class="gradefond">
   <img src="https://nsa40.casimages.com/img/2020/04/19/200419093800168465.png" class="headerimg"/>
   <div class="titre1">
   bestiaire <div id="titre2">creatures rodeuses</div>
   </div>

   </div>
   <div class="textstyle">
   <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> Nam malesuada lorem sem. In enim augue, bibendum a libero eget, molestie tincidunt sem. Maecenas feugiat dignissim vulputate. Phasellus sit amet mauris eu augue interdum feugiat. Cras commodo, nibh a maximus tincidunt, leo ex efficitur nisl, et molestie augue dui et sem. Etiam venenatis nisi in eros placerat tempus. Fusce efficitur dui sed fermentum aliquam. Sed sit amet quam eu mauris lacinia ullamcorper. Nam cursus varius blandit. Aenean vestibulum laoreet arcu, nec varius mi malesuada id. Nullam tincidunt vulputate ullamcorper. In non elementum metus. Nunc orci mi, porttitor ac felis vel, molestie bibendum quam. Morbi lacinia maximus ultricies. Quisque nec ex et enim congue commodo.
   Curabitur placerat eros a magna ultricies, in rhoncus massa lobortis. Duis sit amet turpis turpis. In felis lorem, rutrum sit amet condimentum finibus, semper vitae elit. Sed non mauris a urna vehicula iaculis. Nulla eu tortor venenatis, dignissim metus eu, tincidunt tellus. Donec semper accumsan elit, sed volutpat enim ullamcorper malesuada. Donec laoreet ipsum non hendrerit congue. Nunc hendrerit urna purus, nec ullamcorper mi fermentum in. Suspendisse eget dictum tortor. Proin interdum magna id convallis rhoncus. Aliquam fermentum accumsan efficitur. Mauris faucibus enim imperdiet iaculis suscipit.
   </div>
   </div>
  <div class="codecredits">credits</div>
</center>

CSS

Code:: .mainfond {
  width: 500px;
  background: #FFFFFD; /**fond texte**/
  border: 1px solid #EEEDEB;
  padding: 3px;
}

.gradefond { /**fond dégradé**/
  height: 150px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b9e096+0,76bfa5+100 */
background: #b9e096; /* Old browsers */
background: -moz-linear-gradient(left, #b9e096 0%, #76bfa5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #b9e096 0%,#76bfa5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #b9e096 0%,#76bfa5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9e096', endColorstr='#76bfa5',GradientType=1 ); /* IE6-9 */
}

.headerimg {
  padding: 2px;
  border-radius: 100%;
  color: #FFFFFD;
  border: 4px solid #FFFFFD;
  float: left;
  margin: 15px;
  margin-top: 18px;
  width: 100px;
  height: 100px;
}

.titre1 { /*---- titre 1 -----*/
  text-transform: uppercase;
  color: #ffffff;
  padding-top: 50px;
  font-family: Oswald;
  padding-right: 30px;
  font-size: 30px;
  text-align: center;
  line-height:20px;
}

#titre2 { /*---- titre 2 -----*/
  color: #ffffff;
  letter-spacing: 0.3px;
  padding-top: 8px;
  padding-bottom: 5px;
  font-size: 15px;
}

.textstyle {
  font-family: 'Open Sans', sans-serif;
  color: #8E9293;
  font-size: 12px;
  text-align: justify;
  padding: 30px;
  line-height: 13px;
}

.textstyle b {
  font-weight: 700;
  color: #8FCB9F;
}

.codecredits {
  text-transform: uppercase;
  font-family:tahoma;
  text-align:center;
  font-size:9px;
  color: #8E9293;
}

04/12/2018

desert creatures

Coureur★★★✰✰

Les mots ne sont pas toujours ce qui rassemble les gens. Entre ces deux là, c'est plutôt le silence qui a fait son oeuvre. Sköll apprécie les moments de tranquillité en compagnie du vieux loup blanc, loin de toute l'agitation du camp des survivants. Ils n'ont pas besoin de débats ni de grands discours, le calme et le silence leur convient parfaitement.

Ver géant★★★★★

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue ullamcorper ex, at consectetur augue vestibulum ac. Praesent lacus augue, pretium non urna non, dignissim consectetur massa. Nam a consectetur velit, vel fringilla eros. Aliquam in laoreet ex, sodales viverra risus. Quisque luctus ante et leo tempus dapibus. Vivamus vel elit euismod, fringilla eros in, faucibus sapien. Integer sed fermentum erat, id iaculis turpis. Donec ut ipsum accumsan, sagittis nibh eget, tempus erat. Aenean bibendum euismod leo, in lobortis tellus vulputate at.

Raptor★✰✰✰✰

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue ullamcorper ex, at consectetur augue vestibulum ac. Praesent lacus augue, pretium non urna non, dignissim consectetur massa. Nam a consectetur velit, vel fringilla eros. Aliquam in laoreet ex, sodales viverra risus. Quisque luctus ante et leo tempus dapibus. Vivamus vel elit euismod, fringilla eros in, faucibus sapien. Integer sed fermentum erat, id iaculis turpis. Donec ut ipsum accumsan, sagittis nibh eget, tempus erat. Aenean bibendum euismod leo, in lobortis tellus vulputate at.

code by EXORDIUM. - images by pinterest

04/12/2018

FULL HTML

Credits et staff

together we can do so much.

copiright ❧
toute représentation ou reproduction intégrale ou partielle faite sans le consentement des fondateurs du forum ou de ses ayant droit ou ayant cause est illicite. toute reproduction interdite. au cas échéant, nous nous réservons la possibilité d'exercer toute voie de droit.

fondatrice silvën
codage halloween, CCCrush, silvën
design actuel silvën
fond du forum felicia chen

équipe actuelle ❧

• silvën admin fondatrice - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

coded by silvën

Code:: <center>
<div style="background-image: url(https://nsa40.casimages.com/img/2020/05/02/200502063352169703.png);padding: 15px; width:450px;opacity:0.8;box-shadow: 1px 2px 2px 1px darkgray;"><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'><center><div style="background-color:#F8F6F3; margin:1px 0px 1px 0px; border-bottom:#F8F6F3 15px solid;border-top:#B9D3D3 5px solid;">
<div style="width:400px; text-align:center;font-family:'great vibes';font-size:50px; letter-spacing:-1px; color:#95BABA; padding:15px 0px 3px 0px;">Credits et staff</div><div style="width: 350px; color: gray; font-size: 9px; text-transform: uppercase; text-align: center;font-family:helvetica;">together we can do so much.</div><br><div style="width: 400px;"><img src="https://nsa40.casimages.com/img/2020/05/02/200502065323827624.gif" style=" border: 1px solid; width: 75px; height: 75px; border-radius: 100px; padding: 3px; margin-right: 15px;opacity:0.8;" </img><img src="https://nsa40.casimages.com/img/2020/05/02/200502065322512309.gif" style=" border: 1px solid; width: 100px; height: 100px; border-radius: 100px; padding: 3px; margin-right: 15px;opacity:0.8;"</img><img src="https://nsa40.casimages.com/img/2020/05/02/200502065318725775.gif" style=" border: 1px solid; width: 75px; height: 75px; border-radius: 100px; padding: 3px;opacity:0.8;"</img>

</div><center><div style="width: 400px; font-family: ARIAL; font-size: 11px; line-height: 12px; text-align: justify; background-color:#fff;padding: 10px 10px 10px 10px;"><font style="font-family:great vibes;font-size: 20px;color:#AEAEAE;">copiright</font><font style="font-family:arial;color:#AEAEAE;"> ❧
[color=#83C78B][i]toute représentation ou reproduction intégrale ou partielle faite sans le consentement des fondateurs du forum ou de ses ayant droit ou ayant cause est illicite. toute reproduction interdite.[/i][/color] au cas échéant, nous nous réservons la possibilité d'exercer toute voie de droit.

[color=#83C78B][i]fondatrice[/i][/color] silvën
[color=#83C78B][i]codage[/i][/color] halloween, CCCrush, silvën
[color=#83C78B][i]design actuel[/i][/color] silvën
[color=#83C78B][i]fond du forum[/i][/color] felicia chen </font></div><br><div style="width: 400px; font-family: ARIAL; font-size: 11px; line-height: 12px; text-align: justify; background-color:#fff;padding: 10px 10px 10px 10px;"><font style="font-family:great vibes;font-size: 20px;color:#AEAEAE;">équipe actuelle</font><font style="font-family:arial;color:#AEAEAE;"> ❧

<img src="https://nsa40.casimages.com/img/2020/05/02/200502065323827624.gif" style="float: left; width: 60px; height: 60px; border: 1px solid; border-radius: 100px; padding:3px; opacity:0.8; margin: 8px; padding-bottom:-8px; margin-top: 5px;"/> • [color=#83C78B][b]silvën[/b][/color] [i]admin fondatrice[/i] - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

</font></center><center><div style="font-size: 11px; padding-top:10px;">coded by silvën</div></center></div></div></div>
</center>

04/12/2018

UN GROS GIF - A EDITER

CREDITS & STAFF.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Et harum quidem rerum facilis est et expedita distinctio.

Code:: <center><div style="background-image: url(https://nsa40.casimages.com/img/2020/05/02/200502063352169703.png);padding: 15px; width:450px;opacity:0.8;box-shadow: 1px 2px 2px 1px darkgray;"><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'><center><div style="background-color:#F8F6F3; margin:1px 0px 1px 0px; border-bottom:#F8F6F3 15px solid;border-top:#B9D3D3 5px solid;"><br><div style="width: 400px;"><img src="https://thumbs.gfycat.com/NeedySphericalIndochinesetiger-size_restricted.gif" width="400px;" style="border: 1px solid darkgray;padding: 2px;opacity:0.7;"/> </div>
[center]<div style="font-family:times new roman; font-size:20px;text-align:center;text-transform: uppercase;border-bottom: 1px solid #B9D3D3;color: gray;width:400px;">CREDITS & STAFF.</div><div style="width: 400px; font-family: ARIAL; font-size: 11px; line-height: 12px; text-align: justify; background-color:#fff;padding: 10px 10px 10px 10px;">
<font style="font-family:great vibes;font-size: 20px;">At</font><font style="font-family:helvetica;"> vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

<font style="font-family:great vibes;font-size: 20px;">Et harum quidem rerum facilis est et expedita distinctio.</font>[/center]
</div>
</div></div>
</center>

ENCORE UN A EDITER

Lorem ipsum

This world is so blind, cold as ice.

SOUS TITRE.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Et harum quidem rerum facilis est et expedita distinctio.

Code:: <center>
<div style="background-image: url(https://nsa40.casimages.com/img/2020/05/02/200502063352169703.png);padding: 15px; width:450px;opacity:0.8;box-shadow: 1px 2px 2px 1px darkgray;"><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'><center><div style="background-color:#F8F6F3; margin:1px 0px 1px 0px; border-bottom:#F8F6F3 15px solid;border-top:#B9D3D3 5px solid;">
<div style="width:400px; text-align:center;font-family:'great vibes';font-size:50px; letter-spacing:-1px; color:#95BABA; padding:15px 0px 3px 0px;">Lorem ipsum</div><div style="width: 350px; color: gray; font-size: 9px; text-transform: uppercase; text-align: center;font-family:helvetica;">This world is so blind, cold as ice.</div><br><div style="width: 400px;"><img src="https://nsa40.casimages.com/img/2020/05/02/200502065323827624.gif" style=" border: 1px solid; width: 75px; height: 75px; border-radius: 100px; padding: 3px; margin-right: 15px;opacity:0.8;" </img><img src="https://nsa40.casimages.com/img/2020/05/02/200502065322512309.gif" style=" border: 1px solid; width: 100px; height: 100px; border-radius: 100px; padding: 3px; margin-right: 15px;opacity:0.8;"</img><img src="https://nsa40.casimages.com/img/2020/05/02/200502065318725775.gif" style=" border: 1px solid; width: 75px; height: 75px; border-radius: 100px; padding: 3px;opacity:0.8;"</img>
</div>
[center]<div style="font-family:times new roman; font-size:20px;text-align:center;text-transform: uppercase;color: gray;width:400px;">SOUS TITRE.</div><div style="width: 400px; font-family: ARIAL; font-size: 11px; line-height: 12px; text-align: justify; background-color:#fff;padding: 10px 10px 10px 10px;">
<font style="font-family:great vibes;font-size: 20px;">At</font><font style="font-family:helvetica;"> vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

<font style="font-family:great vibes;font-size: 20px;">Et harum quidem rerum facilis est et expedita distinctio.</font>[/center]
</div>
</div></div>
</center>