Welcome

Halloween Administration

Atlas

Halloween, LS codage Forumactif Fiches & Messages Relations Atlas

Toutes versions

Optimisé ATTENTION ce LS nécessite d'avoir un logiciel de retouche d'image qui intègre la transparence : l'image d'entête du premier message ainsi que les fonds des blocs de relation (second message) sont des images à retravailler. Il nécessite également d'avoir accès au panneau d'administration ou d'avoir un forum à soi. Non, pas trop contraignant le truc. Un contenu RP ainsi qu'une fiche de présentations tout aussi chiants sont disponibles \o/

Retour

Codage Atlas relations Halloween Forumactif

Créer une page HTML

<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Atlas - relations</title>
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet" />
<style>
::-webkit-scrollbar {
    	background-color: #FAFAFA;
    	border: 4px solid #2B2B2B;
    	height: 9px;
    	width: 9px;
}

::-webkit-scrollbar-corner {
    	background: #2B2B2B;
    	width: 3px;
}
  
::-webkit-scrollbar-thumb {
    	background-color: #FAFAFA;
    	border-color: #2B2B2B;
    	border-radius: 10px;
    	border-style: solid;
    	border-width: 1px 2px;
    	height: auto;
    	width: 5px;
}
  
.ar_relations {
  	font-family: 'Heebo', sans-serif; 
  	width: 550px; 
  	margin: auto; 
  	background: #f2f2f2; 
	line-height: 2;
  	color: #151515;
  	font-size: 10px;
  	border: 1px solid #151515;
} 
  
.ar_relations a, .ar_relations a:hover {
	text-decoration: none !important;
  	color: #151515 !important;
}
  
.ar_caractere {
  	margin: 0 6%; 
  	width: 50%;
  	float: left;
  	color: #151515;
  	text-align: justify;
}
  
.ar_caractere div {
  	text-transform: uppercase;
  	letter-spacing: 5px;
  	font-weight: bold;
  	font-family: arial;
}
  
.ar_caractere div::before {
  	content: "•";
    	color: #798afc;
    	font-size: 30;
    	float: left;
    	margin: -7% 5% -7% 0;
}
  
.ar_caractere p {
  	width: 95%;
  	padding: 0 5% 0 0;
  	height: 150px;
  	overflow: auto;
}
  
.ar_gun {
  	float: left;
  	margin: 0 5% 0 0;
}
  
.ar_infos {
    	width: 35%;
    	padding: 2% 1%;
    	float: left;
    	letter-spacing: 2px;
    	background: #dbdbdb;
    	margin: 7% 0;
}
  
.clear {
  	clear: both;
}
  
.paonglets {
    	margin: 5% 2% 0 5%;
    	float: left;
}
  
.paonglet {
    	display: block;
    	cursor: pointer;
    	background: #798afc;
    	width: 150px;
    	margin: 0 0 10% 0;
    	padding: 2% 0;
    	text-align: center;
    	text-transform: uppercase;
    	color: #fff;
    	letter-spacing: 1px;
    	border: 3px solid #dfdfdf;
}
            
.paonglet_0 {}
            
.paonglet_1 {
}
  
.contenu_paonglets {
    	width: 55%;
    	float: right;
    	margin: 5% 2% 0 0;
    	border-right: 5px solid #798afc;
    	padding: 0 5% 0 0;
  	height: 130px;
  	overflow: auto;
}
          
.contenu_paonglet {
  	display: none;
}
  
div#contenu_paonglet_rpencours a, #contenu_paonglet_liensrecherches span {
    	color: #798afc !important;
   	font-weight: bold;
    	text-transform: uppercase;
   	font-size: 12px;
   	font-family: arial;
   	padding: 0 2% 0 0;
}
  
div#contenu_paonglet_rpencours a::before, #contenu_paonglet_liensrecherches span::before {
    	content: "•";
    	font-size: 14px;
    	padding: 0 2% 0 0;
}
  
em {
    	color: #a4a4a4;
    	letter-spacing: 1px;
}
  
