<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Display:wght@100&family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Overpass:wght@100&display=swap" rel="stylesheet" />
<style>
/*Scroolbare*/
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #15161b;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #533053;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #32c39e;
}
/*Fond de la Page d'Accueil*/
.fond {
width:800px;
background-color:#15161b;
padding:10px;
height:350px;
}
/*Couleur des liens : normal / survol*/
a {
color:#32c39e;
text-decoration:none;
}
a:hover {
color:#533053;
}
/*Titres*/
.titre {
font-family:'Dancing Script';
font-size:20px;
background-image: linear-gradient(to right, #533053, #475487, #007cac, #00a2b3, #32c39e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
text-align:center;
}
.titre2, .news b {
font-family:'Dancing Script';
font-size:12px;
background-image: linear-gradient(to right, #533053, #475487, #007cac, #00a2b3, #32c39e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:bold;
text-align:center;
}
/*Couleurs des blocs*/
.staffinfos, .topsite, .contexte, .partenaires, .staffinfos2, .news {
background-color:#E4E5ED;
color:#15161b;
font-family:'Overpass';
font-size:12px;
}
/*Bloc liens*/
.navigation a {
display:inline-block;
width:110px;
height:15px;
background-image: linear-gradient(to right, #533053, #475487, #007cac, #00a2b3, #32c39e);
font-family:'Overpass';
font-size:12px;
text-align:center;
color:#E4E5ED;
padding-top:3px;
}
.navigation a:hover {
background-image: linear-gradient(to left, #533053, #475487, #007cac, #00a2b3, #32c39e);
}
/*Contenu bloc Staff*/
.contenustaff {
width:200px;
height:270px;
overflow:hidden;
position:relative;
top:15px;
left:0px;
}
/*Position et Taille du bloc du Staff*/
.staff {
position:relative;
top:0px;
left:0px;
width:120px;
}
/*Petits blocs d'informations*/
.staffinfos {
position:relative;
text-align:center;
font-size:10px;
}
/*Eléments du bloc Staff*/
.staff-img{
display:block;
position:absolute;
height:60px;
width:60px;
overflow:hidden;
left:0;
top:0;
z-index:5;
}
.staff-img>span{
display: block;
transform: rotate(45deg);
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
overflow: hidden;
box-sizing: border-box;
}
.staff-img>span>span{
display: block;
transform: rotate(-45deg);
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
}
.staff-img>span>span>span{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.staff-img>span img{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:100%;
}
/*Cadre top-site*/
.topsite {
position:relative;
top:10px;
left:35px;
width:110px;
height:40px;
text-align:center;
padding:5px;
}
/*Cadre contexte*/
.contexte {
position:relative;
top:-305px;
left:220px;
width:300px;
height:305px;
text-align:justify;
padding:5px;
overflow:hidden;
}
.contexte:hover, .news:hover {
overflow:auto;
}
/*Bloc partenaires*/
.partenaires {
position:relative;
top:-620px;
left:549px;
width:240px;
height:45px;
text-align:center;
padding:5px;
}
/*Bloc membres à l'honneur*/
.honneur {
width:250px;
height:110px;
overflow:hidden;
position:relative;
top:-610px;
left:549px;
}
.staff2 {
position:relative;
top:0px;
left:0px;
width:180px;
}
.staffinfos2 {
position:relative;
text-align:center;
font-size:10px;
}
/*Bloc des nouveautés*/
.news {
width:240px;
height:130px;
overflow:hidden;
position:relative;
top:-610px;
left:549px;
padding:5px;
}
</style>
</head>
<body>
<div class="fond">
<center>
<div class="navigation">
<a href="XXX" target="_blank">Lien 1</a>
<a href="XXX" target="_blank">Lien 2</a>
<a href="XXX" target="_blank">Lien 3</a>
<a href="XXX" target="_blank">Lien 4</a>
<a href="XXX" target="_blank">Lien 5</a>
<a href="XXX" target="_blank">Lien 6</a>
<a href="XXX" target="_blank">Lien 7</a>
</div>
</center>
<div class="contenustaff">
<div class="staffinfos">
<span class="titre">Le staff</span>
</div>
<div class="staff">
<span class="staff-img">
<span><span><span><img src="https://nsm09.casimages.com/img/2020/06/24//2006240344418388816876220.gif"/></span></span></span>
</span>
<div class="staffinfos" style="top:15px;left:35px;">Pseudo<br/>
<a href="XXX" target="_blank">Profil</a> Ϟ <a href="XXX" target="_blank">MP</a>
</div>
</div>
<div class="staff">
<span class="staff-img" style="position:relative;top:15px;left:130px;">
<span><span><span><img src="https://nsm09.casimages.com/img/2020/06/24//2006240344418388816876221.gif"/></span></span></span>
</span>
<div class="staffinfos" style="top:-30px;left:35px;">Pseudo<br/>
<a href="XXX" target="_blank">Profil</a> Ϟ <a href="XXX" target="_blank">MP</a>
</div>
</div>
<div class="staff">
<span class="staff-img" style="position:relative;top:-30px;left:0px;">
<span><span><span><img src="https://nsm09.casimages.com/img/2020/06/24//2006240344428388816876222.gif"/></span></span></span>
</span>
<div class="staffinfos" style="top:-75px;left:35px;">Pseudo<br/>
<a href="XXX" target="_blank">Profil</a> Ϟ <a href="XXX" target="_blank">MP</a>
</div>
</div>
<div class="staff">
<span class="staff-img" style="position:relative;top:-75px;left:130px;">
<span><span><span><img src="https://nsm09.casimages.com/img/2020/06/24//2006240344428388816876223.gif"/></span></span></span>
</span>
<div class="staffinfos" style="top:-120px;left:35px;"><span class="Nougat">Nougat</span><br/>
<a href="XXX" target="_blank">Profil</a> Ϟ <a href="XXX" target="_blank">MP</a>
</div>
</div>
<div class="staff">
<span class="staff-img" style="position:relative;top:-120px;left:0px;">
<span><span><span><img src="https://nsm09.casimages.com/img/2020/06/24//2006240344428388816876224.gif"/></span></span></span>
</span>
<div class="staffinfos" style="top:-165px;left:35px;">Pseudo<br/>
<a href="XXX" target="_blank">Profil</a> Ϟ <a href="XXX" target="_blank">MP</a>
</div>
</div>
</div>
<div class="topsite">
<span class="titre">Nous soutenir</span><br/>
<a href="XXX" target="_blank">Vote pour nous !</a>
</div>
<div class="contexte">
<center><span class="titre">Contexte</span></center>
Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre. Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus, tum iudicio tuo gravissimo et maximo. Ex quo profecto intellegis quanta in dato beneficio sit laus, cum in accepto sit tanta gloria.<br/><br/>
Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.<br/><br/>
Hacque adfabilitate confisus cum eadem postridie feceris, ut incognitus haerebis et repentinus, hortatore illo hesterno clientes numerando, qui sis vel unde venias diutius ambigente agnitus vero tandem et adscitus in amicitiam si te salutandi adsiduitati dederis triennio indiscretus et per tot dierum defueris tempus, reverteris ad paria perferenda, nec ubi esses interrogatus et quo tandem miser discesseris, aetatem omnem frustra in stipite conteres summittendo.<br/><br/>
Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.<br/><br/>
Nam sole orto magnitudine angusti gurgitis sed profundi a transitu arcebantur et dum piscatorios quaerunt lenunculos vel innare temere contextis cratibus parant, effusae legiones, quae hiemabant tunc apud Siden, isdem impetu occurrere veloci. et signis prope ripam locatis ad manus comminus conserendas denseta scutorum conpage semet scientissime praestruebant, ausos quoque aliquos fiducia nandi vel cavatis arborum truncis amnem permeare latenter facillime trucidarunt.
</div>
<div class="partenaires">
<span class="titre">Nos meilleurs amis</span><br/>
<a target="_blank" href="XXX">Ϟ</a>
<a target="_blank" href="XXX">Ϟ</a>
<a target="_blank" href="XXX">Ϟ</a>
<a target="_blank" href="XXX">Ϟ</a>
<a target="_blank" href="XXX">Ϟ</a>
<a target="_blank" href="XXX">Ϟ</a>
<a target="_blank" href="XXX">Ϟ</a>
</div>
<div class="honneur">
<div class="staff2">
<span class="staff-img">
<span><span><span><img src="https://nsm09.casimages.com/img/2020/06/24//2006240344438388816876225.gif"/></span></span></span>
</span>
<div class="staffinfos2" style="top:15px;left:35px;"><span class="titre2">Membre d'honneur</span><br/>
Pseudo
</div>
</div>
<div class="staff2">
<span class="staff-img" style="position:relative;top:15px;left:190px;">
<span><span><span><img src="https://nsm09.casimages.com/img/2020/06/24//2006240344438388816876226.gif"/></span></span></span>
</span>
<div class="staffinfos2" style="top:-30px;left:35px;"><span class="titre2">Meilleur RPGiste</span><br/>
Pseudo
</div>
</div>
</div>
<div class="news">
<center><span class="titre">Nouveautés</span></center>
<b>Date</b> Informations.<br/>
<b>Date</b> Informations plus ou moins longues, vous avez assez de place pour écrire ce que vous voulez.<br/>
<b>Date</b> Informations.<br/>
<b>Date</b> Informations plus ou moins longues.<br/>
<b>Date</b> Informations.<br/>
</div>
</div>
<center><a href="https://tourmaline.forumactif.com/" target="_blank" style="font-size:8px;">Loukoum</a></center>
</body>
</html>
Accueil
