<?php include( 'inc/html.php' ); ?>
<head>
	<?php include( 'inc/head.php' ); ?>

<style>
	.btn a {margin:10px;}
</style>	

</head>
<body>
<div class="wrapper">

		<p class="tac" style="font-size: 40px">GUIDELINE<br>
			Casinos Barriere
		</p>

		<h1 class="title-main-debug">Colors</h1>

		<div class="row-fluid">

			<div class="col4 bg-color-white p20">
				<ul class="list-debug">
					<li class="color-white">.color-white</li>
					<li class="color-black">.color-black</li>
					<li class="color-back-light">.color-black-light</li>
					<li class="color-grey-darker">.color-grey-darker</li>
					<li class="color-grey-dark">.color-grey-dark</li>
					<li class="color-grey">.color-grey</li>
					<li class="color-grey-light">.color-grey-light</li>
					<li class="color-golden">.color-golden</li>
					<li class="color-golden-dark">.color-golden-dark</li>
				</ul>
			</div>

			<div class="col4 bg-color-grey-light p20">
				<ul class="list-debug">
					<li class="color-white">.color-white</li>
					<li class="color-black">.color-black</li>
					<li class="color-back-light">.color-black-light</li>
					<li class="color-grey-darker">.color-grey-darker</li>
					<li class="color-grey-dark">.color-grey-dark</li>
					<li class="color-grey">.color-grey</li>
					<li class="color-grey-light">.color-grey-light</li>
					<li class="color-golden">.color-golden</li>
					<li class="color-golden-dark">.color-golden-dark</li>
				</ul>
			</div>

			<div class="col4-last bg-color-black-light p20">
				<ul class="list-debug">
					<li class="color-white">.color-white</li>
					<li class="color-black">.color-black</li>
					<li class="color-back-light">.color-black-light</li>
					<li class="color-grey-darker">.color-grey-darker</li>
					<li class="color-grey-dark">.color-grey-dark</li>
					<li class="color-grey">.color-grey</li>
					<li class="color-grey-light">.color-grey-light</li>
					<li class="color-golden">.color-golden</li>
					<li class="color-golden-dark">.color-golden-dark</li>
				</ul>
			</div>

			<div class="col4 bg-color-golden p20">
				<ul class="list-debug">
					<li class="color-white">.color-white</li>
					<li class="color-black">.color-black</li>
					<li class="color-back-light">.color-black-light</li>
					<li class="color-grey-darker">.color-grey-darker</li>
					<li class="color-grey-dark">.color-grey-dark</li>
					<li class="color-grey">.color-grey</li>
					<li class="color-grey-light">.color-grey-light</li>
					<li class="color-golden">.color-golden</li>
					<li class="color-golden-dark">.color-golden-dark</li>
				</ul>
			</div>			

		</div>

		<h1 class="title-main-debug">Logo</h1>

		<div class="row-fluid text-center">

			<div class="logo">Casinos Barrière</div>

		</div>				

		<h1 class="title-main-debug">Typography</h1>

		<ul class="list-debug">
			<li class="lucien-regular fs-xxlarge">.lucien-regular</li>
			<li class="lucien-book fs-xxlarge">.lucien-book</li>
			<li class="lucien-light fs-xxlarge">.lucien-light</li>
			<li class="georgia-regular fs-xxlarge">.Georgia-Regular</li>
		</ul>

		<h1 class="title-main-debug">Title</h1>

		<div class="row-fluid">

			<ul class="col6 list-debug p20">
				<!-- TITLE -->
				<li class="ptb10">
					<span class="underline">h1</span>
					<h1>H1 TITLE</h1>
				</li>
				<li class="ptb10">
					<span class="underline">h2</span>
					<h2>CASINOS BARRIÈRE</h2>
				</li>
				<li class="ptb10">
					<span class="underline">h3</span>
					<h3>Venez rencontrer la chance. Et bien plus.</h3>
				</li>
				<li class="ptb10">
					<span class="underline">h4</span>
					<h4>ENTREZ DANS LE JEU</h4>				
				</li>
				<li class="ptb10">
					<span class="underline">h5</span>
					<h5>Nos casinos proposent des jeux pour tous les styles et tous les niveaux. Essayez ceux qui vous tentent !</h5>					
				</li>

			</ul>

			<ul class="col6 list-debug bg-color-black-light p20">
				<!-- TITLE -->
				<li class="ptb10 color-white">
					<span class="underline">h1</span>
					<h1>H1 TITLE</h1>
				</li>
				<li class="ptb10 color-white">
					<span class="underline">h2</span>
					<h2>CASINOS BARRIÈRE</h2>
				</li>
				<li class="ptb10 color-white">
					<span class="underline">h3</span>
					<h3>Venez rencontrer la chance. Et bien plus.</h3>
				</li>
				<li class="ptb10 color-white">
					<span class="underline">h4</span>
					<h4>ENTREZ DANS LE JEU</h4>				
				</li>
				<li class="ptb10 color-white">
					<span class="underline">h5</span>
					<h5>Nos casinos proposent des jeux pour tous les styles et tous les niveaux. Essayez ceux qui vous tentent !</h5>					
				</li>

			</ul>			

		</div>

		<h1 class="title-main-debug">Buttons</h1>

		<div class="btn bg-color-white p20">

			<a class="button-golden">.button-golden</a>
			<a class="button-golden-outline">.button-golden-outline</a>
			<a class="button-white">.button-white</a>
			<a class="button-deco">.button-deco</a>			
			<a class="button-red">.button-red</a>			

		</div>

		<div class="btn bg-color-black-light p20">

			<a class="button-golden">.button-golden</a>
			<a class="button-golden-outline">.button-golden-outline</a>
			<a class="button-white">.button-white</a>
			<a class="button-deco">.button-deco</a>
			<a class="button-outline">.button-outline</a>
			<a class="button-outline-small">.button-outline-small</a>	
			<a class="button-outline-transparent">.button-outline-transparent</a>	
			<a class="button-red">.button-red</a>

		</div>	

		<h1 class="title-main-debug">Hr</h1>

		<hr class="stars"/>

		<h1 class="title-main-debug">Links & CTA</h1>

		<div class="row-fluid text-right pb20">

			<div class="cta-default">
				<a href="#">Voir les jeux dans votre casino<span class="arrow"></span></a>
			</div>

		</div>

		<div class="row-fluid text-right">

			<div class="cta-default">
				<a href="#">Votre soirée dans votre casino<span class="arrow"></span></a>
			</div>

		</div>	

		<h1 class="title-main-debug">Form Elements</h1>	

		<div class="row-fluid">

			<div class="bg-color-black-light p20">

				<input type="text" value="Ville, code postal..." class="text-input" style="min-width:300px"/>
				<input type="text" value="Entrez un nom de ville" class="text-input geolocation-icon" style="min-width:300px"/>
				<input type="text" value="Email" class="text-input message-icon" style="min-width:300px"/>

			</div>				

		</div>	

		<h1 class="title-main-debug">Disclaimer</h1>

		<div class="row-fluid text-center">

			<div class="disclaimer"></div>				

		</div>	

		<h1 class="title-main-debug">Dropdown</h1>

		<div class="row-fluid">

			<div class="dropdown">
			  <div id="other-website" class="dropdown-title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			    NOS AUTRES SITES
			  </div>
			  <ul class="dropdown-menu" aria-labelledby="other-website">
			    <li class="dropdown-item"><a href="#">WEBSITE 1</a></li>
			    <li class="dropdown-item"><a href="#">WEBSITE 2</a></li>
			    <li class="dropdown-item"><a href="#">WEBSITE 3</a></li>
			  </ul>
			</div>

			<div class="dropdown">
			  <div id="other-languages" class="dropdown-title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			    FR
			  </div>
			  <ul class="dropdown-menu" aria-labelledby="other-languages">
			    <li class="dropdown-item"><a href="#">EN</a></li>
			    <li class="dropdown-item"><a href="#">IT</a></li>
			    <li class="dropdown-item"><a href="#">PL</a></li>
			  </ul>
			</div>			

		</div>

		<h1 class="title-main-debug">Header Menu Icon</h1>

		<div class="row-fluid">
			<a href="#" class="nav-item"><span class="user-icon"></span> ESPACE PERSO</a>
		<div>				

		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

	<?php include( 'inc/debug.inc.php' ); ?>


<!-- SCRIPTS -->
<?php include 'inc/scripts.php'; ?>
</body>
</html>
