API tools faq
paste
Advertisement
gotheim

Fiche LDD #1

gotheim
Feb 7th, 2018
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.17 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <meta charset="utf-8" />
  3. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  4. <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
  5.  
  6. <style>
  7. body {
  8. margin: 0;
  9. }
  10.  
  11. ::-webkit-scrollbar{
  12. width: 10px;
  13. background-color: #fff;
  14. }
  15.  
  16. ::-webkit-scrollbar-thumb {
  17. background: #0cebeb;
  18. background: -webkit-linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  19. background: linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  20. border: 2px solid #fff;
  21. border-radius: 8px;
  22. }
  23.  
  24. ::-webkit-scrollbar:horizontal {
  25. height:6px; }
  26.  
  27. .fpi {
  28. border: 1px solid #eee;
  29. width: 580px;
  30. display: flex;
  31. font-family: 'Nunito Sans', sans-serif;
  32. font-size: 11px;
  33. color: #b7b7b7;
  34. background: #fff;
  35. }
  36.  
  37. .fpi a {
  38. text-decoration: none;
  39. color: #20e3b2;
  40. transition: 0.7s;
  41. }
  42.  
  43. .fpi a:hover {
  44. color: #29ffc6;
  45. }
  46.  
  47. .fpi-sidebar {
  48. width: 200px;
  49. border-right: 1px solid #eeeeee;
  50. padding-top: 5px;
  51. }
  52.  
  53. .fpi-avatar {
  54. width: 200px;
  55. height: 140px;
  56. border-top: 1px solid #eeeeee;
  57. overflow: hidden;
  58. background: #f8f8f8;
  59. display: none;
  60. }
  61.  
  62. #avatar-1 {
  63. display: block;
  64. }
  65.  
  66. .fpi-avatar img {
  67. width: 200px;
  68. min-height: 140px;
  69. }
  70.  
  71. .fpi-listepersonnages {
  72. min-height: 210px;
  73. }
  74.  
  75. .fpi-personnage {
  76. position: relative;
  77. margin: 10px 15px;
  78. cursor: crosshair;
  79. padding-bottom: 5px;
  80. transition: 0.7s;
  81. overflow: hidden;
  82. }
  83.  
  84. .fpi-ligne {
  85. position: absolute;
  86. height: 1px;
  87. width: 170px;
  88. background: -webkit-linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  89. background: linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  90. bottom: 0;
  91. transition:0.7s;
  92. transform: translate(170px,0);
  93. }
  94.  
  95. .fpi-personnage:hover .fpi-ligne {
  96. transform: translate(0,0);
  97. }
  98.  
  99. .fpi-personnage>div {
  100. display: flex;
  101. justify-content: space-between;
  102. align-items: center;
  103. text-transform: uppercase;
  104. transition: 0.7s;
  105. background: -webkit-linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  106. background: linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  107. -webkit-background-clip: text;
  108. }
  109.  
  110. .fpi-personnage:hover>div {
  111. color: transparent;
  112. }
  113.  
  114. .fpi-perso-actif>div {
  115. color: transparent;
  116. }
  117.  
  118. .fpi-personnage>div span:nth-child(2) {
  119. font-size: 14px;
  120. }
  121.  
  122. .fpi-personnage>span:nth-child(3) {
  123. display: block;
  124. margin-top: -2px;
  125. color: #d1d1d1;
  126. text-transform: lowercase;
  127. line-height: 10px;
  128. }
  129.  
  130. .fpi-cadreprincipal {
  131. width: 379px;
  132. display: none;
  133. }
  134.  
  135. #perso-1 {
  136. display: block;
  137. }
  138.  
  139. .fpi-cadre-head {
  140. padding: 10px 15px;
  141. height: 30px;
  142. background: #f8f8f8;
  143. border-bottom: 1px solid #eeeeee;
  144. display: flex;
  145. flex-wrap: wrap;
  146. align-items: center;
  147. }
  148.  
  149. .fpi-cadre-head>div:first-child {
  150. font-size: 14px;
  151. line-height: 13px;
  152. width: 100%;
  153. }
  154.  
  155. .fpi-cadre-head>div:first-child span {
  156. background: -webkit-linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  157. background: linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  158. -webkit-background-clip: text;
  159. color: transparent;
  160. text-transform: uppercase;
  161. font-weight: bold;
  162. }
  163.  
  164. .fpi-cadre-head>div:nth-child(2) {
  165. color: #d1d1d1;
  166. width: 100%;
  167. text-transform: lowercase;
  168. margin-top: -5px;
  169. line-height: 11px;
  170. }
  171.  
  172. .fpi-perso-content {
  173. height: 305px; /** hauteur à adapter en fonction du nombre de personnages; chaque personnage devrait ajouter 28px de hauteur */
  174. margin: 5px;
  175. padding: 5px;
  176. overflow: auto;
  177. text-align: justify;
  178. }
  179.  
  180. .fpi-perso-content::-webkit-scrollbar{
  181. width: 10px;
  182. background-color: #fff;
  183. }
  184.  
  185. .fpi-perso-content::-webkit-scrollbar-thumb {
  186. background: #0cebeb;
  187. background: -webkit-linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  188. background: linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  189. border: 2px solid #fff;
  190. border-radius: 8px;
  191. }
  192.  
  193. .fpi-perso-content::-webkit-scrollbar:horizontal {
  194. height:6px; }
  195.  
  196. .fpi-perso-content b {
  197. text-transform: uppercase;
  198. font-size: 10x;
  199. font-weight: bold;
  200. background: -webkit-linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  201. background: linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  202. -webkit-background-clip: text;
  203. color: transparent;
  204. }
  205.  
  206. .fpi-perso-content ul {
  207. border-left: 2px solid #20e3b2;
  208. padding: 0 10px 0 20px;
  209. }
  210.  
  211. .fpi-perso-content li {
  212. list-style-type: circle;
  213. margin: 2px 0;
  214. }
  215.  
  216. .fpi-lien {
  217. border: 1px solid #eeeeee;
  218. display: flex;
  219. height: 50px;
  220. margin: 5px 0;
  221. }
  222.  
  223. .fpi-type-lien {
  224. background: #eee;
  225. width: 51px;
  226. display: flex;
  227. justify-content: center;
  228. align-items: center;
  229. font-size: 16px;
  230. line-height: 16px;
  231. }
  232.  
  233. .fpi-type-lien>span {
  234. background: -webkit-linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  235. background: linear-gradient(-120deg, #29ffc6, #20e3b2, #0cebeb);
  236. -webkit-background-clip: text;
  237. transition: 0.7s;
  238. }
  239.  
  240. .fpi-lien:hover .fpi-type-lien>span {
  241. color: transparent;
  242. animation: scale 1s infinite;
  243. }
  244.  
  245. .fpi-lien>div:nth-child(2) {
  246. width: 130px;
  247. padding: 2px 5px;
  248. }
  249.  
  250. .fpi-lien>div:nth-child(2) span:first-child {
  251. display: block;
  252. height: 15px;
  253. text-transform: uppercase;
  254. border-bottom: 1px solid #eeeeee;
  255. }
  256.  
  257. .fpi-lien>div:nth-child(2) span:nth-child(2) {
  258. display: block;
  259. color: #d1d1d1;
  260. text-transform: lowercase;
  261. line-height: 11px;
  262. height: 11px;
  263. }
  264.  
  265. .fpi-lien>div:nth-child(2) span:nth-child(3) {
  266. text-transform: uppercase;
  267. font-size: 9px;
  268. }
  269.  
  270. .fpi-lien>div:nth-child(3) {
  271. width: 163px;
  272. overflow: auto;
  273. font-size: 10px;
  274. line-height: 11px;
  275. padding: 2px 3px 2px 0;
  276. }
  277.  
  278. @keyframes scale {
  279. 0% {transform: scale(1,1);}
  280. 50% {transform: scale(1.4,1.4);}
  281. 100 {transform: scale(1,1);}
  282. }
  283.  
  284.  
  285. ::selection {
  286. color: #fff;
  287. background: #20e3b2;
  288. }
  289.  
  290. ::-moz-selection {
  291. color: #fff;
  292. background: #20e3b2;
  293. }
  294.  
  295. a::selection {
  296. color: #fff;
  297. background: #20e3b2;
  298. text-shadow: 1px 0 0 #29ffc6, -1px 0 0 #0cebeb;
  299. }
  300.  
  301. a::-moz-selection {
  302. color: #fff;
  303. background: #20e3b2;
  304. text-shadow: 1px 0 0 #29ffc6, -1px 0 0 #0cebeb;
  305. }
  306. </style>
  307. <script>
  308. function openPerso(evt, persoName, persoAvatar) {
  309. // Declare all variables
  310. var i, tabcontent, tabcontentbis, tablinks;
  311.  
  312. // Get all elements with class="tabcontent" and hide them
  313. tabcontent = document.getElementsByClassName("fpi-cadreprincipal");
  314. for (i = 0; i < tabcontent.length; i++) {
  315. tabcontent[i].style.display = "none";
  316. }
  317.  
  318. tabcontentbis = document.getElementsByClassName("fpi-avatar");
  319. for (i = 0; i < tabcontentbis.length; i++) {
  320. tabcontentbis[i].style.display = "none";
  321. }
  322.  
  323. // Get all elements with class="tablinks" and remove the class "active"
  324. tablinks = document.getElementsByClassName("fpi-personnage");
  325. for (i = 0; i < tablinks.length; i++) {
  326. tablinks[i].className = tablinks[i].className.replace(" fpi-perso-actif", "");
  327. }
  328.  
  329. // Show the current tab, and add an "active" class to the button that opened the tab
  330. document.getElementById(persoName).style.display = "block";
  331. document.getElementById(persoAvatar).style.display = "block";
  332. evt.currentTarget.className += " fpi-perso-actif";
  333. }
  334. </script>
  335. </head>
  336. <body>
  337.  
  338. <div class="fpi">
  339.  
  340. <div class="fpi-sidebar">
  341.  
  342. <div class="fpi-listepersonnages">
  343.  
  344. <div class="fpi-personnage fpi-perso-actif" onclick="openPerso(event, 'perso-1', 'avatar-1')">
  345. <span class="fpi-ligne"></span>
  346. <div><span>Personnage 1</span><span class="sf sf-constellation-o"></span></div>
  347. <span>rang, clan</span>
  348. </div>
  349.  
  350. <div class="fpi-personnage" onclick="openPerso(event, 'perso-2', 'avatar-2')">
  351. <span class="fpi-ligne"></span>
  352. <div><span>Personnage 2</span><span class="sf sf-saturn"></span></div>
  353. <span>rang, clan</span>
  354. </div>
  355.  
  356. <div class="fpi-personnage" onclick="openPerso(event, 'perso-3', 'avatar-3')">
  357. <span class="fpi-ligne"></span>
  358. <div><span>Personnage 3</span><span class="sf sf-rocket-o"></span></div>
  359. <span>rang, clan</span>
  360. </div>
  361.  
  362. <div class="fpi-personnage" onclick="openPerso(event, 'perso-4', 'avatar-4')">
  363. <span class="fpi-ligne"></span>
  364. <div><span>Personnage 4</span><span class="sf sf-moon-2-o"></span></div>
  365. <span>rang, clan</span>
  366. </div>
  367.  
  368. <div class="fpi-personnage" id="credits">
  369. <span></span>
  370. <div><span>Crédits</span><span class="sf sf-star-o"></span></div>
  371. <span>codage: <a href="https://gotheim-work.tumblr.com/" target="_blank">gotheim</a>
  372. <br />icônes: <a target="_blank" href="http://saturnthms.com/font">saturn themes</a></span>
  373. </div>
  374.  
  375. </div>
  376.  
  377.  
  378. <div class="fpi-avatar" id="avatar-1">
  379. <img src="http://image.noelshack.com/fichiers/2018/06/2/1517922461-icon-degrade-coupe.png" />
  380. </div>
  381.  
  382. <div class="fpi-avatar" id="avatar-2">
  383. <img src="http://image.noelshack.com/fichiers/2018/06/3/1518040863-avatar-3.png" />
  384. </div>
  385.  
  386. <div class="fpi-avatar" id="avatar-3">
  387. <img src="http://image.noelshack.com/fichiers/2018/06/3/1518040632-avatar-2.png" />
  388. </div>
  389.  
  390. <div class="fpi-avatar" id="avatar-4">
  391. <img src="http://image.noelshack.com/fichiers/2018/06/3/1518040864-avatar-4.png" />
  392. </div>
  393.  
  394. </div>
  395.  
  396.  
  397.  
  398. <div class="fpi-cadreprincipal" id="perso-1">
  399. <div class="fpi-cadre-head">
  400. <div><span>Explications</span></div>
  401. <div>à lire avant de me poser des questions</div>
  402. </div>
  403. <div class="fpi-perso-content">
  404.  
  405. EXEMPLE DE 3 TYPES DE LIENS (ANIMOSITÉ, AMOUREUX, AMIS):
  406.  
  407. <div class="fpi-lien">
  408. <div class="fpi-type-lien"><span class="sf sf-broken-heart"></span></div>
  409. <div>
  410. <span>NOM DE VOTRE LIEN</span>
  411. <span>rang, clan</span>
  412. <span>Lien ANIMOSITÉ</span>
  413. </div>
  414. <div>
  415. BLA BLA BLA explications sur votre lien
  416. </div>
  417. </div>
  418.  
  419. <div class="fpi-lien">
  420. <div class="fpi-type-lien"><span class="sf sf-heart-2"></span></div>
  421. <div>
  422. <span>NOM DE VOTRE LIEN</span>
  423. <span>rang, clan</span>
  424. <span>Lien ROMANTIQUE</span>
  425. </div>
  426. <div>
  427. BLA BLA BLA explications sur votre lien
  428. </div>
  429. </div>
  430.  
  431. <div class="fpi-lien">
  432. <div class="fpi-type-lien"><span class="sf sf-smiley"></span></div>
  433. <div>
  434. <span>NOM DE VOTRE LIEN</span>
  435. <span>rang, clan</span>
  436. <span>Lien AMICAL</span>
  437. </div>
  438. <div>
  439. BLA BLA BLA explications sur votre lien
  440. </div>
  441. </div>
  442.  
  443. EXEMPLE DE LISTE DE RPS:
  444. <p><b>Ses RP terminés:</b>
  445. <ul>
  446. <li><a href="" target="_blank">www</a> - ft. bla bla bla</li>
  447. <li><a href="" target="_blank">www</a> - ft. bla bla bla</li>
  448. <li><a href="" target="_blank">www</a> - ft. bla bla bla</li>
  449. </ul>
  450. </p>
  451.  
  452. </div>
  453. </div>
  454.  
  455. <div class="fpi-cadreprincipal" id="perso-2">
  456. <div class="fpi-cadre-head">
  457. <div><span>NOM DE VOTRE PERSONNAGE #1</span></div>
  458. <div>Sexe, Rang, Clan, Âge</div>
  459. </div>
  460. <div class="fpi-perso-content">
  461. <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  462. </div>
  463. </div>
  464.  
  465. <div class="fpi-cadreprincipal" id="perso-3">
  466. <div class="fpi-cadre-head">
  467. <div><span>NOM DE VOTRE PERSONNAGE #3</span></div>
  468. <div>Sexe, Rang, Clan, Âge</div>
  469. </div>
  470. <div class="fpi-perso-content">
  471. <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  472. </div>
  473. </div>
  474.  
  475. <div class="fpi-cadreprincipal" id="perso-4">
  476. <div class="fpi-cadre-head">
  477. <div><span>NOM DE VOTRE PERSONNAGE #4</span></div>
  478. <div>Sexe, Rang, Clan, Âge</div>
  479. </div>
  480. <div class="fpi-perso-content">
  481. <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  482. </div>
  483. </div>
  484.  
  485. </div>
  486.  
  487. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!