Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1of 17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" data-
fontsize="normal" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}"
{NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>Boutique d'Influence</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="//icons.cappuccicons.com/cpf.css" />
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet"
href="https://nagoshiashumari.github.io/Rpg-Awesome/stylesheets/rpg-
awesome.min.css" />
<link rel="stylesheet" href="//dl.dropbox.com/s/uw6kyypbcw9hb3j/icofont.min.css" />
<link href="https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css"
rel="stylesheet" />
<link href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
rel="stylesheet" />
<link href="https://dl.dropbox.com/s/thpzqkqhf1pzqnx/game-icons.css"
rel="stylesheet" />
<script src="https://static.tumblr.com/zd7jnbb/TDPpnlgj3/jquery.style-my-
tooltips.js"></script>
<link href="https://static.tumblr.com/zd7jnbb/nzwpnlgii/style-my-tooltips.css" />
<link href="https://fonts.googleapis.com/css2?
family=Raleway:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Nanum+Gothic+Co
ding:wght@400;700&family=Noto+Sans+Mono:wght@400;700;900&family=Teko:wght@400;700&d
isplay=swap" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/s/sc2uygrw058h40t/stretchpro.css"
rel="stylesheet"/>
<script>
(function($){$(window).load(function(){$
("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_sp
eed:0 });});})(jQuery);
</script>
<style>
:root, *, *::before, *::after {
/*Acentos*/
--b-accent1: #5cbae6;
--b-accent2: #4584a1;
--p-accent1: #eb65c6;
--p-accent2: #9c2f79;
--links1:#444;
--links2:#222;
/*Fondos transparentes*/
--scroll:rgba(0,0,0,0.05);
--scroll2:rgba(255,255,255,0.1);
--tbckg0:rgba(220,220,220,0.75);
--tbckg1:rgba(210,210,210,0.75);
/*Fondos opacos*/
--body:#e4e4e4;
--header:var(--p-accent2);
--scroll-bckg:var(--deco);
--scroll-thumb:linear-gradient(to bottom, var(--b-accent1), var(--p-accent2));
--scroll-track:#212d2e;
--main:#dedede;
--dbckg0:#e2e2e2;
--dbckg1:#e6e6e6;
--dbckg2:#eaeaea;
--dbckg3:#eee;
--dbckg4:#f2f2f2;
--dbckg5:#f6f6f6;
--b-dbckg0:color-mix(in srgb,var(--border0-c) 50%, #333 50%);
--b-dbckg1:color-mix(in srgb,var(--border0-c) 50%, #555 50%);
--deco:#111313;
/*Bordes*/
--border0:10px solid var(--border0-c);
--border1:1px solid var(--border1-c);
--border2:1px solid var(--border2-c);
--border0-c:var(--deco);
--border1-c:#cacaca;
--border2-c:rgba(0,0,0,0.1);
/*Tamaño de fuentes*/
--fs-logo0:9rem;
--fs-logo1:.7rem;
--fs-logo2:.8rem;
--fs-h0:11rem;
--fs-h1:5rem;
--fs-h2:4rem;
--fs-h3:3rem;
--fs-h4:2rem;
--fs-h5:1.5rem;
--fs-h6:1.25rem;
--fs-body:1rem;
--fs-base:14px;
--fs-small:0.9rem;
--fs-smaller:0.8rem;
--fs-tiny:clamp(10px, 0.75rem, 12px);
--fs-mini:clamp(9px, 0.65rem, 12px);
--fs-deco:clamp(8px, 0.5rem, 12px);
/*Familias de fuentes*/
--f-body:'Raleway', sans-serif;
--f-titles:'Teko', sans-serif;
--f-mono:'Noto Sans Mono', monospace;
--f-mono2:'Nanum Gothic Coding', monospace;
--f-deco:'Stretch Pro', Display;
/*Colores de fuente*/
--text:#555;
--text2:#888;
--text3:#aaa;
--subtitle:#333;
--title:#111;
--subtitle-img:#bbb;
--title-img:#fff;
/*Filtros y efectos*/
--shadow-d: 1px 1px rgba(0,0,0,0.1),-1px 1px rgba(0,0,0,0.1),1px -1px
rgba(0,0,0,0.1),-1px -1px rgba(0,0,0,0.1), 1px 0px rgba(0,0,0,0.1),-1px 0px
rgba(0,0,0,0.1),0px 1px rgba(0,0,0,0.1),0px -1px rgba(0,0,0,0.1);
--shadow-l:1px 1px rgba(255,255,255,0.3), -1px 1px rgba(255,255,255,0.3), 1px -
1px rgba(255,255,255,0.3), -1px -1px rgba(255,255,255,0.3), 1px 0px
rgba(255,255,255,0.3), -1px 0px rgba(255,255,255,0.3), 0px -1px
rgba(255,255,255,0.3), 0px 1px rgba(255,255,255,0.3);
--shadow-b:1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black, 1px
0px black, -1px 0px black, 0px -1px white, 0px 1px white;
--shadow-blue:1px 1px var(--b-accent2), -1px 1px var(--b-accent2), 1px -1px
var(--b-accent2), -1px -1px var(--b-accent2), 1px 0px var(--b-accent2), -1px 0px
var(--b-accent2), 0px -1px var(--b-accent2), 0px 1px var(--b-accent2);
--frow:#aaa;
--frow-filter:brightness(0.8) contrast(0.7);
--gm-color1:#aaa;
--gm-dark-color1:#555;
--gm-color2:#000;
--gm-effect1:screen;
--gm-dark-effect1:multiply;
--gm-effect2:color;
--gm-filter:contrast(.8);
--gm-dark-filter:brightness(.80) contrast(.9);
--gm-duo-filter:brightness(2) contrast(.5);
--ft-blur:blur(5px);
--ft-blur-min:blur(2px);
--ft-blur-max:blur(10px);
--frow-effect:1; /*Valor de opacidad del efecto*/
/*Personalización*/
--body-img:url(https://i.imgur.com/9Sfphjy.png);
--body-effect:multiply;
--header-effect:multiply;
--scroll-size:30px;
--modules-w:clamp(201px, 15dvw, 301px);
--deco-size:30px;
}
a {
color:var(--links1);
text-decoration:none;
}

a:hover {
color:var(--links2);
}

.flex, .flex-col {
display:flex;
justify-content:center;
align-items:center;
}

.flex-col {
flex-direction:column;
}

.flex-colrev {
flex-direction:column-reverse;
}

.flex-rev {
flex-direction:row-reverse;
}

.gradientact { position:relative;isolation:isolate;background:var(--gm-color1); }
.gradientact:before, .gradientact:after {
content: '';
position:absolute;
inset:0;
}
.gradientact:before {
background: var(--gm-color1);
z-index:-1;
mix-blend-mode:var(--gm-effect1);
}
.gradientact:after {
background: var(--gm-color2);
z-index:-2;
mix-blend-mode:var(--gm-effect2);
}
.gradientact img {
position:relative;
z-index:-3;
filter:var(--gm-filter);
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.groupact:before {
background:var(--group);
mix-blend-mode:multiply;
}
.darkact:before {
background:var(--gm-dark-color1);
mix-blend-mode:var(--gm-dark-effect1);
}
.darkact img {
filter:var(--gm-dark-filter);
}
.blueact:before {
background:var(--b-accent1);
mix-blend-mode:multiply;
}
.pinkact:before {
background:var(--p-accent1);
mix-blend-mode:multiply;
}
.duoact:before {
background:linear-gradient(to top right, var(--p-accent1), var(--b-accent1));
mix-blend-mode:hard-light;
opacity:.7;
transition:opacity ease .5s;
}
.duoact:hover:before {
opacity:1;
}
.duoact img {
filter:var(--gm-duo-filter);
}

*::-webkit-scrollbar {
width:1px;
}

*::-webkit-scrollbar-track {
background:transparent;
}

*::-webkit-scrollbar-corner {
display:none;
}

*::-webkit-scrollbar-thumb {
background:var(--scroll);
}

body::-webkit-scrollbar {
width:var(--scroll-size);
outline:var(--border2);
}

body::-webkit-scrollbar-track {
background:var(--scroll-track);
border:calc((var(--scroll-size)/2) - 1px) solid var(--scroll-bckg);
}

body::-webkit-scrollbar-thumb {
background:var(--scroll-thumb);
border:calc((var(--scroll-size)/2.2) - 1px) solid var(--scroll-bckg);
transition:ease .5s;
border-radius:999px;
}

*::selection {
background:rgba(255,255,255,0.12);
color:#ccc;
}

em.cp, a.cp {font-family:'cappuccicons'!important;speak:never;font-


style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-
height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/*Tooltip*/
#s-m-t-tooltip{
display:block;
position: absolute!important;
/* basic */
max-width:300px;
z-index: 999;
margin:14px 14px 7px 12px;
/* style and design */
padding:7px 10px 5px;
background:var(--dbckg0);
backdrop-filter:var(--ft-blur-min);
border:var(--border2);
/* font */
font-family:var(--f-mono);
font-size:var(--fs-tiny);
text-transform:uppercase;
font-weight:700;
line-height:var(--fs-tiny);
color:var(--subtitle);
}

#s-m-t-tooltip:empty {display:none!important;}
html, body {
margin:0;
padding:0;
min-height:100%;
font-size:14px;
font-family: var(--f-body);
scroll-behavior: smooth;
}

body {
color:var(--text);
padding:var(--deco-size)!important;
margin:0;
transition:ease 1s;
isolation:isolate;
position:relative;
overflow:hidden;
height:100dvh;
box-sizing:border-box;
}

body:before {
content:'';
border:var(--deco-size) solid var(--deco);
position:fixed;
pointer-events:none;
inset:0;
z-index:999;
}

header {
background-color:var(--header);
background-size:cover;
background-attachment:scroll;
background-repeat:no-repeat;
box-sizing:border-box;
overflow:hidden;
position:relative;
isolation:isolate;
align-items:stretch!important;
height:100%;
}

header:before, header:after {
content:'';
position:absolute;
z-index:-2;
inset:0;
display:block;
}

header:before {
background-image:linear-gradient(to right, var(--p-accent1), transparent);
}

header:after {
background-image:linear-gradient(to left, var(--b-accent1), transparent);
}
.header img.noise {
position:absolute;
pointer-events:none;
z-index:5;
inset:0;
width:100%;
mix-blend-mode:screen;
opacity:.5;
}

.header img.storm {
position:absolute;
pointer-events:none;
z-index:-3;
inset:0;
width:100%;
height:100%;
mix-blend-mode:multiply;
filter:grayscale(1) invert(1) brightness(.8) contrast(2);
}

a#topright {
position: fixed;
top: var(--deco-size);
left: var(--deco-size);
background: var(--dbckg0);
padding: 1em;
gap: .5em;
z-index: 998;
}

a#topright em {
font-size: var(--fs-small);
line-height: 1em;
}

a#topright b {
font: 700 var(--fs-h6) var(--f-titles);
color: var(--title);
line-height: 1em;
}

#header {
background:url(https://wallpaper.dog/large/20475380.jpg);
background-size:cover;
background-position:center;
background-blend-mode:multiply;
background-color:var(--gm-dark-color1);
position:relative;
isolation:isolate;
}

#header:before {
content:'';
background:linear-gradient(to right, var(--b-accent1), var(--p-accent2));
mix-blend-mode:multiply;
backdrop-filter:grayscale(1);
position:absolute;
inset:0;
}

