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-actions">
<div class="fp-display--action">
<i class="fp-icon fp-glyph-heart -s16"></i>
</div>
<div class="fp-display--action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</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">
<i class="fp-icon fp-glyph-chevron-left -color-shade-300"></i>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -no-wrap -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">
<button class="fp-icon fp-glyph-chevron-right -pointer"></button>
</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 -no-wrap -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-actions
.fp-display--action
i.fp-icon.fp-glyph-heart.-s16
.fp-display--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
i.fp-icon.fp-glyph-chevron-left.-color-shade-300
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-no-wrap.-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
button.fp-icon.fp-glyph-chevron-right.-pointer
.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.-no-wrap.-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-actions">
<div class="fp-display--action">
<i class="fp-icon fp-glyph-heart -s16"></i>
</div>
<div class="fp-display--action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</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">
<i class="fp-icon fp-glyph-chevron-left -color-shade-300"></i>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -no-wrap -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">
<button class="fp-icon fp-glyph-chevron-right -pointer"></button>
</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 -no-wrap -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-actions
.fp-display--action
i.fp-icon.fp-glyph-heart.-s16
.fp-display--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
i.fp-icon.fp-glyph-chevron-left.-color-shade-300
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-no-wrap.-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
button.fp-icon.fp-glyph-chevron-right.-pointer
.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.-no-wrap.-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-actions">
<div class="fp-display--action">
<i class="fp-icon fp-glyph-heart -s16"></i>
</div>
<div class="fp-display--action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</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">
<i class="fp-icon fp-glyph-chevron-left -color-shade-300"></i>
</div>
<div class="fp-horizontal-spacing--column -expand">
<div class="fp-responsive-grid -cols6 -cols4-up-lg -cols3-up-md -no-wrap -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">
<button class="fp-icon fp-glyph-chevron-right -pointer"></button>
</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 -no-wrap -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-actions
.fp-display--action
i.fp-icon.fp-glyph-heart.-s16
.fp-display--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
i.fp-icon.fp-glyph-chevron-left.-color-shade-300
.fp-horizontal-spacing--column.-expand
.fp-responsive-grid.-cols6.-cols4-up-lg.-cols3-up-md.-no-wrap.-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
button.fp-icon.fp-glyph-chevron-right.-pointer
.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.-no-wrap.-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>