Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--announcement">
<div class="fp-announcement">
<div class="fp-announcement--text">
<span class="fp-text">Announcement info text!
</span>
</div>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-header">
<div class="fp-banner-with-logo">
<div class="fp-banner-with-logo--background"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
<div class="fp-banner-with-logo--sponsors">
<div class="fp-pill">
<div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
</div>
<div class="fp-pill--text -hidden-up-lg">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-xs -text-regular">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Burger King
</span>
</div>
</div>
</div>
</div>
<div class="fp-pill">
<div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
</div>
<div class="fp-pill--text -hidden-up-lg">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-xs -text-regular">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Mc Donald's
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-banner-with-logo--logo">
<div class="fp-logo -lg"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-banner-with-logo--content">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-3xl -text-lg-up-lg">Bienvenue dans l'univers
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-8xl -text-xl-up-lg -text-bold">Lou Rugby !
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -text-lg -text-md-up-lg">Explore les offres exclusives de l'univers "Kento Miyaura By Paris Volley" pour vivre des expériences uniques et collectionner des produits rares, disponibles nulle part ailleurs !
</span>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -color-shade-0 -text-lg -text-md-up-lg -text-semi-bold">Attention, les stocks sont ultra limités !
</span>
</div>
<div class="fp-vertical-spacing--line -justify-left -justify-center-up-md">
<div class="fp-vertical-spacing -width-max-content">
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-search -s16"></i></span>J'explore
</button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-coin -s16"></i></span>J'achète des jetons
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-end">
<div class="fp-horizontal-spacing--column -expand">
<h2 class="fp-title">Membres
</h2>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link -secondary">Voir plus</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols3 -cols1-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -token"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -medal"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -wallet"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -star"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -crown"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -shield"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols2 -cols1-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--content-footer">
<input id="footer-collapsible" type="checkbox" name="collapse"/>
<label class="fp-page--content-footer--trigger" for="footer-collapsible">
<i class="fp-icon fp-glyph-chevron-down -color-shade-400 -s12"></i>
</label>
<div class="fp-page--content-footer--hideable">
<div class="fp-responsive-grid -cols4 -cols1-up-md">
<div class="fp-responsive-grid--column">
<span class="fp-text -text-sm">Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
</span>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Mentions légales
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGU Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGV Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">Politique de confidentialité</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Nous contacter
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">contact@fairplayer.fr</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Langue
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-fr"/></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-en"/></a>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Thème
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-sun"></i></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-moon -color-shade-500"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="fp-text -text-sm">© 2024 Fairplayer
</span>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--announcement
.fp-announcement
.fp-announcement--text
span.fp-text Announcement info text!
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-header
.fp-banner-with-logo
.fp-banner-with-logo--background
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-banner-with-logo--sponsors
.fp-pill
.fp-pill--icons
img.fp-illustration.-xs.-trophy
.fp-pill--text.-hidden-up-lg
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-xs.-text-regular Sponsorisé par
.fp-vertical-spacing--line
span.fp-text Burger King
.fp-pill
.fp-pill--icons
img.fp-illustration.-xs.-trophy
.fp-pill--text.-hidden-up-lg
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-xs.-text-regular Sponsorisé par
.fp-vertical-spacing--line
span.fp-text Mc Donald's
.fp-banner-with-logo--logo
.fp-logo.-lg
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-banner-with-logo--content
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-left.-align-center-up-md
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-3xl.-text-lg-up-lg Bienvenue dans l'univers
.fp-vertical-spacing--line
span.fp-text.-text-8xl.-text-xl-up-lg.-text-bold Lou Rugby !
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-text-lg.-text-md-up-lg Explore les offres exclusives de l'univers "Kento Miyaura By Paris Volley" pour vivre des expériences uniques et collectionner des produits rares, disponibles nulle part ailleurs !
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-color-shade-0.-text-lg.-text-md-up-lg.-text-semi-bold Attention, les stocks sont ultra limités !
.fp-vertical-spacing--line.-justify-left.-justify-center-up-md
.fp-vertical-spacing.-width-max-content
.fp-vertical-spacing--line
button.fp-button.-expand.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-search.-s16
| J'explore
.fp-vertical-spacing--line
button.fp-button.-expand
span.fp-button--icon
i.fp-icon.fp-glyph-coin.-s16
| J'achète des jetons
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-end
.fp-horizontal-spacing--column.-expand
h2.fp-title Membres
.fp-horizontal-spacing--column
a.fp-link.-secondary Voir plus
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image.-active
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-vertical-spacing--line
.fp-responsive-grid.-cols3.-cols1-up-md
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-token
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-medal
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-wallet
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-star
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-crown
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-shield
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-vertical-spacing--line
.fp-responsive-grid.-cols2.-cols1-up-md
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Title
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Title
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-page--content-footer
input#footer-collapsible(type="checkbox" name="collapse")
label.fp-page--content-footer--trigger(for="footer-collapsible")
i.fp-icon.fp-glyph-chevron-down.-color-shade-400.-s12
.fp-page--content-footer--hideable
.fp-responsive-grid.-cols4.-cols1-up-md
.fp-responsive-grid--column
span.fp-text.-text-sm Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Mentions légales
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGU Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGV Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular Politique de confidentialité
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Nous contacter
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular contact@fairplayer.fr
.fp-responsive-grid--column
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Langue
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-fr
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-en
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Thème
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-sun
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-moon.-color-shade-500
span.fp-text.-text-sm © 2024 Fairplayer
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-sticky-pane">
<aside class="fp-sticky-pane--aside">
<div class="fp-display">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--thumbnails"><img class="fp-display--thumbnail-image -active" src="https://files.fairplayer.co/exclusive.jpg"/><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-display--thumbnail-video">
<div class="fp-video -expand ">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
</div><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
</aside>
<div class="fp-sticky-pane--content">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h1>
</div>
<div class="fp-vertical-spacing--line"><span class="fp-tag">Tag Label</span>
</div>
<div class="fp-vertical-spacing--line -hidden-up-md">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-xl -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Description
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Mise à prix
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Dernière enchère
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Enchérisseurs
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">3
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Enchérisseurs
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 4 heures
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Anonyme
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 2 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">40 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 3 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tente de gagner cette exclusivité !
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center">
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -sm -star"/>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-semi-bold">Nom
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-arrow-square-in -s16"></i></span>Je participe
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-chevron-left -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">vendredi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">19 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">samedi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">dimanche
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<i class="fp-icon fp-glyph-chevron-right -color-shade-300"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">12:00
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tu aimeras peut-être ...
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--footer">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-xl -text-semi-bold">9000 TKN
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-500">120€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-shopping-cart -s16"></i></span>Acheter
</button>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
<div class="fp-layout--bottom-modal -active">
<div class="fp-bottom-modal">
<div class="fp-bottom-modal--header">
<i class="fp-icon fp-glyph-filter -s16"></i>Title
</div>
<div class="fp-bottom-modal--close">
<button class="fp-icon fp-glyph-close -color-shade-900 -s16 -pointer"></button>
</div>
<div class="fp-bottom-modal--content">Modal Content
</div>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-sticky-pane
aside.fp-sticky-pane--aside
.fp-display
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnails
img.fp-display--thumbnail-image.-active(src="https://files.fairplayer.co/exclusive.jpg")
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnail-video
.fp-video.-expand
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-sticky-pane--content
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Expérience immersion : dans la peau d'un joueur
.fp-vertical-spacing--line
span.fp-tag Tag Label
.fp-vertical-spacing--line.-hidden-up-md
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-xl.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
h2.fp-title Description
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent.-s-sm
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Mise à prix
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 30 000€
.fp-horizontal-spacing--column
.fp-card.-highlighted
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Dernière enchère
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 50 000€
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Enchérisseurs
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 3
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Enchérisseurs
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 4 heures
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 50 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Anonyme
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 2 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 40 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 3 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 30 000€
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
h2.fp-title Tente de gagner cette exclusivité !
.fp-vertical-spacing--line
span.fp-text Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center
.fp-horizontal-spacing--column
img.fp-illustration.-sm.-star
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm Sponsorisé par
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-semi-bold Nom
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-arrow-square-in.-s16
| Je participe
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-chevron-left.-pointer
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold vendredi
.fp-vertical-spacing--line
span.fp-text 19 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold samedi
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold dimanche
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-horizontal-spacing--column
i.fp-icon.fp-glyph-chevron-right.-color-shade-300
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 9:20
.fp-vertical-spacing--line
.fp-badge.-clickable 9:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:20
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-vertical-spacing--line
.fp-badge.-clickable 12:00
.fp-horizontal-spacing--column
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Tu aimeras peut-être ...
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-page--footer
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-xl.-text-semi-bold 9000 TKN
.fp-vertical-spacing--line
span.fp-text.-color-shade-500 120€
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-shopping-cart.-s16
| Acheter
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile
.fp-layout--bottom-modal.-active
.fp-bottom-modal
.fp-bottom-modal--header
i.fp-icon.fp-glyph-filter.-s16
| Title
.fp-bottom-modal--close
button.fp-icon.fp-glyph-close.-color-shade-900.-s16.-pointer
.fp-bottom-modal--content Modal Content<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-chat-page">
<div class="fp-chat-page--interlocutors">
<div class="fp-interlocutors">
<div class="fp-interlocutors--header">
<h2 class="fp-title">Conversations
</h2>
</div>
<div class="fp-interlocutors--list"><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a><a class="fp-interlocutor -active" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div></a><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a>
</div>
<div class="fp-interlocutors--empty">
<span class="fp-text -text-semi-bold">Démarrez une nouvelle conversation !
</span>
<span class="fp-text">Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.
</span>
</div>
</div>
</div>
<div class="fp-chat-page--chat">
<div class="fp-chat">
<div class="fp-chat--header">
<button class="fp-icon fp-glyph-arrow-left -color-shade-900 -s14 -pointer"></button>
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<span class="fp-text -color-shade-900 -text-semi-bold">John DOE
</span>
</div>
<div class="fp-chat--messages">
<div class="fp-chat--messages-notification">12 sept</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Salut !
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Qu'est-ce que tu fais ce week-end ? 😊
</span>
</div>
</div>
</div>
<div class="fp-chat--message-sent">
<div class="fp-card -dark">
<span class="fp-text -text-sm">Salut !
</span>
</div>
</div>
<div class="fp-chat--message-sent">
<div class="fp-card -dark">
<span class="fp-text -text-sm">Rien de prévu pour l'instant. Tu as une idée ? 😎
</span>
</div>
</div>
<div class="fp-chat--messages-notification">13 sept</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Oui ! J'ai entendu parler d'un nouveau café en ville. On pourrait y aller samedi après-midi ?
</span>
</div>
</div>
</div>
<div class="fp-chat--message-sent">
<div class="fp-card -dark">
<span class="fp-text -text-sm">Super idée ! J'adore découvrir de nouveaux endroits. À quelle heure ?
</span>
</div>
</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Disons 15h ? Comme ça, on peut aussi se balader un peu après.
</span>
</div>
</div>
</div>
</div>
<div class="fp-chat--input">
<div class="fp-icons-input">
<div class="fp-icons-input--right-icon">
<button class="fp-icon fp-glyph-send -s16 -pointer"></button>
</div>
<input class="fp-input-text" id="icons-input-mixin" placeholder="Écrivez votre message ..."/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-chat-page
.fp-chat-page--interlocutors
.fp-interlocutors
.fp-interlocutors--header
h2.fp-title Conversations
.fp-interlocutors--list
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
.fp-interlocutor--unread
.fp-chip 1
a.fp-interlocutor.-active(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
.fp-interlocutor--unread
.fp-chip 1
.fp-interlocutors--empty
span.fp-text.-text-semi-bold Démarrez une nouvelle conversation !
span.fp-text Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.
.fp-chat-page--chat
.fp-chat
.fp-chat--header
button.fp-icon.fp-glyph-arrow-left.-color-shade-900.-s14.-pointer
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
span.fp-text.-color-shade-900.-text-semi-bold John DOE
.fp-chat--messages
.fp-chat--messages-notification 12 sept
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Salut !
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Qu'est-ce que tu fais ce week-end ? 😊
.fp-chat--message-sent
.fp-card.-dark
span.fp-text.-text-sm Salut !
.fp-chat--message-sent
.fp-card.-dark
span.fp-text.-text-sm Rien de prévu pour l'instant. Tu as une idée ? 😎
.fp-chat--messages-notification 13 sept
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Oui ! J'ai entendu parler d'un nouveau café en ville. On pourrait y aller samedi après-midi ?
.fp-chat--message-sent
.fp-card.-dark
span.fp-text.-text-sm Super idée ! J'adore découvrir de nouveaux endroits. À quelle heure ?
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Disons 15h ? Comme ça, on peut aussi se balader un peu après.
.fp-chat--input
.fp-icons-input
.fp-icons-input--right-icon
button.fp-icon.fp-glyph-send.-s16.-pointer
input#icons-input-mixin.fp-input-text(placeholder="Écrivez votre message ...")
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-header">
<div class="fp-banner"><img src="/atom/banner/banner.png"/></div>
</div>
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-end">
<div class="fp-horizontal-spacing--column -expand">
<h2 class="fp-title">Membres
</h2>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link -secondary">Voir plus</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--content-footer">
<input id="footer-collapsible" type="checkbox" name="collapse"/>
<label class="fp-page--content-footer--trigger" for="footer-collapsible">
<i class="fp-icon fp-glyph-chevron-down -color-shade-400 -s12"></i>
</label>
<div class="fp-page--content-footer--hideable">
<div class="fp-responsive-grid -cols4 -cols1-up-md">
<div class="fp-responsive-grid--column">
<span class="fp-text -text-sm">Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
</span>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Mentions légales
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGU Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGV Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">Politique de confidentialité</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Nous contacter
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">contact@fairplayer.fr</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Langue
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-fr"/></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-en"/></a>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Thème
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-sun"></i></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-moon -color-shade-500"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="fp-text -text-sm">© 2024 Fairplayer
</span>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-header
.fp-banner
img(src="/atom/banner/banner.png")
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-end
.fp-horizontal-spacing--column.-expand
h2.fp-title Membres
.fp-horizontal-spacing--column
a.fp-link.-secondary Voir plus
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image.-active
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-page--content-footer
input#footer-collapsible(type="checkbox" name="collapse")
label.fp-page--content-footer--trigger(for="footer-collapsible")
i.fp-icon.fp-glyph-chevron-down.-color-shade-400.-s12
.fp-page--content-footer--hideable
.fp-responsive-grid.-cols4.-cols1-up-md
.fp-responsive-grid--column
span.fp-text.-text-sm Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Mentions légales
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGU Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGV Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular Politique de confidentialité
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Nous contacter
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular contact@fairplayer.fr
.fp-responsive-grid--column
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Langue
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-fr
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-en
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Thème
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-sun
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-moon.-color-shade-500
span.fp-text.-text-sm © 2024 Fairplayer
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-header">
<div class="fp-banner-with-logo">
<div class="fp-banner-with-logo--background"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
<div class="fp-banner-with-logo--sponsors">
<div class="fp-pill">
<div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
</div>
<div class="fp-pill--text -hidden-up-lg">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-xs -text-regular">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Burger King
</span>
</div>
</div>
</div>
</div>
<div class="fp-pill">
<div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
</div>
<div class="fp-pill--text -hidden-up-lg">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-xs -text-regular">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Mc Donald's
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-banner-with-logo--logo">
<div class="fp-logo -lg"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-banner-with-logo--content">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-3xl -text-lg-up-lg">Bienvenue dans l'univers
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-8xl -text-xl-up-lg -text-bold">Lou Rugby !
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -text-lg -text-md-up-lg">Explore les offres exclusives de l'univers "Kento Miyaura By Paris Volley" pour vivre des expériences uniques et collectionner des produits rares, disponibles nulle part ailleurs !
</span>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -color-shade-0 -text-lg -text-md-up-lg -text-semi-bold">Attention, les stocks sont ultra limités !
</span>
</div>
<div class="fp-vertical-spacing--line -justify-left -justify-center-up-md">
<div class="fp-vertical-spacing -width-max-content">
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-search -s16"></i></span>J'explore
</button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-coin -s16"></i></span>J'achète des jetons
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-end">
<div class="fp-horizontal-spacing--column -expand">
<h2 class="fp-title">Membres
</h2>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link -secondary">Voir plus</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols3 -cols1-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -token"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -medal"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -wallet"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -star"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -crown"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -shield"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols2 -cols1-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--content-footer">
<input id="footer-collapsible" type="checkbox" name="collapse"/>
<label class="fp-page--content-footer--trigger" for="footer-collapsible">
<i class="fp-icon fp-glyph-chevron-down -color-shade-400 -s12"></i>
</label>
<div class="fp-page--content-footer--hideable">
<div class="fp-responsive-grid -cols4 -cols1-up-md">
<div class="fp-responsive-grid--column">
<span class="fp-text -text-sm">Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
</span>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Mentions légales
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGU Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGV Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">Politique de confidentialité</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Nous contacter
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">contact@fairplayer.fr</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Langue
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-fr"/></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-en"/></a>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Thème
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-sun"></i></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-moon -color-shade-500"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="fp-text -text-sm">© 2024 Fairplayer
</span>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-header
.fp-banner-with-logo
.fp-banner-with-logo--background
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-banner-with-logo--sponsors
.fp-pill
.fp-pill--icons
img.fp-illustration.-xs.-trophy
.fp-pill--text.-hidden-up-lg
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-xs.-text-regular Sponsorisé par
.fp-vertical-spacing--line
span.fp-text Burger King
.fp-pill
.fp-pill--icons
img.fp-illustration.-xs.-trophy
.fp-pill--text.-hidden-up-lg
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-xs.-text-regular Sponsorisé par
.fp-vertical-spacing--line
span.fp-text Mc Donald's
.fp-banner-with-logo--logo
.fp-logo.-lg
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-banner-with-logo--content
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-left.-align-center-up-md
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-3xl.-text-lg-up-lg Bienvenue dans l'univers
.fp-vertical-spacing--line
span.fp-text.-text-8xl.-text-xl-up-lg.-text-bold Lou Rugby !
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-text-lg.-text-md-up-lg Explore les offres exclusives de l'univers "Kento Miyaura By Paris Volley" pour vivre des expériences uniques et collectionner des produits rares, disponibles nulle part ailleurs !
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-color-shade-0.-text-lg.-text-md-up-lg.-text-semi-bold Attention, les stocks sont ultra limités !
.fp-vertical-spacing--line.-justify-left.-justify-center-up-md
.fp-vertical-spacing.-width-max-content
.fp-vertical-spacing--line
button.fp-button.-expand.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-search.-s16
| J'explore
.fp-vertical-spacing--line
button.fp-button.-expand
span.fp-button--icon
i.fp-icon.fp-glyph-coin.-s16
| J'achète des jetons
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-end
.fp-horizontal-spacing--column.-expand
h2.fp-title Membres
.fp-horizontal-spacing--column
a.fp-link.-secondary Voir plus
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image.-active
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-vertical-spacing--line
.fp-responsive-grid.-cols3.-cols1-up-md
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-token
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-medal
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-wallet
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-star
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-crown
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-shield
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-vertical-spacing--line
.fp-responsive-grid.-cols2.-cols1-up-md
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Title
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Title
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-page--content-footer
input#footer-collapsible(type="checkbox" name="collapse")
label.fp-page--content-footer--trigger(for="footer-collapsible")
i.fp-icon.fp-glyph-chevron-down.-color-shade-400.-s12
.fp-page--content-footer--hideable
.fp-responsive-grid.-cols4.-cols1-up-md
.fp-responsive-grid--column
span.fp-text.-text-sm Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Mentions légales
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGU Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGV Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular Politique de confidentialité
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Nous contacter
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular contact@fairplayer.fr
.fp-responsive-grid--column
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Langue
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-fr
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-en
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Thème
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-sun
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-moon.-color-shade-500
span.fp-text.-text-sm © 2024 Fairplayer
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-logo-with-title">
<div class="fp-logo -sm"><img src="/atom/logo/logo.png" alt="Logo"/></div>
<h1 class="fp-title">Bienvenue sur Fairplayer !
</h1>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">Choisis ton club et accède à ses expériences et ses collectibles d'exception :
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-logo-with-title
.fp-logo.-sm
img(src="/atom/logo/logo.png" alt="Logo")
h1.fp-title Bienvenue sur Fairplayer !
.fp-vertical-spacing--line.-align-center
span.fp-text Choisis ton club et accède à ses expériences et ses collectibles d'exception :
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-sticky-pane">
<aside class="fp-sticky-pane--aside">
<div class="fp-display">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--thumbnails"><img class="fp-display--thumbnail-image -active" src="https://files.fairplayer.co/exclusive.jpg"/><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-display--thumbnail-video">
<div class="fp-video -expand ">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
</div><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
</aside>
<div class="fp-sticky-pane--content">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h1>
</div>
<div class="fp-vertical-spacing--line"><span class="fp-tag">Tag Label</span>
</div>
<div class="fp-vertical-spacing--line -hidden-up-md">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-xl -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Description
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Mise à prix
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Dernière enchère
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Enchérisseurs
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">3
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Enchérisseurs
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 4 heures
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Anonyme
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 2 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">40 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 3 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tente de gagner cette exclusivité !
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center">
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -sm -star"/>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-semi-bold">Nom
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-arrow-square-in -s16"></i></span>Je participe
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-chevron-left -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">vendredi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">19 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">samedi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">dimanche
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<i class="fp-icon fp-glyph-chevron-right -color-shade-300"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">12:00
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tu aimeras peut-être ...
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--footer">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-xl -text-semi-bold">9000 TKN
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-500">120€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-shopping-cart -s16"></i></span>Acheter
</button>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-sticky-pane
aside.fp-sticky-pane--aside
.fp-display
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnails
img.fp-display--thumbnail-image.-active(src="https://files.fairplayer.co/exclusive.jpg")
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnail-video
.fp-video.-expand
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-sticky-pane--content
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Expérience immersion : dans la peau d'un joueur
.fp-vertical-spacing--line
span.fp-tag Tag Label
.fp-vertical-spacing--line.-hidden-up-md
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-xl.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
h2.fp-title Description
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent.-s-sm
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Mise à prix
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 30 000€
.fp-horizontal-spacing--column
.fp-card.-highlighted
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Dernière enchère
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 50 000€
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Enchérisseurs
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 3
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Enchérisseurs
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 4 heures
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 50 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Anonyme
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 2 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 40 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 3 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 30 000€
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
h2.fp-title Tente de gagner cette exclusivité !
.fp-vertical-spacing--line
span.fp-text Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center
.fp-horizontal-spacing--column
img.fp-illustration.-sm.-star
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm Sponsorisé par
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-semi-bold Nom
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-arrow-square-in.-s16
| Je participe
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-chevron-left.-pointer
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold vendredi
.fp-vertical-spacing--line
span.fp-text 19 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold samedi
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold dimanche
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-horizontal-spacing--column
i.fp-icon.fp-glyph-chevron-right.-color-shade-300
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 9:20
.fp-vertical-spacing--line
.fp-badge.-clickable 9:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:20
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-vertical-spacing--line
.fp-badge.-clickable 12:00
.fp-horizontal-spacing--column
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Tu aimeras peut-être ...
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-page--footer
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-xl.-text-semi-bold 9000 TKN
.fp-vertical-spacing--line
span.fp-text.-color-shade-500 120€
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-shopping-cart.-s16
| Acheter
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-banner-with-logo -scrollable">
<div class="fp-banner-with-logo--background"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
<div class="fp-banner-with-logo--logo">
<div class="fp-logo -lg"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-banner-with-logo--content">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -text-lg -text-md-up-lg">Participe pour tenter de gagner des moments privilégiés ou des objets à collectionner sur la boutique Fairplayer de l'univers "Paris Volley" !
</span>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -text-lg -text-md-up-lg">Pour participer c'est tout simple, remplis le questionnaire ci-dessous et nous te contacterons pour t'informer du résultat.
</span>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<div class="fp-card">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-edit -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<span class="fp-text -color-shade-900 -text-lg -text-semi-bold">Réponds à ces questions !
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing--line -align-left">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-left">
<span class="fp-text -color-shade-900 -text-semi-bold">Quand a été fondé le Paris Volley ?
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox"/>
</div>
<div class="fp-checkable-element--label">
<label>1997
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>1998
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox"/>
</div>
<div class="fp-checkable-element--label">
<label>1999
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing--line -align-left">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-left">
<span class="fp-text -color-shade-900 -text-semi-bold">Quand a été fondé le Paris Volley ?
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox"/>
</div>
<div class="fp-checkable-element--label">
<label>1997
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>1998
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox"/>
</div>
<div class="fp-checkable-element--label">
<label>1999
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox"/>
</div>
<div class="fp-checkable-element--label">
<label>Label
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-award -s16"></i></span>Je participe
</button>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -text-semi-bold">Au fait, Fairplayer, qu'est ce que c'est ?
</span>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text">Grâce à Fairplayer, achète des jetons numériques de ton club (quantité limité) qui te permettront de profiter d'expérience exceptionnelles et de collectionner des produits rares de ton club.
</span>
</div>
<div class="fp-vertical-spacing--line -justify-left -justify-center-up-md">
<button class="fp-button -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-shopping-cart -s16"></i></span>J'accède à la boutique
</button>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-banner-with-logo.-scrollable
.fp-banner-with-logo--background
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-banner-with-logo--logo
.fp-logo.-lg
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-banner-with-logo--content
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-text-lg.-text-md-up-lg Participe pour tenter de gagner des moments privilégiés ou des objets à collectionner sur la boutique Fairplayer de l'univers "Paris Volley" !
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-text-lg.-text-md-up-lg Pour participer c'est tout simple, remplis le questionnaire ci-dessous et nous te contacterons pour t'informer du résultat.
.fp-vertical-spacing--line.-align-left.-align-center-up-md
.fp-card
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-icon-with-text
i.fp-icon.fp-glyph-edit.-color-shade-900.-s18
.fp-icon-with-text--text
span.fp-text.-color-shade-900.-text-lg.-text-semi-bold Réponds à ces questions !
.fp-vertical-spacing--line
.fp-vertical-spacing--line.-align-left
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-left
span.fp-text.-color-shade-900.-text-semi-bold Quand a été fondé le Paris Volley ?
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label 1997
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox" checked="checked")
.fp-checkable-element--label
label 1998
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label 1999
.fp-vertical-spacing--line
.fp-vertical-spacing--line.-align-left
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-left
span.fp-text.-color-shade-900.-text-semi-bold Quand a été fondé le Paris Volley ?
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label 1997
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox" checked="checked")
.fp-checkable-element--label
label 1998
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label 1999
.fp-vertical-spacing--line
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label Label
.fp-vertical-spacing--line
button.fp-button.-expand
span.fp-button--icon
i.fp-icon.fp-glyph-award.-s16
| Je participe
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-text-semi-bold Au fait, Fairplayer, qu'est ce que c'est ?
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text Grâce à Fairplayer, achète des jetons numériques de ton club (quantité limité) qui te permettront de profiter d'expérience exceptionnelles et de collectionner des produits rares de ton club.
.fp-vertical-spacing--line.-justify-left.-justify-center-up-md
button.fp-button.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-shopping-cart.-s16
| J'accède à la boutique
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-sticky-pane">
<aside class="fp-sticky-pane--aside">
<div class="fp-display">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--thumbnails"><img class="fp-display--thumbnail-image -active" src="https://files.fairplayer.co/exclusive.jpg"/><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-display--thumbnail-video">
<div class="fp-video -expand ">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
</div><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
</aside>
<div class="fp-sticky-pane--content">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h1>
</div>
<div class="fp-vertical-spacing--line"><span class="fp-tag">Tag Label</span>
</div>
<div class="fp-vertical-spacing--line -hidden-up-md">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-xl -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Description
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Mise à prix
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Dernière enchère
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Enchérisseurs
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">3
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Enchérisseurs
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 4 heures
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Anonyme
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 2 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">40 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 3 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tente de gagner cette exclusivité !
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center">
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -sm -star"/>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-semi-bold">Nom
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-arrow-square-in -s16"></i></span>Je participe
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-chevron-left -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">vendredi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">19 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">samedi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">dimanche
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<i class="fp-icon fp-glyph-chevron-right -color-shade-300"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">12:00
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tu aimeras peut-être ...
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--footer">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-xl -text-semi-bold">9000 TKN
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-500">120€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-shopping-cart -s16"></i></span>Acheter
</button>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
<div class="fp-layout--highlighted-media"><img class="fp-highlighted-media" src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-layout--highlighted-media--close">
<button class="fp-icon fp-glyph-close -s24 -pointer"></button>
</div>
<div class="fp-layout--highlighted-media--previous">
<button class="fp-icon fp-glyph-chevron-left -s24 -pointer"></button>
</div>
<div class="fp-layout--highlighted-media--next">
<button class="fp-icon fp-glyph-chevron-right -s24 -pointer"></button>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-sticky-pane
aside.fp-sticky-pane--aside
.fp-display
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnails
img.fp-display--thumbnail-image.-active(src="https://files.fairplayer.co/exclusive.jpg")
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnail-video
.fp-video.-expand
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-sticky-pane--content
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Expérience immersion : dans la peau d'un joueur
.fp-vertical-spacing--line
span.fp-tag Tag Label
.fp-vertical-spacing--line.-hidden-up-md
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-xl.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
h2.fp-title Description
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent.-s-sm
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Mise à prix
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 30 000€
.fp-horizontal-spacing--column
.fp-card.-highlighted
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Dernière enchère
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 50 000€
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Enchérisseurs
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 3
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Enchérisseurs
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 4 heures
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 50 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Anonyme
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 2 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 40 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 3 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 30 000€
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
h2.fp-title Tente de gagner cette exclusivité !
.fp-vertical-spacing--line
span.fp-text Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center
.fp-horizontal-spacing--column
img.fp-illustration.-sm.-star
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm Sponsorisé par
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-semi-bold Nom
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-arrow-square-in.-s16
| Je participe
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-chevron-left.-pointer
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold vendredi
.fp-vertical-spacing--line
span.fp-text 19 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold samedi
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold dimanche
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-horizontal-spacing--column
i.fp-icon.fp-glyph-chevron-right.-color-shade-300
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 9:20
.fp-vertical-spacing--line
.fp-badge.-clickable 9:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:20
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-vertical-spacing--line
.fp-badge.-clickable 12:00
.fp-horizontal-spacing--column
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Tu aimeras peut-être ...
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-page--footer
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-xl.-text-semi-bold 9000 TKN
.fp-vertical-spacing--line
span.fp-text.-color-shade-500 120€
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-shopping-cart.-s16
| Acheter
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile
.fp-layout--highlighted-media
img.fp-highlighted-media(src="https://files.fairplayer.co/exclusive.jpg")
.fp-layout--highlighted-media--close
button.fp-icon.fp-glyph-close.-s24.-pointer
.fp-layout--highlighted-media--previous
button.fp-icon.fp-glyph-chevron-left.-s24.-pointer
.fp-layout--highlighted-media--next
button.fp-icon.fp-glyph-chevron-right.-s24.-pointer<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-progress">
<div class="fp-progress--title">Progress title</div>
<div class="fp-progress--progression">
<div class="fp-progress-bar">
<div class="fp-progress-bar--bar -fill80"></div>
</div>
<div class="fp-progress--progression-text">80%</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-logo-with-title">
<div class="fp-logo -sm"><img src="/atom/logo/logo.png" alt="Logo"/></div>
<h1 class="fp-title">Title
</h1>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card-input-file">
<i class="fp-icon fp-glyph-identification-card -s50"></i>
<div class="fp-card-input-file--title">Title</div>
<div class="fp-card-input-file--input">
<label class="fp-input-file"><span>Click here to upload a file</span>
<input type="file"/>
</label>
</div>
<div class="fp-card-input-file--info">Lorem ipsum dolor</div>
<div class="fp-card-input-file--info">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-separator">
<div class="fp-separator--text">OR
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card-input-file">
<i class="fp-icon fp-glyph-identification-badge -s50"></i>
<div class="fp-card-input-file--title">Title</div>
<div class="fp-card-input-file--input">
<label class="fp-input-file"><span>Click here to upload a file</span>
<input type="file"/>
</label>
</div>
<div class="fp-card-input-file--info">Lorem ipsum dolor</div>
<div class="fp-card-input-file--info">Lorem ipsum dolor sit amet</div>
<div class="fp-card-input-file--info">
<div class="fp-alert -success">
<i class="fp-icon fp-glyph-check -color-success -s18"></i>
<span class="fp-text">Success
</span>
</div>
</div>
<div class="fp-card-input-file--info">
<span class="fp-text">filename.pdf
</span>
<button class="fp-icon fp-glyph-trash -color-shade-400 -pointer"></button>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card-input-file">
<i class="fp-icon fp-glyph-identification-badge -s50"></i>
<div class="fp-card-input-file--title">Title</div>
<div class="fp-card-input-file--input">
<label class="fp-input-file"><span>Click here to upload a file</span>
<input type="file"/>
</label>
</div>
<div class="fp-card-input-file--info">Lorem ipsum dolor</div>
<div class="fp-card-input-file--info">Lorem ipsum dolor sit amet</div>
<div class="fp-card-input-file--info">
<i class="fp-icon fp-glyph-warning -color-danger -s24"></i>
</div>
<div class="fp-card-input-file--info">
<span class="fp-text -color-danger">Le fichier dépasse la limite autorisée
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent">
<div class="fp-horizontal-spacing--column">
<button class="fp-button -expand -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-arrow-left -s16"></i></span>Cancel
</button>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button -expand"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-check -s16"></i></span>Confirm
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-progress
.fp-progress--title Progress title
.fp-progress--progression
.fp-progress-bar
.fp-progress-bar--bar.-fill80
.fp-progress--progression-text 80%
.fp-vertical-spacing--line
.fp-logo-with-title
.fp-logo.-sm
img(src="/atom/logo/logo.png" alt="Logo")
h1.fp-title Title
.fp-vertical-spacing--line.-align-center
span.fp-text 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.
.fp-vertical-spacing--line
.fp-card-input-file
i.fp-icon.fp-glyph-identification-card.-s50
.fp-card-input-file--title Title
.fp-card-input-file--input
label.fp-input-file
span Click here to upload a file
input(type="file")
.fp-card-input-file--info Lorem ipsum dolor
.fp-card-input-file--info Lorem ipsum dolor sit amet
.fp-vertical-spacing--line
.fp-separator
.fp-separator--text OR
.fp-vertical-spacing--line
.fp-card-input-file
i.fp-icon.fp-glyph-identification-badge.-s50
.fp-card-input-file--title Title
.fp-card-input-file--input
label.fp-input-file
span Click here to upload a file
input(type="file")
.fp-card-input-file--info Lorem ipsum dolor
.fp-card-input-file--info Lorem ipsum dolor sit amet
.fp-card-input-file--info
.fp-alert.-success
i.fp-icon.fp-glyph-check.-color-success.-s18
span.fp-text Success
.fp-card-input-file--info
span.fp-text filename.pdf
button.fp-icon.fp-glyph-trash.-color-shade-400.-pointer
.fp-vertical-spacing--line
.fp-card-input-file
i.fp-icon.fp-glyph-identification-badge.-s50
.fp-card-input-file--title Title
.fp-card-input-file--input
label.fp-input-file
span Click here to upload a file
input(type="file")
.fp-card-input-file--info Lorem ipsum dolor
.fp-card-input-file--info Lorem ipsum dolor sit amet
.fp-card-input-file--info
i.fp-icon.fp-glyph-warning.-color-danger.-s24
.fp-card-input-file--info
span.fp-text.-color-danger Le fichier dépasse la limite autorisée
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent
.fp-horizontal-spacing--column
button.fp-button.-expand.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-arrow-left.-s16
| Cancel
.fp-horizontal-spacing--column
button.fp-button.-expand
span.fp-button--icon
i.fp-icon.fp-glyph-check.-s16
| Confirm
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-progress">
<div class="fp-progress--title">Progress title</div>
<div class="fp-progress--progression">
<div class="fp-progress-bar">
<div class="fp-progress-bar--bar -fill80"></div>
</div>
<div class="fp-progress--progression-text">80%</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-logo-with-title">
<div class="fp-logo -sm"><img src="/atom/logo/logo.png" alt="Logo"/></div>
<h1 class="fp-title">Title
</h1>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<div class="fp-input-select">
<select>
<option value="first">First
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent">
<div class="fp-horizontal-spacing--column">
<button class="fp-button -expand -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-arrow-left -s16"></i></span>Cancel
</button>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button -expand"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-check -s16"></i></span>Confirm
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-progress
.fp-progress--title Progress title
.fp-progress--progression
.fp-progress-bar
.fp-progress-bar--bar.-fill80
.fp-progress--progression-text 80%
.fp-vertical-spacing--line
.fp-logo-with-title
.fp-logo.-sm
img(src="/atom/logo/logo.png" alt="Logo")
h1.fp-title Title
.fp-vertical-spacing--line.-align-center
span.fp-text 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.
.fp-vertical-spacing--line
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line
label.fp-field Label
.fp-input-select
select
option(value="first")
| First
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-vertical-spacing--line
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent
.fp-horizontal-spacing--column
button.fp-button.-expand.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-arrow-left.-s16
| Cancel
.fp-horizontal-spacing--column
button.fp-button.-expand
span.fp-button--icon
i.fp-icon.fp-glyph-check.-s16
| Confirm
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-tos-balls">
<div class="fp-tos-balls--basketball"></div>
<div class="fp-tos-balls--rugby"></div>
<div class="fp-tos-balls--football"></div>
</div>
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-logo-with-title">
<div class="fp-logo -sm"><img src="/atom/logo/logo.png" alt="Logo"/></div>
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-xl">Bonjour futur membre
</span>
</div>
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Fairplayer !
</h1>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">Afin de poursuivre le parcours et profiter des exclusivités du club, tu dois prendre connaissance et accepter les conditions ci-dessous.
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="first"/>
</div>
<div class="fp-checkable-element--label">
<label for="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="second"/>
</div>
<div class="fp-checkable-element--label">
<label for="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="third"/>
</div>
<div class="fp-checkable-element--label">
<label for="third">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="fourth"/>
</div>
<div class="fp-checkable-element--label">
<label for="fourth">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-check -s16"></i></span>Confirm
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-tos-balls
.fp-tos-balls--basketball
.fp-tos-balls--rugby
.fp-tos-balls--football
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
.fp-logo-with-title
.fp-logo.-sm
img(src="/atom/logo/logo.png" alt="Logo")
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-xl Bonjour futur membre
.fp-vertical-spacing--line
h1.fp-title Fairplayer !
.fp-vertical-spacing--line.-align-center
span.fp-text Afin de poursuivre le parcours et profiter des exclusivités du club, tu dois prendre connaissance et accepter les conditions ci-dessous.
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#first.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="first")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#second.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="second")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#third.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="third")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#fourth.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="fourth")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link
.fp-vertical-spacing--line.-justify-center
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-check.-s16
| Confirm
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-listing-element">
<i class="fp-icon fp-glyph-check-circle -color-success -s24"></i>
<span class="fp-text">Informations complétées
</span>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-listing-element">
<i class="fp-icon fp-glyph-check-circle -color-success -s24"></i>
<span class="fp-text">Documents envoyés
</span>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-listing-element">
<i class="fp-icon fp-glyph-loader -color-shade-900 -s24"></i>
<span class="fp-text">Validation en attente
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-justify-center
.fp-logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-vertical-spacing--line.-align-center
h1.fp-title Title
.fp-vertical-spacing--line.-align-center
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
.fp-listing-element
i.fp-icon.fp-glyph-check-circle.-color-success.-s24
span.fp-text Informations complétées
.fp-vertical-spacing--line
.fp-listing-element
i.fp-icon.fp-glyph-check-circle.-color-success.-s24
span.fp-text Documents envoyés
.fp-vertical-spacing--line
.fp-listing-element
i.fp-icon.fp-glyph-loader.-color-shade-900.-s24
span.fp-text Validation en attente
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -justify-center">
<h1 class="fp-title">Bon retour parmi nous !
</h1>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-icons-input">
<label class="fp-icons-input--left-icon" for="icons-input-mixin">
<i class="fp-icon fp-glyph-mail -s16"></i>
</label>
<input class="fp-input-text" id="icons-input-mixin" placeholder="Email"/>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-icons-input">
<label class="fp-icons-input--left-icon" for="icons-input-mixin">
<i class="fp-icon fp-glyph-lock -s16"></i>
</label>
<div class="fp-icons-input--right-icon">
<button class="fp-icon fp-glyph-eye -s16 -pointer"></button>
</div>
<input class="fp-input-text" id="icons-input-mixin" placeholder="Mot de passe"/>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center"><a class="fp-link -secondary -text-sm">Mot de passe oublié ?</a>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand">Je me connecte
</button>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-separator">
<div class="fp-separator--text">
<div class="fp-separator--text">OU</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand -secondary"><span class="fp-button--icon"><img class="fp-illustration -xs -google-logo"/></span>Continuer avec Google
</button>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<span class="fp-text -color-shade-500 -text-sm">Tu n'as pas de compte ? <a class="fp-link -secondary">Inscris-toi !</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-justify-center
h1.fp-title Bon retour parmi nous !
.fp-vertical-spacing--line.-justify-center
.fp-icons-input
label.fp-icons-input--left-icon(for="icons-input-mixin")
i.fp-icon.fp-glyph-mail.-s16
input#icons-input-mixin.fp-input-text(placeholder="Email")
.fp-vertical-spacing--line.-justify-center
.fp-icons-input
label.fp-icons-input--left-icon(for="icons-input-mixin")
i.fp-icon.fp-glyph-lock.-s16
.fp-icons-input--right-icon
button.fp-icon.fp-glyph-eye.-s16.-pointer
input#icons-input-mixin.fp-input-text(placeholder="Mot de passe")
.fp-vertical-spacing--line.-justify-center
a.fp-link.-secondary.-text-sm Mot de passe oublié ?
.fp-vertical-spacing--line
button.fp-button.-expand Je me connecte
.fp-vertical-spacing--line
.fp-separator
.fp-separator--text
.fp-separator--text OU
.fp-vertical-spacing--line
button.fp-button.-expand.-secondary
span.fp-button--icon
img.fp-illustration.-xs.-google-logo
| Continuer avec Google
.fp-vertical-spacing--line.-justify-center
span.fp-text.-color-shade-500.-text-sm Tu n'as pas de compte ?
a.fp-link.-secondary Inscris-toi !
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -justify-end">
<button class="fp-button -no-border"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-filter -s16"></i></span>Filter
</button>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm -wrap">
<div class="fp-horizontal-spacing--column">
<span class="fp-badge">Du + au - cher<span class="fp-badge--action">
<i class="fp-icon fp-glyph-close -s10"></i></span>
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-badge">Access<span class="fp-badge--action">
<i class="fp-icon fp-glyph-close -s10"></i></span>
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols3 -cols2-up-md -cols1-up-sm">
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
<div class="fp-presentation-card--mask">
<span class="fp-badge">Badge
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
<div class="fp-presentation-card--mask">
<span class="fp-badge">Badge
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-justify-end
button.fp-button.-no-border
span.fp-button--icon
i.fp-icon.fp-glyph-filter.-s16
| Filter
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm.-wrap
.fp-horizontal-spacing--column
span.fp-badge Du + au - cher
span.fp-badge--action
i.fp-icon.fp-glyph-close.-s10
.fp-horizontal-spacing--column
span.fp-badge Access
span.fp-badge--action
i.fp-icon.fp-glyph-close.-s10
.fp-vertical-spacing--line
.fp-responsive-grid.-cols3.-cols2-up-md.-cols1-up-sm
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-presentation-card--mask
span.fp-badge Badge
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-responsive-grid--column
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-presentation-card--mask
span.fp-badge Badge
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-chat-page">
<div class="fp-chat-page--interlocutors">
<div class="fp-interlocutors">
<div class="fp-interlocutors--header">
<h2 class="fp-title">Conversations
</h2>
</div>
<div class="fp-interlocutors--list"><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a><a class="fp-interlocutor -active" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div></a><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a>
</div>
<div class="fp-interlocutors--empty">
<span class="fp-text -text-semi-bold">Démarrez une nouvelle conversation !
</span>
<span class="fp-text">Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.
</span>
</div>
</div>
</div>
<div class="fp-chat-page--members">
<div class="fp-chat-page--members--interlocutors">
<div class="fp-interlocutors">
<div class="fp-interlocutors--header">
<h2 class="fp-title">Conversations
</h2>
</div>
<div class="fp-interlocutors--list"><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a><a class="fp-interlocutor -active" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div></a><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">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.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a>
</div>
<div class="fp-interlocutors--empty">
<span class="fp-text -text-semi-bold">Démarrez une nouvelle conversation !
</span>
<span class="fp-text">Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.
</span>
</div>
</div>
</div>
<div class="fp-chat-page--members--list">
<div class="fp-responsive-grid -cols4 -cols3-up-lg -cols2-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-member-card -clickable">
<div class="fp-image -circled -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-text -lines-2 -text-semi-bold">Text
</div><a class="fp-link">Contact</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-chat-page
.fp-chat-page--interlocutors
.fp-interlocutors
.fp-interlocutors--header
h2.fp-title Conversations
.fp-interlocutors--list
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
.fp-interlocutor--unread
.fp-chip 1
a.fp-interlocutor.-active(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
.fp-interlocutor--unread
.fp-chip 1
.fp-interlocutors--empty
span.fp-text.-text-semi-bold Démarrez une nouvelle conversation !
span.fp-text Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.
.fp-chat-page--members
.fp-chat-page--members--interlocutors
.fp-interlocutors
.fp-interlocutors--header
h2.fp-title Conversations
.fp-interlocutors--list
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
.fp-interlocutor--unread
.fp-chip 1
a.fp-interlocutor.-active(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm 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.
.fp-interlocutor--unread
.fp-chip 1
.fp-interlocutors--empty
span.fp-text.-text-semi-bold Démarrez une nouvelle conversation !
span.fp-text Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.
.fp-chat-page--members--list
.fp-responsive-grid.-cols4.-cols3-up-lg.-cols2-up-md
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-responsive-grid--column
.fp-member-card.-clickable
.fp-image.-circled.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-text.-lines-2.-text-semi-bold Text
a.fp-link Contact
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-sticky-pane">
<aside class="fp-sticky-pane--aside">
<div class="fp-display">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--thumbnails"><img class="fp-display--thumbnail-image -active" src="https://files.fairplayer.co/exclusive.jpg"/><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-display--thumbnail-video">
<div class="fp-video -expand ">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
</div><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
</aside>
<div class="fp-sticky-pane--content">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h1>
</div>
<div class="fp-vertical-spacing--line"><span class="fp-tag">Tag Label</span>
</div>
<div class="fp-vertical-spacing--line -hidden-up-md">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-xl -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Description
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Mise à prix
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Dernière enchère
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Enchérisseurs
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">3
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Enchérisseurs
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 4 heures
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">50 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Anonyme
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 2 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">40 000€
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Bill GATES
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">il y a 3 jours
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">30 000€
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tente de gagner cette exclusivité !
</h2>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center">
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -sm -star"/>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-semi-bold">Nom
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-arrow-square-in -s16"></i></span>Je participe
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-chevron-left -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">vendredi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">19 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">samedi
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">dimanche
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">20 nov
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<i class="fp-icon fp-glyph-chevron-right -color-shade-300"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -s-sm">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">9:40
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:20
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">11:40
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-badge -clickable">12:00
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Tu aimeras peut-être ...
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--footer">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-xl -text-semi-bold">9000 TKN
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-500">120€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-shopping-cart -s16"></i></span>Acheter
</button>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
<div class="fp-layout--modal">
<div class="fp-modal">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<i class="fp-icon fp-glyph-loader -color-shade-400 -s50 -spin"></i>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-semi-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<i class="fp-icon fp-glyph-thunder -color-shade-900 -s24"></i>
</div>
</div>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-sticky-pane
aside.fp-sticky-pane--aside
.fp-display
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnails
img.fp-display--thumbnail-image.-active(src="https://files.fairplayer.co/exclusive.jpg")
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnail-video
.fp-video.-expand
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-sticky-pane--content
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Expérience immersion : dans la peau d'un joueur
.fp-vertical-spacing--line
span.fp-tag Tag Label
.fp-vertical-spacing--line.-hidden-up-md
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-xl.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
h2.fp-title Description
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent.-s-sm
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Mise à prix
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 30 000€
.fp-horizontal-spacing--column
.fp-card.-highlighted
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Dernière enchère
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 50 000€
.fp-horizontal-spacing--column
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Enchérisseurs
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold 3
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Enchérisseurs
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 4 heures
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 50 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Anonyme
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 2 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 40 000€
.fp-vertical-spacing--line
.fp-card
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Bill GATES
.fp-vertical-spacing--line
span.fp-text.-text-sm il y a 3 jours
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold 30 000€
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
h2.fp-title Tente de gagner cette exclusivité !
.fp-vertical-spacing--line
span.fp-text Un jeu concours est en cours pour te permettre de gagner des expériences et produits uniques !
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center
.fp-horizontal-spacing--column
img.fp-illustration.-sm.-star
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-sm Sponsorisé par
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-semi-bold Nom
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-arrow-square-in.-s16
| Je participe
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-chevron-left.-pointer
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold vendredi
.fp-vertical-spacing--line
span.fp-text 19 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold samedi
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-responsive-grid--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold dimanche
.fp-vertical-spacing--line
span.fp-text 20 nov
.fp-horizontal-spacing--column
i.fp-icon.fp-glyph-chevron-right.-color-shade-300
.fp-vertical-spacing--line.-align-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-s-sm
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 9:20
.fp-vertical-spacing--line
.fp-badge.-clickable 9:40
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-badge.-clickable 11:20
.fp-vertical-spacing--line
.fp-badge.-clickable 11:40
.fp-vertical-spacing--line
.fp-badge.-clickable 12:00
.fp-horizontal-spacing--column
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h2.fp-title Tu aimeras peut-être ...
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-page--footer
.fp-horizontal-spacing
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-xl.-text-semi-bold 9000 TKN
.fp-vertical-spacing--line
span.fp-text.-color-shade-500 120€
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-shopping-cart.-s16
| Acheter
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile
.fp-layout--modal
.fp-modal
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
i.fp-icon.fp-glyph-loader.-color-shade-400.-s50.-spin
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-semi-bold Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line.-align-center
i.fp-icon.fp-glyph-thunder.-color-shade-900.-s24<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-header">
<div class="fp-banner-with-logo">
<div class="fp-banner-with-logo--background"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
<div class="fp-banner-with-logo--sponsors">
<div class="fp-pill">
<div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
</div>
<div class="fp-pill--text -hidden-up-lg">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-xs -text-regular">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Burger King
</span>
</div>
</div>
</div>
</div>
<div class="fp-pill">
<div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
</div>
<div class="fp-pill--text -hidden-up-lg">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-xs -text-regular">Sponsorisé par
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Mc Donald's
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-banner-with-logo--logo">
<div class="fp-logo -lg"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-banner-with-logo--content">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-3xl -text-lg-up-lg">Bienvenue dans l'univers
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-8xl -text-xl-up-lg -text-bold">Lou Rugby !
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -text-lg -text-md-up-lg">Explore les offres exclusives de l'univers "Kento Miyaura By Paris Volley" pour vivre des expériences uniques et collectionner des produits rares, disponibles nulle part ailleurs !
</span>
</div>
<div class="fp-vertical-spacing--line -align-left -align-center-up-md">
<span class="fp-text -color-shade-0 -text-lg -text-md-up-lg -text-semi-bold">Attention, les stocks sont ultra limités !
</span>
</div>
<div class="fp-vertical-spacing--line -justify-left -justify-center-up-md">
<div class="fp-vertical-spacing -width-max-content">
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-search -s16"></i></span>J'explore
</button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-button -expand"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-coin -s16"></i></span>J'achète des jetons
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-decorated-listing-element">
<div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
<div class="fp-decorated-listing-element--text">
<span class="fp-text -text-2xl -text-semi-bold">Paris Volley
</span>
<span class="fp-text -text-lg -text-semi-bold">PVT
</span>
</div>
<div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-end">
<div class="fp-horizontal-spacing--column -expand">
<h2 class="fp-title">Membres
</h2>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link -secondary">Voir plus</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-card">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-image -circled -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link -secondary">Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols3 -cols1-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -token"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -medal"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -wallet"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -star"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -crown"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-card">
<div class="fp-icon-with-text"><img class="fp-illustration -md -shield"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols2 -cols1-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Collapsible title
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--content-footer">
<input id="footer-collapsible" type="checkbox" name="collapse"/>
<label class="fp-page--content-footer--trigger" for="footer-collapsible">
<i class="fp-icon fp-glyph-chevron-down -color-shade-400 -s12"></i>
</label>
<div class="fp-page--content-footer--hideable">
<div class="fp-responsive-grid -cols4 -cols1-up-md">
<div class="fp-responsive-grid--column">
<span class="fp-text -text-sm">Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
</span>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Mentions légales
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGU Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">CGV Fairplayer</a>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">Politique de confidentialité</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Nous contacter
</span>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link -text-sm -text-regular">contact@fairplayer.fr</a>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Langue
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-fr"/></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link"><img class="fp-illustration -xs -flag-en"/></a>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm -text-semi-bold">Thème
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-sun"></i></a>
</div>
<div class="fp-horizontal-spacing--column"><a class="fp-link">
<i class="fp-icon fp-glyph-moon -color-shade-500"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="fp-text -text-sm">© 2024 Fairplayer
</span>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
<div class="fp-layout--toaster">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-toast -success">
<div class="fp-toast--message">
<i class="fp-icon fp-glyph-check -color-success -s18"></i>
<span class="fp-text">Toast message
</span>
</div>
<div class="fp-toast--action">
<i class="fp-icon fp-glyph-close -s16"></i>
</div>
<div class="fp-toast--progress" style="width: 100%;"></div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-toast -danger">
<div class="fp-toast--message">
<i class="fp-icon fp-glyph-close-circle -color-danger -s18"></i>
<span class="fp-text">Toast message
</span>
</div>
<div class="fp-toast--action">
<i class="fp-icon fp-glyph-close -s16"></i>
</div>
<div class="fp-toast--progress" style="width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-header
.fp-banner-with-logo
.fp-banner-with-logo--background
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-banner-with-logo--sponsors
.fp-pill
.fp-pill--icons
img.fp-illustration.-xs.-trophy
.fp-pill--text.-hidden-up-lg
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-xs.-text-regular Sponsorisé par
.fp-vertical-spacing--line
span.fp-text Burger King
.fp-pill
.fp-pill--icons
img.fp-illustration.-xs.-trophy
.fp-pill--text.-hidden-up-lg
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-xs.-text-regular Sponsorisé par
.fp-vertical-spacing--line
span.fp-text Mc Donald's
.fp-banner-with-logo--logo
.fp-logo.-lg
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-banner-with-logo--content
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-left.-align-center-up-md
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-text-3xl.-text-lg-up-lg Bienvenue dans l'univers
.fp-vertical-spacing--line
span.fp-text.-text-8xl.-text-xl-up-lg.-text-bold Lou Rugby !
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-text-lg.-text-md-up-lg Explore les offres exclusives de l'univers "Kento Miyaura By Paris Volley" pour vivre des expériences uniques et collectionner des produits rares, disponibles nulle part ailleurs !
.fp-vertical-spacing--line.-align-left.-align-center-up-md
span.fp-text.-color-shade-0.-text-lg.-text-md-up-lg.-text-semi-bold Attention, les stocks sont ultra limités !
.fp-vertical-spacing--line.-justify-left.-justify-center-up-md
.fp-vertical-spacing.-width-max-content
.fp-vertical-spacing--line
button.fp-button.-expand.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-search.-s16
| J'explore
.fp-vertical-spacing--line
button.fp-button.-expand
span.fp-button--icon
i.fp-icon.fp-glyph-coin.-s16
| J'achète des jetons
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-decorated-listing-element
.fp-decorated-listing-element--logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
.fp-decorated-listing-element--text
span.fp-text.-text-2xl.-text-semi-bold Paris Volley
span.fp-text.-text-lg.-text-semi-bold PVT
.fp-decorated-listing-element--banner
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-end
.fp-horizontal-spacing--column.-expand
h2.fp-title Membres
.fp-horizontal-spacing--column
a.fp-link.-secondary Voir plus
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image.-active
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-slider--image
.fp-card
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-image.-circled.-xl
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line.-align-center
a.fp-link.-secondary Link
.fp-vertical-spacing--line
.fp-responsive-grid.-cols3.-cols1-up-md
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-token
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-medal
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-wallet
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-star
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-crown
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-responsive-grid--column
.fp-card
.fp-icon-with-text
img.fp-illustration.-md.-shield
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
.fp-vertical-spacing--line
.fp-responsive-grid.-cols2.-cols1-up-md
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Title
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Title
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Collapsible title
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-page--content-footer
input#footer-collapsible(type="checkbox" name="collapse")
label.fp-page--content-footer--trigger(for="footer-collapsible")
i.fp-icon.fp-glyph-chevron-down.-color-shade-400.-s12
.fp-page--content-footer--hideable
.fp-responsive-grid.-cols4.-cols1-up-md
.fp-responsive-grid--column
span.fp-text.-text-sm Fairplayer est la solution phygitale dédiée au sport professionnel ! Les Exclusives Fairplayer vous donnent accès à des privilèges uniques.
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Mentions légales
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGU Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular CGV Fairplayer
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular Politique de confidentialité
.fp-responsive-grid--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Nous contacter
.fp-vertical-spacing--line
a.fp-link.-text-sm.-text-regular contact@fairplayer.fr
.fp-responsive-grid--column
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Langue
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-fr
.fp-horizontal-spacing--column
a.fp-link
img.fp-illustration.-xs.-flag-en
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-sm.-text-semi-bold Thème
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-sun
.fp-horizontal-spacing--column
a.fp-link
i.fp-icon.fp-glyph-moon.-color-shade-500
span.fp-text.-text-sm © 2024 Fairplayer
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile
.fp-layout--toaster
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-toast.-success
.fp-toast--message
i.fp-icon.fp-glyph-check.-color-success.-s18
span.fp-text Toast message
.fp-toast--action
i.fp-icon.fp-glyph-close.-s16
.fp-toast--progress(style="width: 100%;")
.fp-vertical-spacing--line
.fp-toast.-danger
.fp-toast--message
i.fp-icon.fp-glyph-close-circle.-color-danger.-s18
span.fp-text Toast message
.fp-toast--action
i.fp-icon.fp-glyph-close.-s16
.fp-toast--progress(style="width: 100%;")<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-icon-with-text"><img class="fp-illustration -xs -token"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Solde :
</span>
<span class="fp-text -color-shade-900 -text-semi-bold"> 20 TKN
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-illustrated-item">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-illustrated-item--content">
<h2 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h2>
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-lg -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Sélectionne un mode de paiement
</h2>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-listing-element">
<input class="fp-radio" type="radio" name="name"/>
<span class="fp-text">Carte bancaire
</span>
<div class="fp-listing-element--icon">
<i class="fp-icon fp-glyph-credit-card -color-shade-700 -s18"></i>
</div>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-listing-element">
<input class="fp-radio" type="radio" name="name" checked="checked"/>
<span class="fp-text">Jetons PVT
</span>
<div class="fp-listing-element--icon">
<i class="fp-icon fp-glyph-coins -color-shade-700 -s18"></i>
</div>
</label>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-alert -info">
<i class="fp-icon fp-glyph-info -color-info -s18"></i>
<span class="fp-text">Tu n'as pas assez de jetons !
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--footer">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-check -s16"></i></span>Confirmer
</button>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-justify-center
.fp-icon-with-text
img.fp-illustration.-xs.-token
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text Solde :
span.fp-text.-color-shade-900.-text-semi-bold 20 TKN
.fp-vertical-spacing--line
.fp-illustrated-item
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-illustrated-item--content
h2.fp-title Expérience immersion : dans la peau d'un joueur
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
h2.fp-title Sélectionne un mode de paiement
.fp-vertical-spacing--line
label.fp-listing-element
input.fp-radio(type="radio" name="name")
span.fp-text Carte bancaire
.fp-listing-element--icon
i.fp-icon.fp-glyph-credit-card.-color-shade-700.-s18
.fp-vertical-spacing--line
label.fp-listing-element
input.fp-radio(type="radio" name="name" checked="checked")
span.fp-text Jetons PVT
.fp-listing-element--icon
i.fp-icon.fp-glyph-coins.-color-shade-700.-s18
.fp-vertical-spacing--line
.fp-alert.-info
i.fp-icon.fp-glyph-info.-color-info.-s18
span.fp-text Tu n'as pas assez de jetons !
.fp-page--footer
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-check.-s16
| Confirmer
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-sticky-pane">
<div class="fp-sticky-pane--content">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-display -wide">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-500">28 juin 2024
</span>
</div>
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</span>
</div>
</div>
</div>
<aside class="fp-sticky-pane--aside">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-image -wide -rounded "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-video -wide">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-image -wide -rounded "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-sticky-pane
.fp-sticky-pane--content
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-display.-wide
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-vertical-spacing--line
span.fp-text.-color-shade-500 28 juin 2024
.fp-vertical-spacing--line
h1.fp-title Lorem ipsum dolor sit amet, consectetuer adipiscing elit
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
aside.fp-sticky-pane--aside
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-image.-wide.-rounded
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-vertical-spacing--line
.fp-video.-wide
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
.fp-vertical-spacing--line
.fp-image.-wide.-rounded
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-program-detail">
<div class="fp-program-detail--image">
<div class="fp-display">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
</div>
<div class="fp-program-detail--info">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Course solidaire
</h1>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">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.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Autres programmes
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-program-detail
.fp-program-detail--image
.fp-display
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-program-detail--info
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
h1.fp-title Course solidaire
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line
span.fp-text 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.
.fp-vertical-spacing--line
.fp-vertical-spacing
.fp-vertical-spacing--line
h2.fp-title Autres programmes
.fp-vertical-spacing--line
.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-icons-image">
<div class="fp-image -circled -hoverable -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-icons-image--icon">
<i class="fp-icon fp-glyph-pen -s12"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<h1 class="fp-title">John Doe
</h1>
</div>
<div class="fp-horizontal-spacing--column">
<i class="fp-icon fp-glyph-circle-wavy-check -color-success -s24"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<span class="fp-text">mail@domain.com
</span>
</div>
</div>
</div>
<div class="fp-separator -secondary">
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<i class="fp-icon fp-glyph-shopping-bag -s16"></i>
<span class="fp-text -text-semi-bold">Mes achats
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-illustrated-item">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-illustrated-item--content">
<h2 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h2>
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-lg -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-illustrated-item">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-illustrated-item--content">
<h2 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h2>
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-lg -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-illustrated-item">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-illustrated-item--content">
<h2 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h2>
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-lg -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-collapsible-card">
<input id="collapsible" type="checkbox" name="collapse"/>
<label class="fp-collapsible-card--trigger" for="collapsible">
<span class="fp-text -text-semi-bold">Mes dons
</span>
<i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
</label>
<div class="fp-collapsible-card--content">
<span class="fp-text -color-shade-700">Collapsible content
</span>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<span class="fp-text -text-semi-bold">Découvrir d'autres univers
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-justify-center
.fp-icons-image
.fp-image.-circled.-hoverable.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-icons-image--icon
i.fp-icon.fp-glyph-pen.-s12
.fp-vertical-spacing--line.-justify-center
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
h1.fp-title John Doe
.fp-horizontal-spacing--column
i.fp-icon.fp-glyph-circle-wavy-check.-color-success.-s24
.fp-vertical-spacing--line.-justify-center
span.fp-text mail@domain.com
.fp-separator.-secondary
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
i.fp-icon.fp-glyph-shopping-bag.-s16
span.fp-text.-text-semi-bold Mes achats
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-illustrated-item
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-illustrated-item--content
h2.fp-title Expérience immersion : dans la peau d'un joueur
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-illustrated-item
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-illustrated-item--content
h2.fp-title Expérience immersion : dans la peau d'un joueur
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-illustrated-item
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-illustrated-item--content
h2.fp-title Expérience immersion : dans la peau d'un joueur
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-collapsible-card
input#collapsible(type="checkbox" name="collapse")
label.fp-collapsible-card--trigger(for="collapsible")
span.fp-text.-text-semi-bold Mes dons
i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
.fp-collapsible-card--content
span.fp-text.-color-shade-700 Collapsible content
.fp-vertical-spacing--line
.fp-card
span.fp-text.-text-semi-bold Découvrir d'autres univers
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-responsive-grid -cols2 -cols1-up-md">
<div class="fp-responsive-grid--column">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
<div class="fp-featured-content--background"></div>
<div class="fp-featured-content--description">
<span class="fp-text -text-lg -text-semi-bold">Pre title
</span>
<span class="fp-text -text-2xl -text-semi-bold">Featured content title
</span>
<div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="fp-featured-content--actions">
<button class="fp-button">Button label
</button>
<button class="fp-button -secondary">Button label
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-responsive-grid.-cols2.-cols1-up-md
.fp-responsive-grid--column
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-responsive-grid--column
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-responsive-grid--column
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-responsive-grid--column
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-responsive-grid--column
.fp-featured-content
img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
.fp-featured-content--background
.fp-featured-content--description
span.fp-text.-text-lg.-text-semi-bold Pre title
span.fp-text.-text-2xl.-text-semi-bold Featured content title
.fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-featured-content--actions
button.fp-button Button label
button.fp-button.-secondary Button label
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-icon-with-text"><img class="fp-illustration -xs -token"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Solde :
</span>
<span class="fp-text -color-shade-900 -text-semi-bold"> 20 TKN
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<h1 class="fp-title">Récapitulatif d'achat
</h1>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-illustrated-item">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-illustrated-item--content">
<h2 class="fp-title">Expérience immersion : dans la peau d'un joueur
</h2>
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-lg -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-separator -secondary">
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-alert -info">
<i class="fp-icon fp-glyph-info -color-info -s18"></i>
<span class="fp-text">Ton club va te contacter dans les plus bref délais concernant ton expérience.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-page--footer">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-check -s16"></i></span>Je confirme mon achat
</button>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-justify-center
.fp-icon-with-text
img.fp-illustration.-xs.-token
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text Solde :
span.fp-text.-color-shade-900.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-justify-center
h1.fp-title Récapitulatif d'achat
.fp-vertical-spacing--line
.fp-illustrated-item
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-illustrated-item--content
h2.fp-title Expérience immersion : dans la peau d'un joueur
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-vertical-spacing--line
.fp-separator.-secondary
.fp-vertical-spacing--line
.fp-alert.-info
i.fp-icon.fp-glyph-info.-color-info.-s18
span.fp-text Ton club va te contacter dans les plus bref délais concernant ton expérience.
.fp-page--footer
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-check.-s16
| Je confirme mon achat
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-printer" style="display: flex;">
<div class="fp-exclusive-gift">
<div class="fp-exclusive-gift--image"><img src="https://files.fairplayer.co/exclusive.jpg"/></div>
<div class="fp-exclusive-gift--logo">
<div class="fp-logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-exclusive-gift--content">
<div class="fp-vertical-spacing -width-max-content">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -color-shade-900 -text-lg -text-semi-bold">Carte cadeau LOU Rugby
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -color-shade-900 -text-xl -text-semi-bold">Dans la peau d’un joueur
</span>
</div>
<div class="fp-separator -secondary">
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Pour :
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">De la part de :
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>.fp-printer(style="display: flex;")
.fp-exclusive-gift
.fp-exclusive-gift--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-exclusive-gift--logo
.fp-logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-exclusive-gift--content
.fp-vertical-spacing.-width-max-content
.fp-vertical-spacing--line.-align-center
span.fp-text.-color-shade-900.-text-lg.-text-semi-bold Carte cadeau LOU Rugby
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line.-align-center
span.fp-text.-color-shade-900.-text-xl.-text-semi-bold Dans la peau d’un joueur
.fp-separator.-secondary
.fp-vertical-spacing--line
span.fp-text Pour :
.fp-vertical-spacing--line
span.fp-text De la part de :<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<h1 class="fp-title">Double authentication
</h1>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">Afin de renforcer la sécurité de ton compte, une authentification en deux étapes est requise.
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">Entre le code que nous t'avons envoyé à ton adresse e-mail.
</span>
</div>
<div class="fp-vertical-spacing--line -align-center">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text -text-sm">Tu n'as pas reçu le code ?<a class="fp-link -secondary">Link</a>
</span>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<button class="fp-button -secondary">Button label
</button>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button">Button label
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-justify-center
.fp-logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-vertical-spacing--line.-align-center
h1.fp-title Double authentication
.fp-vertical-spacing--line.-align-center
span.fp-text Afin de renforcer la sécurité de ton compte, une authentification en deux étapes est requise.
.fp-vertical-spacing--line.-align-center
span.fp-text Entre le code que nous t'avons envoyé à ton adresse e-mail.
.fp-vertical-spacing--line.-align-center
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line.-align-center
span.fp-text.-text-sm Tu n'as pas reçu le code ?
a.fp-link.-secondary Link
.fp-vertical-spacing--line.-justify-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
button.fp-button.-secondary Button label
.fp-horizontal-spacing--column
button.fp-button Button label
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<i class="fp-icon fp-glyph-warning -s50"></i>
</div>
<div class="fp-vertical-spacing--line -align-center">
<h2 class="fp-title">Title
</h2>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link">Link</a>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="first"/>
</div>
<div class="fp-checkable-element--label">
<label for="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="first"/>
</div>
<div class="fp-checkable-element--label">
<label for="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="first"/>
</div>
<div class="fp-checkable-element--label">
<label for="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center"><a class="fp-link">Link</a>
</div>
<div class="fp-vertical-spacing--line -align-center"><img class="fp-illustration -kriptown-logo"/>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<button class="fp-button -secondary">Button label
</button>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button">Button label
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
i.fp-icon.fp-glyph-warning.-s50
.fp-vertical-spacing--line.-align-center
h2.fp-title Title
.fp-vertical-spacing--line.-align-center
a.fp-link Link
.fp-vertical-spacing--line.-align-center
.fp-checkable-element
.fp-checkable-element--checkbox
input#first.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="first")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line.-align-center
.fp-checkable-element
.fp-checkable-element--checkbox
input#first.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="first")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line.-align-center
.fp-checkable-element
.fp-checkable-element--checkbox
input#first.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="first")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.fp-vertical-spacing--line.-align-center
a.fp-link Link
.fp-vertical-spacing--line.-align-center
img.fp-illustration.-kriptown-logo
.fp-vertical-spacing--line.-justify-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
button.fp-button.-secondary Button label
.fp-horizontal-spacing--column
button.fp-button Button label
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-center">
<h1 class="fp-title">Title
</h1>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-icon-with-text"><img class="fp-illustration -sm -token"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-icon-with-text--text-line">
<span class="fp-text">1€ = 0,10 TKN
</span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<div class="fp-card">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-converter -secondary">
<div class="fp-converter-input">
<div class="fp-converter-input--ticker">EUR</div>
<input class="fp-converter-input--input" type="number" value="123"/>
<div class="fp-converter-input--icon">
<i class="fp-icon fp-glyph-euro -s18"></i>
</div>
</div>
<div class="fp-converter-input">
<div class="fp-converter-input--ticker">EUR</div>
<input class="fp-converter-input--input" type="number" value="123"/>
<div class="fp-converter-input--icon">
<i class="fp-icon fp-glyph-coin -s18"></i>
</div>
</div>
<div class="fp-converter--icon">
<i class="fp-icon fp-glyph-arrows-down-up -s18"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-600">It's a long descriptive text
</span>
</div>
<div class="fp-vertical-spacing--line">
<input class="fp-input-text" placeholder="Code"/>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -kriptown-logo"/>
</div>
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -mangopay-logo"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<button class="fp-button">Button label
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-center
h1.fp-title Title
.fp-vertical-spacing--line.-justify-center
.fp-icon-with-text
img.fp-illustration.-sm.-token
.fp-icon-with-text--text
.fp-icon-with-text--text-line
h3.fp-title Title
.fp-icon-with-text--text-line
span.fp-text 1€ = 0,10 TKN
.fp-vertical-spacing--line.-align-center
.fp-card
.fp-vertical-spacing
.fp-vertical-spacing--line
h3.fp-title Title
.fp-vertical-spacing--line
.fp-converter.-secondary
.fp-converter-input
.fp-converter-input--ticker EUR
input.fp-converter-input--input(type="number" value="123")
.fp-converter-input--icon
i.fp-icon.fp-glyph-euro.-s18
.fp-converter-input
.fp-converter-input--ticker EUR
input.fp-converter-input--input(type="number" value="123")
.fp-converter-input--icon
i.fp-icon.fp-glyph-coin.-s18
.fp-converter--icon
i.fp-icon.fp-glyph-arrows-down-up.-s18
.fp-vertical-spacing--line
span.fp-text.-color-shade-600 It's a long descriptive text
.fp-vertical-spacing--line
input.fp-input-text(placeholder="Code")
.fp-vertical-spacing--line.-justify-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
img.fp-illustration.-kriptown-logo
.fp-horizontal-spacing--column
img.fp-illustration.-mangopay-logo
.fp-vertical-spacing--line.-justify-center
button.fp-button Button label
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<h3 class="fp-title">Solde disponible
</h3>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-icon-with-text"><img class="fp-illustration -xs -token"/>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text">Solde :
</span>
<span class="fp-text -color-shade-900 -text-semi-bold"> 20 TKN
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -justify-space-evenly">
<div class="fp-horizontal-spacing--column">
<div class="fp-action-icon">
<div class="fp-action-icon--icon">
<i class="fp-icon fp-glyph-credit-card-plus -color-shade-0 -s24"></i>
</div>
<div class="fp-action-icon--text">Action</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-action-icon">
<div class="fp-action-icon--icon">
<i class="fp-icon fp-glyph-credit-card-plus -color-shade-0 -s24"></i>
</div>
<div class="fp-action-icon--text">Action</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-action-icon">
<div class="fp-action-icon--icon">
<i class="fp-icon fp-glyph-credit-card-plus -color-shade-0 -s24"></i>
</div>
<div class="fp-action-icon--text">Action</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h2 class="fp-title">Title
</h2>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-titled-card">
<div class="fp-titled-card--title">
<div class="fp-titled-card--title-main">06 Oct 2022</div>
<div class="fp-titled-card--title-info">Info</div>
</div>
<div class="fp-card -dark">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<span class="fp-text">Text
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">Text
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-titled-card">
<div class="fp-titled-card--title">
<div class="fp-titled-card--title-main">06 Oct 2022</div>
<div class="fp-titled-card--title-info">Info</div>
</div>
<div class="fp-card -dark">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<span class="fp-text">Text
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">Text
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-titled-card">
<div class="fp-titled-card--title">
<div class="fp-titled-card--title-main">06 Oct 2022</div>
<div class="fp-titled-card--title-info">Info</div>
</div>
<div class="fp-card -dark">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<span class="fp-text">Text
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">Text
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-titled-card">
<div class="fp-titled-card--title">
<div class="fp-titled-card--title-main">06 Oct 2022</div>
<div class="fp-titled-card--title-info">Info</div>
</div>
<div class="fp-card -dark">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<span class="fp-text">Text
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">Text
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-titled-card">
<div class="fp-titled-card--title">
<div class="fp-titled-card--title-main">06 Oct 2022</div>
<div class="fp-titled-card--title-info">Info</div>
</div>
<div class="fp-card -dark">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<span class="fp-text">Text
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">Text
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line.-justify-center
.fp-logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
h3.fp-title Solde disponible
.fp-vertical-spacing--line.-justify-center
.fp-icon-with-text
img.fp-illustration.-xs.-token
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text Solde :
span.fp-text.-color-shade-900.-text-semi-bold 20 TKN
.fp-vertical-spacing--line
.fp-horizontal-spacing.-justify-space-evenly
.fp-horizontal-spacing--column
.fp-action-icon
.fp-action-icon--icon
i.fp-icon.fp-glyph-credit-card-plus.-color-shade-0.-s24
.fp-action-icon--text Action
.fp-horizontal-spacing--column
.fp-action-icon
.fp-action-icon--icon
i.fp-icon.fp-glyph-credit-card-plus.-color-shade-0.-s24
.fp-action-icon--text Action
.fp-horizontal-spacing--column
.fp-action-icon
.fp-action-icon--icon
i.fp-icon.fp-glyph-credit-card-plus.-color-shade-0.-s24
.fp-action-icon--text Action
.fp-vertical-spacing--line
.fp-vertical-spacing
.fp-vertical-spacing--line
h2.fp-title Title
.fp-vertical-spacing--line
.fp-titled-card
.fp-titled-card--title
.fp-titled-card--title-main 06 Oct 2022
.fp-titled-card--title-info Info
.fp-card.-dark
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
span.fp-text Text
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold Text
.fp-vertical-spacing--line
.fp-titled-card
.fp-titled-card--title
.fp-titled-card--title-main 06 Oct 2022
.fp-titled-card--title-info Info
.fp-card.-dark
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
span.fp-text Text
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold Text
.fp-vertical-spacing--line
.fp-titled-card
.fp-titled-card--title
.fp-titled-card--title-main 06 Oct 2022
.fp-titled-card--title-info Info
.fp-card.-dark
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
span.fp-text Text
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold Text
.fp-vertical-spacing--line
.fp-titled-card
.fp-titled-card--title
.fp-titled-card--title-main 06 Oct 2022
.fp-titled-card--title-info Info
.fp-card.-dark
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
span.fp-text Text
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold Text
.fp-vertical-spacing--line
.fp-titled-card
.fp-titled-card--title
.fp-titled-card--title-main 06 Oct 2022
.fp-titled-card--title-info Info
.fp-card.-dark
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
span.fp-text Text
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold Text
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-layout">
<div class="fp-layout--top-menu">
<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>
</div>
<div class="fp-layout--body">
<div class="fp-page">
<div class="fp-page--content">
<div class="fp-page--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line -align-center">
<h2 class="fp-title">Fais partie de l'univers "LOU Rugby" avec les jetons LRT !
</h2>
</div>
<div class="fp-vertical-spacing--line -justify-center"><img class="fp-illustration -md -token"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -align-center">
<span class="fp-text">Les jetons LRT permettent d'acheter des produits et expériences exclusives de l'univers "LOU Rugby"
</span>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-log-in -s16"></i></span>Se connecter / S'inscrire
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-layout--bottom-menu">
<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>
</div>
</div>.fp-layout
.fp-layout--top-menu
.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24
.fp-layout--body
.fp-page
.fp-page--content
.fp-page--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line.-justify-center
.fp-logo
img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line.-align-center
h2.fp-title Fais partie de l'univers "LOU Rugby" avec les jetons LRT !
.fp-vertical-spacing--line.-justify-center
img.fp-illustration.-md.-token
.fp-vertical-spacing--line.-align-center
span.fp-text Les jetons LRT permettent d'acheter des produits et expériences exclusives de l'univers "LOU Rugby"
.fp-vertical-spacing--line.-justify-center
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-log-in.-s16
| Se connecter / S'inscrire
.fp-layout--bottom-menu
.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-staff-layout">
<div class="fp-staff-layout--menu">
<div class="fp-staff-layout--menu--logo"><img class="fp-illustration -fairplayer-logo"/><img class="fp-illustration -xs -logo"/>
</div>
<div class="fp-staff-layout--menu--items"><a class="fp-left-menu-item -active">
<i class="fp-icon fp-glyph-piechart -s18"></i>
<div class="fp-left-menu-item--text">Overview
</div></a><a class="fp-left-menu-item">
<i class="fp-icon fp-glyph-shopping-bag -s18"></i>
<div class="fp-left-menu-item--text">Marketplace
</div></a><a class="fp-left-menu-item">
<i class="fp-icon fp-glyph-gift -s18"></i>
<div class="fp-left-menu-item--text">Jeux concours
</div></a>
</div>
</div>
<div class="fp-staff-layout--body">
<div class="fp-staff-layout--body--header">
<div class="fp-breadcrumb"><a class="fp-link -secondary">Previous</a>
<div class="fp-breadcrumb--separator">></div><a class="fp-link -secondary">Previous</a>
<div class="fp-breadcrumb--separator">></div>
<span class="fp-text -color-shade-900 -text-semi-bold">Current
</span>
</div>
<div class="fp-vertical-spacing -justify-center -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-sm">Paris Volley
</span>
</div>
</div>
</div>
<div class="fp-staff-layout--body--content">
<div class="fp-staff-layout--body--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-chevron-left -color-shade-900 -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column">
<h2 class="fp-title">Créer un Exclusive
</h2>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<label class="fp-field">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">Nom
</div>
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -xs -flag-fr"/>
</div>
</div>
<input class="fp-input-text"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">Nom
</div>
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -xs -flag-en"/>
</div>
</div>
<input class="fp-input-text"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-semi-bold">Visibilité
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox"/>
</div>
<div class="fp-checkable-element--label">
<label>Label
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent">
<div class="fp-horizontal-spacing--column">
<label class="fp-field">Main image
<div class="fp-media-input">
<div class="fp-media-input--input">
<i class="fp-icon fp-glyph-image"></i>
<label><b>Glissez-déposez </b>ou <b>Sélectionnez </b>une image
</label>
<input type="file"/>
</div>
<div class="fp-media-input--media">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
</div>
</label>
</div>
<div class="fp-horizontal-spacing--column">
<label class="fp-field">Extra media
<div class="fp-media-input">
<div class="fp-media-input--input">
<i class="fp-icon fp-glyph-image"></i>
<label><b>Glissez-déposez </b>ou <b>Sélectionnez </b>des images
</label>
<input type="file"/>
</div>
<div class="fp-media-input--media">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-media-input--media-actions">
<div class="fp-media-input--media-actions-group">
<button class="fp-icon fp-glyph-chevron-up -color-shade-900 -s12 -pointer"></button>
<button class="fp-icon fp-glyph-chevron-down -color-shade-900 -s12 -pointer"></button>
</div>
<button class="fp-icon fp-glyph-trash -color-shade-900 -s16 -pointer"></button>
</div>
</div>
<div class="fp-media-input--media">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-media-input--media-actions">
<div class="fp-media-input--media-actions-group">
<button class="fp-icon fp-glyph-chevron-up -color-shade-900 -s12 -pointer"></button>
<button class="fp-icon fp-glyph-chevron-down -color-shade-900 -s12 -pointer"></button>
</div>
<button class="fp-icon fp-glyph-trash -color-shade-900 -s16 -pointer"></button>
</div>
</div>
<div class="fp-media-input--media">
<div class="fp-image -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-media-input--media-actions">
<div class="fp-media-input--media-actions-group">
<button class="fp-icon fp-glyph-chevron-up -color-shade-900 -s12 -pointer"></button>
<button class="fp-icon fp-glyph-chevron-down -color-shade-900 -s12 -pointer"></button>
</div>
<button class="fp-icon fp-glyph-trash -color-shade-900 -s16 -pointer"></button>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-semi-bold">Prix
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-converter">
<div class="fp-converter-input">
<div class="fp-converter-input--ticker">EUR</div>
<input class="fp-converter-input--input" type="number" value="123"/>
<div class="fp-converter-input--icon">
<i class="fp-icon fp-glyph-euro -s18"></i>
</div>
</div>
<div class="fp-converter-input">
<div class="fp-converter-input--ticker">EUR</div>
<input class="fp-converter-input--input" type="number" value="123"/>
<div class="fp-converter-input--icon">
<i class="fp-icon fp-glyph-coin -s18"></i>
</div>
</div>
<div class="fp-converter--icon">
<i class="fp-icon fp-glyph-arrows-down-up -s18"></i>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
</div>
<div class="fp-vertical-spacing--line">
<label class="fp-field">Label
<div class="fp-input-select">
<select>
<option value="first">First
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -equivalent">
<div class="fp-horizontal-spacing--column">
<label class="fp-field">
<div class="fp-field--actions">
<button class="fp-icon fp-glyph-translate -color-shade-900 -pointer"></button>
<button class="fp-icon fp-glyph-magic-wand -color-shade-900 -pointer"></button>
<button class="fp-icon fp-glyph-eye -color-shade-900 -pointer"></button>
<button class="fp-icon fp-glyph-arrow-clockwise -color-shade-900 -pointer"></button>
</div>
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">Description
</div>
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -xs -flag-fr"/>
</div>
</div>
<textarea class="fp-input-text" rows="10">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.</textarea>
</label>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-semi-bold">Prévisualisation
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-sm">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.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-staff-layout--body--footer">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<button class="fp-button -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-chevron-left -s16"></i></span>Retour
</button>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-plus -s16"></i></span>Action
</button>
</div>
</div>
</div>
</div>
</div>.fp-staff-layout
.fp-staff-layout--menu
.fp-staff-layout--menu--logo
img.fp-illustration.-fairplayer-logo
img.fp-illustration.-xs.-logo
.fp-staff-layout--menu--items
a.fp-left-menu-item.-active
i.fp-icon.fp-glyph-piechart.-s18
.fp-left-menu-item--text Overview
a.fp-left-menu-item
i.fp-icon.fp-glyph-shopping-bag.-s18
.fp-left-menu-item--text Marketplace
a.fp-left-menu-item
i.fp-icon.fp-glyph-gift.-s18
.fp-left-menu-item--text Jeux concours
.fp-staff-layout--body
.fp-staff-layout--body--header
.fp-breadcrumb
a.fp-link.-secondary Previous
.fp-breadcrumb--separator >
a.fp-link.-secondary Previous
.fp-breadcrumb--separator >
span.fp-text.-color-shade-900.-text-semi-bold Current
.fp-vertical-spacing.-justify-center.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-sm Paris Volley
.fp-staff-layout--body--content
.fp-staff-layout--body--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-chevron-left.-color-shade-900.-pointer
.fp-horizontal-spacing--column
h2.fp-title Créer un Exclusive
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
label.fp-field
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column Nom
.fp-horizontal-spacing--column
img.fp-illustration.-xs.-flag-fr
input.fp-input-text
.fp-vertical-spacing--line
label.fp-field
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column Nom
.fp-horizontal-spacing--column
img.fp-illustration.-xs.-flag-en
input.fp-input-text
.fp-vertical-spacing--line
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-semi-bold Visibilité
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label Label
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent
.fp-horizontal-spacing--column
label.fp-field Main image
.fp-media-input
.fp-media-input--input
i.fp-icon.fp-glyph-image
label
b Glissez-déposez
| ou
b Sélectionnez
| une image
input(type="file")
.fp-media-input--media
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
label.fp-field Extra media
.fp-media-input
.fp-media-input--input
i.fp-icon.fp-glyph-image
label
b Glissez-déposez
| ou
b Sélectionnez
| des images
input(type="file")
.fp-media-input--media
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-media-input--media-actions
.fp-media-input--media-actions-group
button.fp-icon.fp-glyph-chevron-up.-color-shade-900.-s12.-pointer
button.fp-icon.fp-glyph-chevron-down.-color-shade-900.-s12.-pointer
button.fp-icon.fp-glyph-trash.-color-shade-900.-s16.-pointer
.fp-media-input--media
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-media-input--media-actions
.fp-media-input--media-actions-group
button.fp-icon.fp-glyph-chevron-up.-color-shade-900.-s12.-pointer
button.fp-icon.fp-glyph-chevron-down.-color-shade-900.-s12.-pointer
button.fp-icon.fp-glyph-trash.-color-shade-900.-s16.-pointer
.fp-media-input--media
.fp-image.-rounded.-lg
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-media-input--media-actions
.fp-media-input--media-actions-group
button.fp-icon.fp-glyph-chevron-up.-color-shade-900.-s12.-pointer
button.fp-icon.fp-glyph-chevron-down.-color-shade-900.-s12.-pointer
button.fp-icon.fp-glyph-trash.-color-shade-900.-s16.-pointer
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-semi-bold Prix
.fp-vertical-spacing--line
.fp-converter
.fp-converter-input
.fp-converter-input--ticker EUR
input.fp-converter-input--input(type="number" value="123")
.fp-converter-input--icon
i.fp-icon.fp-glyph-euro.-s18
.fp-converter-input
.fp-converter-input--ticker EUR
input.fp-converter-input--input(type="number" value="123")
.fp-converter-input--icon
i.fp-icon.fp-glyph-coin.-s18
.fp-converter--icon
i.fp-icon.fp-glyph-arrows-down-up.-s18
.fp-horizontal-spacing--column
.fp-vertical-spacing
.fp-vertical-spacing--line
label.fp-field Label
input#my-input.fp-input-text(placeholder="Placeholder")
.fp-vertical-spacing--line
label.fp-field Label
.fp-input-select
select
option(value="first")
| First
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-vertical-spacing--line
.fp-horizontal-spacing.-equivalent
.fp-horizontal-spacing--column
label.fp-field
.fp-field--actions
button.fp-icon.fp-glyph-translate.-color-shade-900.-pointer
button.fp-icon.fp-glyph-magic-wand.-color-shade-900.-pointer
button.fp-icon.fp-glyph-eye.-color-shade-900.-pointer
button.fp-icon.fp-glyph-arrow-clockwise.-color-shade-900.-pointer
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column Description
.fp-horizontal-spacing--column
img.fp-illustration.-xs.-flag-fr
textarea.fp-input-text(rows="10")
| 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.
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-semi-bold Prévisualisation
.fp-vertical-spacing--line
span.fp-text.-text-sm 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.
.fp-staff-layout--body--footer
.fp-horizontal-spacing
.fp-horizontal-spacing--column
button.fp-button.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-chevron-left.-s16
| Retour
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-plus.-s16
| Action<div class="fp-staff-layout">
<div class="fp-staff-layout--menu">
<div class="fp-staff-layout--menu--logo"><img class="fp-illustration -fairplayer-logo"/><img class="fp-illustration -xs -logo"/>
</div>
<div class="fp-staff-layout--menu--items"><a class="fp-left-menu-item -active">
<i class="fp-icon fp-glyph-piechart -s18"></i>
<div class="fp-left-menu-item--text">Overview
</div></a><a class="fp-left-menu-item">
<i class="fp-icon fp-glyph-shopping-bag -s18"></i>
<div class="fp-left-menu-item--text">Marketplace
</div></a><a class="fp-left-menu-item">
<i class="fp-icon fp-glyph-gift -s18"></i>
<div class="fp-left-menu-item--text">Jeux concours
</div></a>
</div>
</div>
<div class="fp-staff-layout--body">
<div class="fp-staff-layout--body--header">
<div class="fp-breadcrumb"><a class="fp-link -secondary">Previous</a>
<div class="fp-breadcrumb--separator">></div><a class="fp-link -secondary">Previous</a>
<div class="fp-breadcrumb--separator">></div>
<span class="fp-text -color-shade-900 -text-semi-bold">Current
</span>
</div>
<div class="fp-vertical-spacing -justify-center -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-sm">Paris Volley
</span>
</div>
</div>
</div>
<div class="fp-staff-layout--body--content">
<div class="fp-staff-layout--body--content-wrapper">
<div class="fp-vertical-spacing -s-lg">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-chevron-left -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column">
<h2 class="fp-title">Créer un jeu concours
</h2>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols2 -cols1-up-md">
<div class="fp-responsive-grid--column">
<label class="fp-field">Date de début
<input class="fp-input-text"/>
</label>
</div>
<div class="fp-responsive-grid--column">
<label class="fp-field">Date de fin
<input class="fp-input-text"/>
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols2 -cols1-up-md">
<div class="fp-responsive-grid--column">
<label class="fp-field">Sponsor
<div class="fp-input-select">
<select>
<option value="first">Burger King
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</label>
</div>
<div class="fp-responsive-grid--column">
<label class="fp-field">Url du jeu concours
<input class="fp-input-text"/>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Qui a été élu MVP la saison dernière ?"/>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-input-select">
<select>
<option value="first">Choix
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-down -s12 -pointer"></button>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-trash -s16 -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Réponse 1"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-up -s12 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-down -s12 -pointer"></button>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-trash -s16 -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Réponse 2"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-up -s12 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-down -s12 -pointer"></button>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-trash -s16 -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Réponse 3"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-up -s12 -pointer"></button>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-trash -s16 -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Réponse 4"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link"><span class="fp-link--icon">
<i class="fp-icon fp-glyph-plus -s16"></i></span>Ajouter une réponse</a>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center">
<div class="fp-horizontal-spacing--column">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>Avec bonne réponse
</label>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-input-select">
<select>
<option value="first">Réponse 1
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse obligatoire
</label>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-down -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-list-plus -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-eye-slash -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-copy -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-trash -s16 -pointer"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<textarea class="fp-input-text" rows="10">Aux États-Unis et au Canada anglophone, le « most valuable player » (MVP, qui signifie littéralement le joueur de plus grande valeur) est élu dans la plupart des sports.</textarea>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Quel est ton MVP ?"/>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-input-select">
<select>
<option value="first">Choix
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-down -s12 -pointer"></button>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Réponse 1"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-xs">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-up -s12 -pointer"></button>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Réponse 2"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link"><span class="fp-link--icon">
<i class="fp-icon fp-glyph-plus -s16"></i></span>Ajouter une réponse</a>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-center">
<div class="fp-horizontal-spacing--column">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>Avec bonne réponse
</label>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-input-select">
<select>
<option value="first">Réponse 1
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse obligatoire
</label>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-up -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-down -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-list-minus -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-eye-slash -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-copy -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-trash -s16 -pointer"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card -highlighted">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column -expand">
<input class="fp-input-text" value="Quel est ton handle Instagram ?"/>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-input-select">
<select>
<option value="first">Texte libre
</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link"><span class="fp-link--icon">
<i class="fp-icon fp-glyph-plus -s16"></i></span>Ajouter une réponse</a>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse obligatoire
</label>
</div>
</div>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-chevron-up -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-list-plus -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-eye-slash -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-copy -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing--line">
<button class="fp-icon fp-glyph-trash -s16 -pointer"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line"><a class="fp-link"><span class="fp-link--icon">
<i class="fp-icon fp-glyph-plus -s16"></i></span>Ajouter une question</a>
</div>
</div>
</div>
<div class="fp-staff-layout--body--content-sidebar">
<div class="fp-staff-layout--body--content-sidebar--header">Aperçu</div>
<div class="fp-staff-layout--body--content-sidebar--close">
<button class="fp-icon fp-glyph-close -color-shade-500 -s16 -pointer"></button>
</div>
<div class="fp-vertical-spacing -s-xl">
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">Qui a été élu MVP de la saison dernière ?
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-radio" type="radio" name="name" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse 1
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-radio" type="radio" name="name"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse 2
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-radio" type="radio" name="name"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse 3
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-radio" type="radio" name="name"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse 4
</label>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text">Aux États-Unis et au Canada anglophone, le « most valuable player » (MVP, qui signifie littéralement le joueur de plus grande valeur) est élu dans la plupart des sports.
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">Quel est ton MVP ?
</span>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-radio" type="radio" name="name" checked="checked"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse 1
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-radio" type="radio" name="name"/>
</div>
<div class="fp-checkable-element--label">
<label>Réponse 2
</label>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<span class="fp-text -text-semi-bold">Quel est ton handle Instagram ?
</span>
</div>
<div class="fp-vertical-spacing--line">
<input class="fp-input-text"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-staff-layout--body--footer">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<button class="fp-button -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-chevron-left -s16"></i></span>Retour
</button>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-plus -s16"></i></span>Action
</button>
</div>
</div>
</div>
</div>
</div>.fp-staff-layout
.fp-staff-layout--menu
.fp-staff-layout--menu--logo
img.fp-illustration.-fairplayer-logo
img.fp-illustration.-xs.-logo
.fp-staff-layout--menu--items
a.fp-left-menu-item.-active
i.fp-icon.fp-glyph-piechart.-s18
.fp-left-menu-item--text Overview
a.fp-left-menu-item
i.fp-icon.fp-glyph-shopping-bag.-s18
.fp-left-menu-item--text Marketplace
a.fp-left-menu-item
i.fp-icon.fp-glyph-gift.-s18
.fp-left-menu-item--text Jeux concours
.fp-staff-layout--body
.fp-staff-layout--body--header
.fp-breadcrumb
a.fp-link.-secondary Previous
.fp-breadcrumb--separator >
a.fp-link.-secondary Previous
.fp-breadcrumb--separator >
span.fp-text.-color-shade-900.-text-semi-bold Current
.fp-vertical-spacing.-justify-center.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-sm Paris Volley
.fp-staff-layout--body--content
.fp-staff-layout--body--content-wrapper
.fp-vertical-spacing.-s-lg
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-chevron-left.-pointer
.fp-horizontal-spacing--column
h2.fp-title Créer un jeu concours
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-responsive-grid.-cols2.-cols1-up-md
.fp-responsive-grid--column
label.fp-field Date de début
input.fp-input-text
.fp-responsive-grid--column
label.fp-field Date de fin
input.fp-input-text
.fp-vertical-spacing--line
.fp-responsive-grid.-cols2.-cols1-up-md
.fp-responsive-grid--column
label.fp-field Sponsor
.fp-input-select
select
option(value="first")
| Burger King
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-responsive-grid--column
label.fp-field Url du jeu concours
input.fp-input-text
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Qui a été élu MVP la saison dernière ?")
.fp-horizontal-spacing--column
.fp-input-select
select
option(value="first")
| Choix
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-down.-s12.-pointer
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-trash.-s16.-pointer
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Réponse 1")
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-up.-s12.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-down.-s12.-pointer
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-trash.-s16.-pointer
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Réponse 2")
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-up.-s12.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-down.-s12.-pointer
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-trash.-s16.-pointer
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Réponse 3")
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-up.-s12.-pointer
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-trash.-s16.-pointer
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Réponse 4")
.fp-vertical-spacing--line
a.fp-link
span.fp-link--icon
i.fp-icon.fp-glyph-plus.-s16
| Ajouter une réponse
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center
.fp-horizontal-spacing--column
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox" checked="checked")
.fp-checkable-element--label
label Avec bonne réponse
.fp-horizontal-spacing--column.-expand
.fp-input-select
select
option(value="first")
| Réponse 1
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox" checked="checked")
.fp-checkable-element--label
label Réponse obligatoire
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-down.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-list-plus.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-eye-slash.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-copy.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-trash.-s16.-pointer
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing
.fp-vertical-spacing--line
textarea.fp-input-text(rows="10")
| Aux États-Unis et au Canada anglophone, le « most valuable player » (MVP, qui signifie littéralement le joueur de plus grande valeur) est élu dans la plupart des sports.
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Quel est ton MVP ?")
.fp-horizontal-spacing--column
.fp-input-select
select
option(value="first")
| Choix
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-down.-s12.-pointer
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Réponse 1")
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-xs
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-up.-s12.-pointer
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Réponse 2")
.fp-vertical-spacing--line
a.fp-link
span.fp-link--icon
i.fp-icon.fp-glyph-plus.-s16
| Ajouter une réponse
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-center
.fp-horizontal-spacing--column
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox" checked="checked")
.fp-checkable-element--label
label Avec bonne réponse
.fp-horizontal-spacing--column.-expand
.fp-input-select
select
option(value="first")
| Réponse 1
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox" checked="checked")
.fp-checkable-element--label
label Réponse obligatoire
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-up.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-down.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-list-minus.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-eye-slash.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-copy.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-trash.-s16.-pointer
.fp-vertical-spacing--line
.fp-card.-highlighted
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column.-expand
input.fp-input-text(value="Quel est ton handle Instagram ?")
.fp-horizontal-spacing--column
.fp-input-select
select
option(value="first")
| Texte libre
option(value="second")
| Second
option(value="third")
| Third
span.fp-input-select--caret.fp-glyph-chevron-down
.fp-vertical-spacing--line
a.fp-link
span.fp-link--icon
i.fp-icon.fp-glyph-plus.-s16
| Ajouter une réponse
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-checkbox(type="checkbox" checked="checked")
.fp-checkable-element--label
label Réponse obligatoire
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-chevron-up.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-list-plus.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-eye-slash.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-copy.-s16.-pointer
.fp-vertical-spacing--line
button.fp-icon.fp-glyph-trash.-s16.-pointer
.fp-vertical-spacing--line
a.fp-link
span.fp-link--icon
i.fp-icon.fp-glyph-plus.-s16
| Ajouter une question
.fp-staff-layout--body--content-sidebar
.fp-staff-layout--body--content-sidebar--header Aperçu
.fp-staff-layout--body--content-sidebar--close
button.fp-icon.fp-glyph-close.-color-shade-500.-s16.-pointer
.fp-vertical-spacing.-s-xl
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold Qui a été élu MVP de la saison dernière ?
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-radio(type="radio" name="name" checked="checked")
.fp-checkable-element--label
label Réponse 1
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-radio(type="radio" name="name")
.fp-checkable-element--label
label Réponse 2
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-radio(type="radio" name="name")
.fp-checkable-element--label
label Réponse 3
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-radio(type="radio" name="name")
.fp-checkable-element--label
label Réponse 4
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text Aux États-Unis et au Canada anglophone, le « most valuable player » (MVP, qui signifie littéralement le joueur de plus grande valeur) est élu dans la plupart des sports.
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold Quel est ton MVP ?
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-radio(type="radio" name="name" checked="checked")
.fp-checkable-element--label
label Réponse 1
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input.fp-radio(type="radio" name="name")
.fp-checkable-element--label
label Réponse 2
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
span.fp-text.-text-semi-bold Quel est ton handle Instagram ?
.fp-vertical-spacing--line
input.fp-input-text
.fp-staff-layout--body--footer
.fp-horizontal-spacing
.fp-horizontal-spacing--column
button.fp-button.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-chevron-left.-s16
| Retour
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-plus.-s16
| Action<div class="fp-staff-layout">
<div class="fp-staff-layout--menu">
<div class="fp-staff-layout--menu--logo"><img class="fp-illustration -fairplayer-logo"/><img class="fp-illustration -xs -logo"/>
</div>
<div class="fp-staff-layout--menu--items"><a class="fp-left-menu-item -active">
<i class="fp-icon fp-glyph-piechart -s18"></i>
<div class="fp-left-menu-item--text">Overview
</div></a><a class="fp-left-menu-item">
<i class="fp-icon fp-glyph-shopping-bag -s18"></i>
<div class="fp-left-menu-item--text">Marketplace
</div></a><a class="fp-left-menu-item">
<i class="fp-icon fp-glyph-gift -s18"></i>
<div class="fp-left-menu-item--text">Jeux concours
</div></a>
</div>
</div>
<div class="fp-staff-layout--body">
<div class="fp-staff-layout--body--header">
<div class="fp-breadcrumb"><a class="fp-link -secondary">Previous</a>
<div class="fp-breadcrumb--separator">></div><a class="fp-link -secondary">Previous</a>
<div class="fp-breadcrumb--separator">></div>
<span class="fp-text -color-shade-900 -text-semi-bold">Current
</span>
</div>
<div class="fp-vertical-spacing -justify-center -s-xs">
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-sm -text-semi-bold">John DOE
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-900 -text-sm">Paris Volley
</span>
</div>
</div>
</div>
<div class="fp-staff-layout--body--content">
<div class="fp-staff-layout--body--content-wrapper">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column">
<button class="fp-icon fp-glyph-chevron-left -color-shade-900 -pointer"></button>
</div>
<div class="fp-horizontal-spacing--column">
<h2 class="fp-title">Résultats du jeu concours
</h2>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols4 -cols2-up-md">
<div class="fp-responsive-grid--column">
<label class="fp-field">Date de début
<input class="fp-input-text" disabled="disabled" value="08/03/2024"/>
</label>
</div>
<div class="fp-responsive-grid--column">
<label class="fp-field">Heure de début
<input class="fp-input-text" disabled="disabled" value="08:00"/>
</label>
</div>
<div class="fp-responsive-grid--column">
<label class="fp-field">Date de fin
<input class="fp-input-text" disabled="disabled" value="10/03/2024"/>
</label>
</div>
<div class="fp-responsive-grid--column">
<label class="fp-field">Heure de fin
<input class="fp-input-text" disabled="disabled" value="18:00"/>
</label>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-responsive-grid -cols2 -cols1-up-md">
<div class="fp-responsive-grid--column">
<label class="fp-field">Sponsor
<input class="fp-input-text" disabled="disabled" value="Burger King"/>
</label>
</div>
<div class="fp-responsive-grid--column">
<label class="fp-field">URL du jeu concours
<input class="fp-input-text" disabled="disabled" value="https://main.app.fairplayerlance.fr/clubs/paris-volley/giveaway"/>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<div class="fp-horizontal-spacing -items-end -equivalent">
<div class="fp-horizontal-spacing--column">
<label class="fp-field">Jetons à distribuer par bonne réponse
<input class="fp-input-text" value="10"/>
</label>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">Participations totales :
</span>
<span class="fp-text -text-lg -text-semi-bold"> 148
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-vertical-spacing -s-sm">
<div class="fp-vertical-spacing--line">
<table class="fp-table">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Email</th>
<th>Bonne réponse</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-0"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-0"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-1"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-1"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-2"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-2"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-3"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-3"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-4"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-4"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm -text-regular">Jetons distribués via bonnes réponses :
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm -text-regular">Jetons distribués via bonus :
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm -text-semi-bold">Total :
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">200 TKN
</span>
<span class="fp-text -text-sm -text-regular"> / 100€
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">100 TKN
</span>
<span class="fp-text -text-sm -text-regular"> / 50€
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">300 TKN
</span>
<span class="fp-text -text-sm -text-regular"> / 150€
</span>
</div>
</div>
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
<div class="fp-vertical-spacing--line -justify-end">
<div class="fp-pagination">
<div class="fp-pagination--item -disabled">
<i class="fp-icon fp-glyph-chevron-left -s12"></i>
</div>
<div class="fp-pagination--item -active">1</div>
<div class="fp-pagination--item">2</div>
<div class="fp-pagination--item">3</div>
<div class="fp-pagination--item -disabled">…</div>
<div class="fp-pagination--item">6</div>
<div class="fp-pagination--item -disabled">…</div>
<div class="fp-pagination--item">9</div>
<div class="fp-pagination--item">10</div>
<div class="fp-pagination--item">11</div>
<div class="fp-pagination--item">
<i class="fp-icon fp-glyph-chevron-right -s12"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-staff-layout--body--footer">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<button class="fp-button -secondary"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-chevron-left -s16"></i></span>Retour
</button>
</div>
<div class="fp-horizontal-spacing--column">
<button class="fp-button"><span class="fp-button--icon">
<i class="fp-icon fp-glyph-plus -s16"></i></span>Action
</button>
</div>
</div>
</div>
</div>
</div>.fp-staff-layout
.fp-staff-layout--menu
.fp-staff-layout--menu--logo
img.fp-illustration.-fairplayer-logo
img.fp-illustration.-xs.-logo
.fp-staff-layout--menu--items
a.fp-left-menu-item.-active
i.fp-icon.fp-glyph-piechart.-s18
.fp-left-menu-item--text Overview
a.fp-left-menu-item
i.fp-icon.fp-glyph-shopping-bag.-s18
.fp-left-menu-item--text Marketplace
a.fp-left-menu-item
i.fp-icon.fp-glyph-gift.-s18
.fp-left-menu-item--text Jeux concours
.fp-staff-layout--body
.fp-staff-layout--body--header
.fp-breadcrumb
a.fp-link.-secondary Previous
.fp-breadcrumb--separator >
a.fp-link.-secondary Previous
.fp-breadcrumb--separator >
span.fp-text.-color-shade-900.-text-semi-bold Current
.fp-vertical-spacing.-justify-center.-s-xs
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-sm.-text-semi-bold John DOE
.fp-vertical-spacing--line
span.fp-text.-color-shade-900.-text-sm Paris Volley
.fp-staff-layout--body--content
.fp-staff-layout--body--content-wrapper
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
button.fp-icon.fp-glyph-chevron-left.-color-shade-900.-pointer
.fp-horizontal-spacing--column
h2.fp-title Résultats du jeu concours
.fp-vertical-spacing--line
.fp-card
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-responsive-grid.-cols4.-cols2-up-md
.fp-responsive-grid--column
label.fp-field Date de début
input.fp-input-text(disabled="disabled" value="08/03/2024")
.fp-responsive-grid--column
label.fp-field Heure de début
input.fp-input-text(disabled="disabled" value="08:00")
.fp-responsive-grid--column
label.fp-field Date de fin
input.fp-input-text(disabled="disabled" value="10/03/2024")
.fp-responsive-grid--column
label.fp-field Heure de fin
input.fp-input-text(disabled="disabled" value="18:00")
.fp-vertical-spacing--line
.fp-responsive-grid.-cols2.-cols1-up-md
.fp-responsive-grid--column
label.fp-field Sponsor
input.fp-input-text(disabled="disabled" value="Burger King")
.fp-responsive-grid--column
label.fp-field URL du jeu concours
input.fp-input-text(disabled="disabled" value="https://main.app.fairplayerlance.fr/clubs/paris-volley/giveaway")
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
.fp-horizontal-spacing.-items-end.-equivalent
.fp-horizontal-spacing--column
label.fp-field Jetons à distribuer par bonne réponse
input.fp-input-text(value="10")
.fp-horizontal-spacing--column
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm Participations totales :
span.fp-text.-text-lg.-text-semi-bold 148
.fp-vertical-spacing--line
.fp-vertical-spacing.-s-sm
.fp-vertical-spacing--line
table.fp-table
thead
tr
th
th Date
th Email
th Bonne réponse
th
tbody
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-0")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-0.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-1")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-1.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-2")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-2.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-3")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-3.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-4")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-4.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tfoot
tr
th(colspan="5")
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm.-text-regular Jetons distribués via bonnes réponses :
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm.-text-regular Jetons distribués via bonus :
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm.-text-semi-bold Total :
.fp-horizontal-spacing--column
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 200 TKN
span.fp-text.-text-sm.-text-regular / 100€
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 100 TKN
span.fp-text.-text-sm.-text-regular / 50€
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 300 TKN
span.fp-text.-text-sm.-text-regular / 150€
.fp-vertical-spacing--line.-justify-end
.fp-pagination
.fp-pagination--item.-disabled
i.fp-icon.fp-glyph-chevron-left.-s12
.fp-pagination--item.-active 1
.fp-pagination--item 2
.fp-pagination--item 3
.fp-pagination--item.-disabled …
.fp-pagination--item 6
.fp-pagination--item.-disabled …
.fp-pagination--item 9
.fp-pagination--item 10
.fp-pagination--item 11
.fp-pagination--item
i.fp-icon.fp-glyph-chevron-right.-s12
.fp-staff-layout--body--footer
.fp-horizontal-spacing
.fp-horizontal-spacing--column
button.fp-button.-secondary
span.fp-button--icon
i.fp-icon.fp-glyph-chevron-left.-s16
| Retour
.fp-horizontal-spacing--column
button.fp-button
span.fp-button--icon
i.fp-icon.fp-glyph-plus.-s16
| Action