section#main {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: .3fr 1fr;
flex-grow: 1;
margin: 3rem;
border: var(--border2);
background: var(--dbckg0);
}

article#header {grid-column-end: 3;grid-column-start: 1;margin: 10px 10px 0;}

article#cart {
background: var(--dbckg0);
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}

article#body {
margin: 10px 0 10px 10px;
background: var(--border1);
}

article#header b {
font: var(--fs-h3) var(--f-deco);
text-transform: uppercase;
color: var(--title-img);
z-index: 2;
transform: skewX(-10deg);
}

article#cart h {
background: var(--b-dbckg0);
color: var(--title-img);
display: block;
padding: 1rem;
font: 700 italic var(--fs-h6) var(--f-titles);
text-transform: uppercase;
line-height: 1em;
text-align: center;
margin-bottom: -1px;
}

.cart-body {
border: var(--border1);
flex-grow: 1;
flex-direction: column;
justify-content: center;
align-items: stretch;
display: flex;
background: var(--dbckg1);
}
button.tab-copy-button {
margin-top: 10px;
outline: 0;
padding: 1em;
font: 700 var(--fs-h6) var(--f-titles);
background: var(--dbckg1);
border: var(--border1);
line-height: 1em;
cursor:pointer;
}

ul.cart-items {
margin: 0;
padding: 0;
overflow: auto;
flex-grow: 1;
}