.ar_resume {
    	width: 95%;
    	padding: 0 5% 0 0;
    	height: 50px;
    	overflow: auto;
}
  
div#contenu_paonglet_infossupplementaires span::before {
    	color: #798afc;
    	font-size: 18px;
  	content: "•";
    	padding: 0 2% 0 0;
}
  
div#contenu_paonglet_infossupplementaires {
    	line-height: 1.5;
}
  
.ar_footer {
    	background: url(https://i.imgur.com/brJP23m.jpg);
    	height: 211px;
    	box-sizing: border-box;
    	text-align: center;
}
  
.ar_footer a {
    	display: inline-block;
    	cursor: pointer;
    	background: #212121;
    	width: 150px;
    	margin: 5% 2%;
    	padding: 1% 0;
    	text-align: center;
    	text-transform: uppercase;
    	color: #fff !important;
      	letter-spacing: 1px;
    	border: 3px solid #dfdfdf;
}
  
.ar_footer div {
    	color: #fff;
    	font-style: italic;
    	padding: 10% 0 0 0;
    	font-size: 20px;
    	letter-spacing: -2px;
    	font-weight: bold;
    	font-family: Helvetica;
}
  
.ar_footer a:hover {
	color: #798afc !important;
}
  </style>
  </head>
  <body><div id="top"></div><div class="ar_relations">
  	<img src="https://i.imgur.com/k8aidm4.jpg" />
	<div class="ar_caractere">
          	<div>
                  	Hiroki Nishimura
        	</div>
        	<p>
                    Atlas est un "bon vivant", il est drôle (sans forcément l'vouloir), il est le premier à lever la main quand un poto a besoin d'aide ou pour les sales besognes. Il se fout de ta religion, de savoir si t'as des couilles en or ou si tu vies dans une poubelle comme un certain Meiji. C'est un mec charismatique qui ne vit que pour Exodus et son frère Karas. Entièrement dévoué, quoi qu'il arrive.
                    <br /><br />
                    Cependant un mot trop haut et il part en cacahuète. Il est bagarreur le blondinet, il aime servir des salades de phalanges et des coups de tête saignants. Il est manipulateur et profiteur aussi Hiroki. Il jauge discrètement, fait l'abruti tout en observant le type du Shinsen qui est au fond du bar. Il profite de ton moment de déprime pour t'introduire des idées à lui dans le crâne. 
                    <br /><br />
                    Atlas c'est aussi un vrai baratineur ! Certaines apprécient, d'autres le trouvent lourd. Mais il persiste le bougre, parce qu'il est joueur. Mais au fond c'est un branleur, ça l'arrange de se faire envoyer promener, car il n'est pas sérieux et ne cherche pas à se taper tout le quartier. Il n'a pas le temps, vous voyez.
                    <br /><br />
                    Sa loyauté étouffera probablement, ça aussi il le sait, et il en est fier. Atlas est brave, ça ne l'effraie pas. Et puis l'existence c'est fragile de toute façon, s'il peut dépasser les limites il le fera sans hésitation. Oui, la vie il la méprise. Tout comme il méprise ses ennemis. Il est suffisamment fort pour ça, il est le meilleur. L’arrogance est sienne.
                    <br /><br />
                    Si lui t'insultes ou se paye ta tête, t'avises pas d'en faire de même car sa colère est sans frontière. S'il pète une durite il peut vite faire rouler ta tête par terre. Il est sanguin l'Exodus, et il l'a déjà prouvé.
        	</p>
     	</div>
          
        <div class="ar_infos">
          	<img src="https://i.imgur.com/pxF5PWE.png" class="ar_gun" /> Fils d'un PDG mort
                <div class="clear"></div>
          	<img src="https://i.imgur.com/pxF5PWE.png" class="ar_gun" /> Bosse parfois dans un garage
                <div class="clear"></div>
          	<img src="https://i.imgur.com/pxF5PWE.png" class="ar_gun" /> Frère de Karas
        </div>
        <div class="clear"></div>
          
        <script type="text/javascript">
            	//
            	</script>
          
          	<div class="paonglets">
                	<span class="paonglet_0 paonglet" id="paonglet_rpencours" onmouseover="javascript:change_paonglet('rpencours');">
                          	RP en cours
                  	</span>
                  
                	<span class="paonglet_0 paonglet" id="paonglet_liensrecherches" onmouseover="javascript:change_paonglet('liensrecherches');">
                          	Liens recherchés
                  	</span>
                  
                	<span class="paonglet_0 paonglet" id="paonglet_infossupplementaires" onmouseover="javascript:change_paonglet('infossupplementaires');">
                          	Infos supplémentaires
                  	</span>
		</div>

<div class="contenu_paonglets">
                	<div class="contenu_paonglet" id="contenu_paonglet_rpencours">
                          	<a href="http://rift.forumactif.org/t571-disastrophe-botlas">Disastrophe</a> <em>feat boycott</em><br />
                          	<a href="http://rift.forumactif.org/t593-comme-des-rats-utopie-blacky-karas">Comme des rats</a> <em>feat blacky, utopie et karas</em><br />
                          	<a href="http://rift.forumactif.org/t399-intrigue-2-destruction">Destruction</a> <em>intrigue</em><br />
                          	<a href="http://rift.forumactif.org/t600-revanche-tsun-tsun#6871">Revanche !</a> <em>feat tsun tsun</em><br />
                          	<a href="http://rift.forumactif.org/t645-une-journee-comme-les-autres-ft-atlas#7433">Une journée comme les autres</a> <em>feat Prime</em>
			</div>

<div class="contenu_paonglet" id="contenu_paonglet_liensrecherches">
				<span>Lien recherché</span>
                          	<div class="ar_resume">
                                  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ex erat, iaculis et condimentum sed, dignissim in tortor. Sed non lectus nulla. Proin ut bibendum metus. Quisque nec ligula eget ex pretium pretium vitae eget nulla. Mauris id neque in enim venenatis mattis sed luctus tortor. Cras et dictum augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eu enim gravida, rutrum justo nec, commodo risus.
                          	</div>
                          	<br />
                          	<span>Lien recherché</span>
                          	<div class="ar_resume">
                                  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ex erat, iaculis et condimentum sed, dignissim in tortor. Sed non lectus nulla. Proin ut bibendum metus. Quisque nec ligula eget ex pretium pretium vitae eget nulla. Mauris id neque in enim venenatis mattis sed luctus tortor. Cras et dictum augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eu enim gravida, rutrum justo nec, commodo risus.
                          	</div>
			</div>

<div class="contenu_paonglet" id="contenu_paonglet_infossupplementaires">
                          	<span>Atlas drague beaucoup mais se dégonfle souvent quand il s'agit de passer à l'acte</span><br />
                          	<span>Il ne fera jamais rien contre son gang</span><br />
                          	<span>Merci de venir avec une base sinon ça va être compliqué \o/</span><br />
                          	<span>J'aime pas les RP érotiques ou cul-cul ._.</span>                         
			</div>
          	</div>
        
          	<script type="text/javascript">
            	//
            	</script>
  		<div class="clear"></div>
  		<div class="ar_footer">
                  	<div>
                          	« J'porte Exodus comme Atlas porte le monde »
                  	</div>
                  	<a href="http://rift.forumactif.org/t501-atlas-j-porte-exodus-comme-atlas-porte-le-monde" target="_blank">
                          	Introduction
                  	</a>
                  	<a href="http://rift.forumactif.org/privmsg?mode=post&u=123" target="_blank">
                          	Contact
                  	</a>
  		</div>
</div>
  </body>

A mettre dans votre message

Télécharger le PSD du haut

Message 2

Pour ajouter une relation

Télécharger le PSD du fond des blocs

Fusionner l'avatar choisi avec le rectangle correspondant, puis mettre le tout en masque d'écrétage du "rectangle 1".

#atlas #relations #forumactif #codage #libreservice

Halloween