Les Chroniques d'Elysia

Code::  <div class="My-Guidebook"> <div class="GuideLeft"> <div class="GuideHead"><i class="game-icon game-icon-spell-book"></i> <head1>Grimoire<span>CLIQUEZ SUR LE MENU POUR NAVIGUER</span></head1></div> <div class="GuidebookTabs"> <label for=""></label> <label for=""></label> <ho>titre</ho> <label for=""></label> <label for=""></label> </div>  </div> <div class="GuideRight"> <input id="guide1" type="radio" name="ongle" checked="" /> <div class="guide-info"> <bloque><head3>Avant-propos</head3> </bloque>  </div>  <input id="guide2" type="radio" name="ongle" /> <div class="guide-info"> <bloque><head3>Crédits</head3> </bloque>  </div>  </div> </div>

Code:: <script src="//pull.cappuccicons.com/cpf.js"></script> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/> <link href="https://dl.dropbox.com/s/thpzqkqhf1pzqnx/game-icons.css" rel="stylesheet"/> <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" />

Code::  <style> :root { --white: #fff; --white1: #ddd; --white2: #bbb; --background:#f9eee8; --accent1: #a35f4c; --accent2: #db9b77; --accent3: #728d94; --accent4: #2e5868; --main: #a3928a; --dark: #544b45; --dark2:#b6a8a8; --dark1:#c8aea0; --dark1t:#c8aea050; --odin: #87a0cc; --pharaon: #dfb46a; --nuhoko: #86b684; --babel: #e37a85; --surprise: #92cdd1; --staff:#8e80bc; --grad1: linear-gradient(150deg, var(--main), var(--accent2)); --grad2: linear-gradient(150deg, var(--white), var(--accent2)); --stats: url(https://i.ibb.co/hZ1WsBc/Capa-600.png); --stats1: url(https://i.ibb.co/C6QPRfK/Capa-541-copia.png); } @font-face { font-family: "Campton Light"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONLIGHT_OTF.otf") format("opentype"); } @font-face { font-family: "Campton Bold"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONSEMIBOLD_OTF.otf") format("opentype"); } @font-face { font-family: "Campton Regular"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONBOOK_OTF.otf") format("opentype"); } @font-face { font-family: "Campton Black"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONEXTRABOLD_OTF.otf") format("opentype"); } @font-face { font-family: "Pirata One"; src: url("https://files.jcink.net/uploads2/entouragethemes/PirataOne_Regular.ttf") format("truetype"); } body { background:var(--background); margin:0px;} *, :before, :after { border: none; box-sizing: border-box; margin: 0; padding: 0;} ::-webkit-scrollbar { width: 5px; height:5px;} ::-webkit-scrollbar-track { background-color: var(--background);} ::-webkit-scrollbar-thumb { background: var(--main); border-radius: 10px; border-left: 2px solid var(--black); border-right:2px solid var(--background);}

Code:: .My-Guidebook { float:left; left:0; right:0; margin:60px 15% 150px; width:1025px; background:var(--dark1t); padding:20px; border-radius:25px;} .GuideLeft { float:left; background:var(--dark1t); border-radius:25px; padding:20px; width:260px; overflow:hidden; margin-right:20px; position:sticky; top:-5px;} .GuideHead { background:var(--grad1); border-radius:25px 25px 0 0; padding:20px; width:260px; overflow:hidden; margin-left:-20px; margin-top:-20px;} .GuideLeft i { font-size:120px; color:var(--dark1); float:left; line-height:10px; margin-top:25px; margin-left:-40px; } .GuideRight { width:700px; background:#; border-radius:20px; float:left; font-family:'Campton Regular'; line-height:20px; text-align:justify; font-size:11px; } .GuideRight bloque { background:#fff1ea; border-radius:25px; display:block; padding:35px; margin-bottom:30px;} .My-Guidebook head1 { font-size:25px; width:260px; float:left; margin-top:-50px; text-align:center; margin-left:-20px; color:var(--white); text-transform:uppercase; font-family:'Campton Bold'; text-shadow:0 0 2px #666;} .My-Guidebook head1 span { display:block; font-size:8px; letter-spacing:1px; background:var(--background); padding:5px; border-radius:5px; width:fit-content; margin:auto; color:var(--dark); text-shadow:0 0 0; } .My-Guidebook head2 { font-family:'Campton Bold'; background:var(--grad1); padding:4px 9px; border-radius:5px; text-transform:uppercase; font-size:16px; display:block; margin:15px 0; color:var(--white); } .My-Guidebook head3 { position:relative; background:#eadad1; border-radius: 0 0 25px 25px; padding:0 20px 20px; font-family:'Pirata One'; color:var(--accent1); font-size:35px; display:block; margin-left:1%; margin-top:-35px; text-align:center; margin-bottom:20px; width:fit-content;} .My-Guidebook head4 { font-family:'Campton Bold'; color:var(--accent3); display:block; border-bottom:1px solid var(--white2); margin:20px 0 5px; font-size:15px;} .My-Guidebook p { padding:5px 20px;} .My-Guidebook a { text-decoration:none; color:var(--accent1); font-family:'Campton Bold'; border-bottom: 1px dashed var(--accent3); padding-bottom:2px; transition:0.4s linear;} .My-Guidebook a:hover { border-bottom:1px solid var(--accent3); transition:0.4s linear;} .My-Guidebook b { color:Var(--accent1);} .guide-info span.be { padding:10px 20px; background:var(--dark1t); display:block; border-radius:10px; font-family:'Campton Bold'; margin:10px;} .guide-info div.bu { padding:10px; background:var(--dark1t); display:block; border-radius:10px; font-family:'Campton Bold'; margin:5px 20px; width:fit-content;} .guide-info ul.listi { margin:5px 20px;} /* Tabs */ .GuidebookTabs { padding:20px 0;} .GuidebookTabs ho { font-family:'Pirata One'; color:var(--main); text-align:center; padding:10px; font-size:20px; display:block; margin:20px 0 0;} .My-Guidebook div.guide-info { display: none;} .My-Guidebook input { display: none;} .My-Guidebook input:checked + div.guide-info { display: block;} .My-Guidebook div.guide-info { width: 100%;} .My-Guidebook label { width:220px; display:block; font-size:12px; text-transform:uppercase;} .My-Guidebook label he { font-size:13px; font-family:'Campton Bold'; color:var(--dark); text-align:center; padding:5px; display:block; background:var(--dark1); border-radius:10px; margin-bottom:5px; } .My-Guidebook label hi { font-size:9px; font-family:'Campton Regular'; display:block; margin:10px 0 15px; text-align:center; color:var(--main);} .My-Guidebook label a { display:block; margin-bottom:10px;} .My-Guidebook a.admini { padding:10px 15px; background:Var(--grad1); font-family:'Campton Bold'; font-size:12px; text-transform:uppercase; color:var(--white); display:inline-block; margin-right:10px; border-radius:10px;} bloque img.bloqim { width:350px; border-radius:10px;} bloque td { padding-right:20px; vertical-align: top;} bloque .embpic img { width: 85px; padding-left:20px;} bloque table tr { border-bottom:2px solid var(--main);} bloque .embtext { padding:10px; background:var(--dark1t); margin-bottom:5px; border-radius:5px; font-size:11px;} bloque .embtit { padding-top:0px; width:130px; font-size:40px; font-family:'Pirata One'; color:var(--accent1);} /*bloque .embtit::after { content: ''; width: 172px; background: #eedcd3; height: 4px; position: absolute; margin-left: -105px; margin-top: 35px;} bloque tr:nth-child(8) .embtit::after { width:165px;} bloque tr:nth-child(9) .embtit::after, bloque tr:nth-child(10) .embtit::after, bloque tr:nth-child(11) .embtit::after, bloque tr:nth-child(12) .embtit::after { width: 160px; margin-left:-90px;} bloque tr:nth-child(10) .embtit::after { width:150px;} bloque tr:nth-child(13) .embtit::after { width: 165px; margin-left:-90px; margin-top:30px;} bloque tr:nth-child(14) .embtit::after { width: 165px; margin-left:-60px;}*/ </style>

Code:: <link href="{RSS}" type="application/rss+xml" rel="alternate" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Grimoire</title><link rel="shortcut icon" href="https://cdn3.iconfinder.com/data/icons/role-playing-game-5/340/game_magic_fantasy_spell_flame_fire-512.png" /> <link rel="altertnate" type="application/rss+xml" href="{RSS}" /><meta name="description" content="" />  <script> jQuery('.GuidebookTabs a').click(function(){ jQuery('html, body').animate({ scrollTop: jQuery( jQuery(this).attr('href') ).offset().top }, 500); return false; }); function openPopup(id) { var popup = document.getElementById('popup' + id); popup.style.display = 'flex'; } function closePopup(id) { var popup = document.getElementById('popup' + id); popup.style.display = 'none'; }</script>

Code::  <style> :root { --white: #fff; --white1: #ddd; --white2: #bbb; --background:#AAADDA; --accent1: #544365; --accent2: #BA9ABF; --accent3: #728d94; --accent4: #467486; --accent5: #93bb96; --main: #6c6d85; --dark: #E2D0E8; --dark2:#6c6d85; --dark1:#6c6d85; --dark1t:#B8B7D6; /* groups */ --odin: #87a0cc; --pharaon: #dfb46a; --nuhoko: #86b684; --babel: #e37a85; --surprise: #92cdd1; --staff:#8e80bc; /* gradients */ --grad1: linear-gradient(150deg, var(--main), var(--accent2)); --grad2: linear-gradient(150deg, var(--white), var(--accent2)); /* images */ --tablon1: url(https://sig.grumpybumpers.com/host/MayaSeiko.gif); --tablon2: url(https://zupimages.net/up/24/29/fn8g.png); --flowers: url(https://zupimages.net/up/24/29/zquc.png); --flower1: url(https://zupimages.net/up/24/29/g749.png); --flower2: url(https://zupimages.net/up/24/29/bmvl.png); --flower3: url(https://zupimages.net/up/24/29/ghxt.png); --header: url(https://zupimages.net/up/24/29/a12v.png); --stats: url(https://zupimages.net/up/24/29/a6cq.png); --stats1: url(https://zupimages.net/up/24/29/s7kw.png); --rol1: url(https://i.ibb.co/JnCBFBX/rol1.png); --rol2: url(https://i.ibb.co/5GMJNzK/rol2.png); --rol3: url(https://i.ibb.co/g93K2vQ/rol3.png); --rol4: url(https://i.ibb.co/Dt6DdY1/rol4.png); --corner: url(https://zupimages.net/up/24/29/waol.png); --forum1: url(https://zupimages.net/up/24/29/k4tc.png); --dragon: url(https://zupimages.net/up/24/29/ddah.png); --forum2: url(https://zupimages.net/up/24/29/lb5o.png); } @font-face { font-family: "Campton Light"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONLIGHT_OTF.otf") format("opentype"); } @font-face { font-family: "Campton Bold"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONSEMIBOLD_OTF.otf") format("opentype"); } @font-face { font-family: "Campton Regular"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONBOOK_OTF.otf") format("opentype"); } @font-face { font-family: "Campton Black"; src: url("https://files.jcink.net/uploads2/entouragethemes/CAMPTONEXTRABOLD_OTF.otf") format("opentype"); } @font-face { font-family: "Pirata One"; src: url("https://files.jcink.net/uploads2/entouragethemes/PirataOne_Regular.ttf") format("truetype"); } body { background:var(--background); margin:0px;} *, :before, :after { border: none; box-sizing: border-box; margin: 0; padding: 0;} ::-webkit-scrollbar { width: 5px; height:5px;} ::-webkit-scrollbar-track { background-color: var(--background);} ::-webkit-scrollbar-thumb { background: var(--main); border-radius: 10px; border-left: 2px solid var(--black); border-right:2px solid var(--background);} /******/ .My-Guidebook { float:left; left:0; right:0; margin:60px 15% 150px; width:1025px; background:var(--dark1t); padding:20px; border-radius:25px;} .GuideLeft { float:left; background:var(--background); border-radius:25px; padding:20px; width:260px; overflow:hidden; margin-right:20px; position:sticky; top:-5px;} .GuideHead { background:var(--grad1); border-radius:25px 25px 0 0; padding:20px; width:260px; overflow:hidden; margin-left:-20px; margin-top:-20px;} .GuideLeft i { font-size:120px; color:var(--dark1); float:left; line-height:10px; margin-top:25px; margin-left:-40px; } .GuideRight { width:700px; background:#; border-radius:20px; float:left; font-family:'Campton Regular'; line-height:20px; text-align:justify; font-size:11px; } .GuideRight bloque { background:white; border-radius:25px; display:block; padding:35px; margin-bottom:30px;} .My-Guidebook head1 { font-size:25px; width:260px; float:left; margin-top:-50px; text-align:center; margin-left:-20px; color:var(--white); text-transform:uppercase; font-family:'Campton Bold'; text-shadow:0 0 2px #666;} .My-Guidebook head1 span { display:block; font-size:8px; letter-spacing:1px; background:var(--background); padding:5px; border-radius:5px; width:fit-content; margin:auto; color:var(--dark); text-shadow:0 0 0; } .My-Guidebook head2 { font-family:'Campton Bold'; background:var(--grad1); padding:4px 9px; border-radius:5px; text-transform:uppercase; font-size:16px; display:block; margin:15px 0; color:var(--white); } .My-Guidebook head3 { position:relative; background:var(--dark1); border-radius: 0 0 25px 25px; padding:0 20px 20px; font-family:'Pirata One'; color:var(--white); font-size:35px; display:block; margin-left:1%; margin-top:-35px; text-align:center; margin-bottom:20px; width:fit-content;} .My-Guidebook head4 { font-family:'Campton Bold'; color:var(--accent3); display:block; border-bottom:1px solid var(--white2); margin:20px 0 5px; font-size:15px;} .My-Guidebook p { padding:5px 20px;} .My-Guidebook a { text-decoration:none; color:var(--accent1); font-family:'Campton Bold'; border-bottom: 1px dashed var(--accent3); padding-bottom:2px; transition:0.4s linear;} .My-Guidebook a:hover { border-bottom:1px solid var(--accent3); transition:0.4s linear;} .My-Guidebook b { color:Var(--accent1);} .guide-info span.be { padding:10px 20px; background:var(--background); display:block; border-radius:10px; font-family:'Campton Bold'; margin:10px;} .guide-info div.bu { padding:10px; background:var(--dark11); display:block; border-radius:10px; font-family:'Campton Bold'; margin:5px 20px; width:fit-content;} .guide-info ul.listi { margin:5px 20px;} /* Tabs */ .GuidebookTabs { padding:20px 0;} .GuidebookTabs ho { font-family:'Pirata One'; color:var(--main); text-align:center; padding:10px; font-size:20px; display:block; margin:20px 0 0;} .My-Guidebook div.guide-info { display: none;} .My-Guidebook input { display: none;} .My-Guidebook input:checked + div.guide-info { display: block;} .My-Guidebook div.guide-info { width: 100%;} .My-Guidebook label { width:220px; display:block; font-size:12px; text-transform:uppercase;} .My-Guidebook label he { font-size:13px; font-family:'Campton Bold'; color:var(--dark); text-align:center; padding:5px; display:block; background:var(--dark1); border-radius:10px; margin-bottom:5px; } .My-Guidebook label hi { font-size:9px; font-family:'Campton Regular'; display:block; margin:10px 0 15px; text-align:center; color:var(--main);} .My-Guidebook label a { display:block; margin-bottom:10px;} .My-Guidebook a.admini { padding:10px 15px; background:Var(--grad1); font-family:'Campton Bold'; font-size:12px; text-transform:uppercase; color:var(--white); display:inline-block; margin-right:10px; border-radius:10px;} bloque img.bloqim { width:350px; border-radius:10px;} bloque td { padding-right:20px; vertical-align: top;} bloque .embpic img { width: 85px; padding-left:20px;} bloque table tr { border-bottom:2px solid var(--main);} bloque .embtext { padding:10px; background:var(--dark1t); margin-bottom:5px; border-radius:5px; font-size:11px;} bloque .embtit { padding-top:0px; width:130px; font-size:40px; font-family:'Pirata One'; color:var(--accent1);} /*bloque .embtit::after { content: ''; width: 172px; background: #eedcd3; height: 4px; position: absolute; margin-left: -105px; margin-top: 35px;} bloque tr:nth-child(8) .embtit::after { width:165px;} bloque tr:nth-child(9) .embtit::after, bloque tr:nth-child(10) .embtit::after, bloque tr:nth-child(11) .embtit::after, bloque tr:nth-child(12) .embtit::after { width: 160px; margin-left:-90px;} bloque tr:nth-child(10) .embtit::after { width:150px;} bloque tr:nth-child(13) .embtit::after { width: 165px; margin-left:-90px; margin-top:30px;} bloque tr:nth-child(14) .embtit::after { width: 165px; margin-left:-60px;}*/ </style>

Code:: <div id="page-header"> <div class="headerbar"> <div id="headerbar-top" class="responsive-headerbar"> <div class="wrap"> <div class="nameforum"> <h1>Les Chroniques d'Elysia</h1> Bienvenue dans l'aventure. </div> <div id="misnotifis"><div id="misnotifi"><i class="cp cp-bell-o"></i></div></div> <a href="{U_INDEX}" id="logo"><i class="cp cp-home-o"></i></a> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> <ul id="modernbb-nav-menu" class="navbar navlinks{NAVBAR_BORDERLESS}"> <li>{GENERATED_NAV_BAR}</li> </ul> </div> </div>

Les Chroniques d'Elysia

Altaïr de l'An 1

Les scénarios

codage grimoire