ul.cart-items:empty {
display: none;
}

p.cart-empty {
flex-grow: 1;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
font-size: var(--fs-body);
color: var(--title);
}

.cart-items:not(:empty) + p.cart-empty {
display: none;
}

button.tab-copy-button d {
background: linear-gradient(to right, var(--b-accent1), var(--p-accent2));
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
color: transparent;
}

.cart-total {
padding: 1rem;
font: 700 var(--fs-tiny) var(--f-mono);
text-transform: uppercase;
border-top: var(--border1);
text-align: center;
}

.price:after {
content: ' 'var(--coin);
}

.item {
border: var(--border1);
background: var(--dbckg1);
padding: 1rem;
gap: 1rem;
}

.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.it-img {
height: 180px;
overflow: hidden;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.it-img h {
position: absolute;
color: var(--title-img);
font: var(--fs-h4) var(--f-deco);
text-transform: uppercase;
transform: skewX(-10deg);
letter-spacing: -.1px;
padding: 0 1em;
line-height: 1em;
cursor: pointer;
}

.it-title b:before {
content: var(--price);
}

.it-title {
font: 700 var(--fs-small) var(--f-mono);
text-transform: uppercase;
background: var(--dbckg2);
border: var(--border1);
align-self: stretch;
text-align: center;
padding: 1rem;
color: var(--title);
}

.item .it-img:before {
background: var(--b-accent2);
}

.item:nth-of-type(even) .it-img:before {
background: var(--p-accent2);
}

.it-desc {
align-self: stretch;
outline: var(--border1);
outline-offset: -1px;
border: 1rem solid transparent;
background: var(--dbckg2);
border-right-width: .5rem;
padding-right: .5rem;
display: none;
}

.it-bottom {
border-top: var(--border1);
align-self: stretch;
margin: 0 -1rem -1rem -1rem;
display: none;
}

.it-bottom>span {
flex-grow: 1;
padding: 1rem;
font: 700 var(--fs-h6) var(--f-titles);
text-transform: uppercase;
line-height: 1em;
display: flex;
justify-content: flex-start;
align-items: center;
}

.it-bottom>span b {
color: var(--title);
}

.it-bottom>span i:before {
content: var(--price);
}

.it-bottom>span i {
font-style: normal;
margin-left: .3em;
display: flex;
justify-content: center;
align-items: center;
gap: .3em;
}

.it-bottom button {
align-self:stretch;
padding: 0 2em;
border: 0;
border-left: var(--border1);
font: 700 var(--fs-smaller) var(--f-mono);
text-transform: uppercase;
background: var(--dbckg2);
cursor: pointer;
}

.item.popup {
position: fixed;
top: calc(var(--deco-size) + 2rem);
right: calc(var(--deco-size) + 2rem);
z-index: 10;
width: 30dvw;
border:10px solid var(--b-dbckg0);
}

.item.popup .it-img::before {
background:var(--gm-dark-color1);
}

.item.popup .it-title {
display: none;
}

.item.popup .it-bottom {
display: flex;
}

.item.popup .it-desc {
display: block;
}

ul.cart-items li {
border: var(--border1);
padding: 10px;
box-sizing: border-box;
background: var(--dbckg0);
font: 700 var(--fs-smaller) var(--f-mono);
text-transform: uppercase;
line-height: 1em;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--subtitle);
}

ul.cart-items li:not(:last-of-type) {
margin-bottom: 10px;
}

ul.cart-items li button {
font: var(--fs-h6) var(--f-titles);
padding: 0;
border: 0;
outline: 0!important;
background: none;
width: 1em;
color: var(--text2);
cursor:pointer;
}

ul.cart-items li button:hover {
font-weight: 700;
color: var(--accent1);
}

ul.cart-items li b {
margin-left: 5px;
}

ul.cart-items {
margin: 10px 5px 10px 10px;
padding-right: 5px;
}

div#redirect {
position: fixed;
inset: 0;
margin: auto;
width: clamp(300px, 50dvw, 700px);
box-shadow: 0 0 0 100vmax var(--tbckg0);
border: var(--border2);
height: fit-content;
background: var(--dbckg0);
}

header:has(#redirect:not([style*="none"]))>*:not(#redirect) {
pointer-events: none;
filter: var(--ft-blur);
}

div#redirect>h {
background: var(--b-dbckg0);
align-self: stretch;
padding: 1em 1em .75em;
font: 700 var(--fs-h5) var(--f-titles);
text-transform: uppercase;
line-height: 1em;
color: var(--title-img);
text-align: center;
margin: -1px -1px 0;
}

div#redirect>p {
padding: 1.5rem;
margin: 0;
line-height: 1.3em;
text-align: justify;
}

div#redirect>a {
text-transform: uppercase;
margin: 0 auto 1.5rem -5px;
padding: .75em 2em .5em;
background: var(--dbckg1);
border: var(--border1);
transform: skewX(-10deg);
clip-path: polygon(1.5px 0, 110% 0, 110% 110%, 9.5px 110%);
width: 95%;
box-sizing: border-box;
}

div#redirect>a>d {
background: linear-gradient(to right, var(--b-accent1), var(--p-accent1));
-moz-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
font: 700 var(--fs-h5) var(--f-titles);
line-height: 1em;
color: transparent;
transform: skewX(10deg);
display: block;
width: fit-content;
margin-left: auto;
}
</style>
<script>
$(function(){
$('.items .item').each(function(){
var price = $(this).attr('data-price');
var title = $(this).find('.it-img h').text().replace(/
/g,'').toLowerCase().replace(/'/g, "").replace(/\(|\)/g,
'').replace(/[^a-z0-9\s]/gi, '');
$(this).attr('data-item',title);
$(this).attr("style","--price:'"+price+"';");
});

$('#main').each(function(){
var priceSymbol = $(this).attr('style').split('--coin:')[1].split(';')[0];
$(this).siblings('.tab-shoppinglist').attr('style', 'display:none;--
coin:'+priceSymbol+';');
});

$(document).on('click', '.it-img h', function() {


var item = $(this).parents('.item').attr('data-item');
var itemName = $(this).text();
var box = $(this).parents('.item').prop('outerHTML');
var $box = $(box);
$box.addClass('popup');
if ($(".cart-items li b:contains('" + itemName + "')").length) {
$box.find('button').text('Supprimer');
var finalPopup = $box.prop('outerHTML');
} else {
var finalPopup = $box.prop('outerHTML');
}
if ($(this).parents('#body').find('.popup[data-item="'+item+'"]').length) {
$(this).parents('#body').find('.popup').remove();
} else {
$(this).parents('#body').find('.popup').remove();
$(this).parents('#body').append(finalPopup);
}
});

$(document).on('click', '.it-bottom button', function() {


var item = $(this).closest(".item");
var itemName = item.find(".it-img h").text();
var itemPrice = parseInt(item.data("price"));

if ($(".cart-items li b:contains('" + itemName + "')").length) {


$(".cart-items li b:contains('" + itemName + "')").parent('li').remove();
updateTotal(-itemPrice);
} else {
$(".cart-items").append("<li data-price='" + itemPrice + "'><b>" + itemName +
"</b><button class='remove-item'>X</button></li>");
updateTotal(itemPrice);
}

$(this).parents('.popup').remove();

});
$(document).on("click", ".remove-item", function() {
var item = $(this).closest("li");
var itemName = item.find("b").text();
var itemPrice = parseInt(item.data("price"));
item.remove();
$(".it-img h:contains('" + itemName + "')").parents('.item').find('.it-bottom
button').removeClass("active");
updateTotal(-itemPrice);
});

function updateTotal(price) {
var totalPrice = parseInt($(".cart-total d").text());
totalPrice += price;
$(".cart-total d").text(totalPrice);
$(".tab-shoppinglist i").text(totalPrice);
}

$(".tab-copy-button").click(function() {
var $shoppingList = $(".tab-shoppinglist ul");
var $cartItems = $(".cart-items li");
$shoppingList.empty();
$cartItems.each(function() {
var itemName = $(this).find("b").text();
$shoppingList.append("<li>" + itemName + "</li>\n");
});
var totalPrice = $(".cart-total d").text();
$(".tab-shoppinglist i").text(totalPrice);

var temp = document.createElement("textarea");


temp.value = $(".tab-shoppinglist").prop('outerHTML');
temp.value = temp.value.replace(/<br>/g, '\n');
temp.value = temp.value.replace(/<ul><li>/g, '<ul>\n<li>');
temp.value = temp.value.replace(/display:none;/g, '');
document.body.appendChild(temp);
temp.select();
document.execCommand("copy");
document.body.removeChild(temp);
$('#redirect').show();
});

});
</script>
</head>
<body>
<header class="flex-col"
style="background-image:url(https://i.imgur.com/mP2EH4o.png);">
<a href="/" id="topright" class="flex"><em class="fas fa-angle-left"></em><b>JJK
RPG</b></a>
<section id="main" style="--coin:'PI';">
<article id="header" class="flex">
<b>BOUTIQUE D'INFLUENCE</b>
</article>
<article id="body"><div class="items">
<!-- item --><div class="item flex-col" data-price="250"><div class="it-img
gradientact darkact"><img src="http://via.placeholder.com/300x150"/><h>CREATION DE
CULTE</h></div><div class="it-title"><b class="price"></b></div><div class="it-
desc"><b>Description:</b> Potion qui vous soigne de deux points.
<br/><br/>
<b>Effet:</b> Lorem ipsum dolor sit amet.
<br/><br/>
<b>Ressource:</b> Lorem ipsum dolor sit amet.</div><div class="it-bottom flex">
<span><b>Prix:</b><i class="price"></i></span>
<button>Ajouter</button>
</div>
</div>
<!-- item -->
<!-- item --><div class="item flex-col" data-price="350"><div class="it-img
gradientact darkact"><img src="http://via.placeholder.com/300x150"/><h>Name of item
2</h></div><div class="it-title"><b class="price"></b></div><div class="it-
desc"><b>Description:</b> Potion qui vous soigne de deux points.
<br/><br/>
<b>Effet:</b> Lorem ipsum dolor sit amet.
<br/><br/>
<b>Ressource:</b> Lorem ipsum dolor sit amet.</div><div class="it-bottom flex">
<span><b>Prix:</b><i class="price"></i></span>
<button>Ajouter</button>
</div>
</div>
<!-- item -->
<!-- item --><div class="item flex-col" data-price="450"><div class="it-img
gradientact darkact"><img src="http://via.placeholder.com/300x150"/><h>Name of item
3</h></div><div class="it-title"><b class="price"></b></div><div class="it-
desc"><b>Description:</b> Potion qui vous soigne de deux points.
<br/><br/>
<b>Effet:</b> Lorem ipsum dolor sit amet.
<br/><br/>
<b>Ressource:</b> Lorem ipsum dolor sit amet.</div><div class="it-bottom flex">
<span><b>Prix:</b><i class="price"></i></span>
<button>Ajouter</button>
</div>
</div>
<!-- item -->
</div>
</article>
<article id="cart">
<h>Panier</h><div class="cart-body">
<ul class="cart-items"></ul>
<p class="cart-empty">Vous pourrez voir les articles que vous avez ajoutés à votre
panier dans cette section.</p><div class="cart-total"><b>Total:</b> <d
class="price">0</d></div>
</div>
<button class="tab-copy-button"><d>ACHETER</d></button>
</article>
</section><div id="redirect" class="flex-col" style="display:none;">
<h>Vous y êtes presque!</h>
<p>Vous avez copié votre liste de courses, il ne vous reste plus qu'à cliquer sur
le bouton ci-dessous, qui vous mènera à un formulaire de message privé où vous
pourrez envoyer votre liste. Ne changez pas la valeur "Boutique d'Influence" comme
objet de votre message. Nous vous remercions de votre attention.</p>
<a href="/privmsg?mode=post&u=1&s=Boutique%20d%27Influence"><d>Continuer</d></a>
</div><div class="tab-shoppinglist" style="display: none;">
<h>Résumé des achats</h><div>
<ul>
<!-- The items the user has selected will be displayed here --></ul>
<p><b>Total:</b><i><!-- The total will be displayed here --></i></p>
<m>Extra</m>
<n>Vous pouvez ajouter ici toute information supplémentaire que le personnel doit
connaître au sujet de votre achat.</n>
</div>
</div>
</header>
</body>
</html>

You might also like