funky-framadate-front/src/app/features/old-stuff/pages/example/kind/kind.component.html

<h1>page de démo</h1>
<p>
	cette étape est en cours de développement. <br />
	S'inspirer de la page de Home pour réaliser d'autres pages
</p>
<a routerLink="../end" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
<h1>Atoms</h1>
<section>
	<article>
		<h2>Headings</h2>

		<h1>Ceci est un h1</h1>
		<h2>Ceci est un h2</h2>
		<h3>Ceci est un h3</h3>
	</article>

	<article>
		<h2>Links</h2>
		<div>
			<a routerLink="../../home" class="next">
				<span class="text" i18n>
					C'est parti !
				</span>
			</a>
		</div>
		<div>
			<a routerLink="../../home" class="prev">
				<span class="text" i18n>
					C'est parti !
				</span>
			</a>
		</div>
	</article>

	<article>
		<h2>Buttons</h2>

		<button type="submit" class="btn btn--primary">
			primary - default
		</button>

		<br />

		<button type="submit" class="btn btn--primary btn--small">
			primary - small
		</button>

		<br />

		<a href="/" class="btn btn--primary btn--outline">
			primary - outline - default
		</a>

		<br />

		<button type="submit" class="btn btn--primary btn--outline btn--small">
			primary - outline - small
		</button>

		<br />

		<input type="submit" class="btn btn--alert" value="alert - default" />

		<br />

		<button type="submit" class="btn btn--alert btn--small">
			alert - small
		</button>

		<br />

		<button type="submit" class="btn btn--alert btn--outline">
			alert - outline - default
		</button>

		<br />

		<button type="submit" class="btn btn--alert btn--outline btn--small">
			alert - outline - small
		</button>

		<br /><br />

		<button type="submit" class="btn btn--primary btn--full">
			primary - full
		</button>

		<button type="submit" class="btn btn--primary btn--outline btn--full">
			primary - outline - full
		</button>

		<button type="submit" class="btn btn--alert btn--full">
			alert - full
		</button>

		<button type="submit" class="btn btn--alert btn--outline btn--full">
			alert - outline - full
		</button>
	</article>

	<article>
		<h2>Forms element</h2>

		<h3>Labels</h3>

		<label for="">Un label pour les labelliser tous</label>

		<h3>Input name</h3>
		<input type="name" name="" id="" /><br />
		<input type="name" name="" id="" value="texte" />

		<h3>Input email</h3>
		<input type="email" name="" id="" /><br />
		<input type="email" name="" id="" value="adresse@email.com" />

		<h3>Input password</h3>
		<input type="password" name="" id="" /><br />
		<input type="password" name="" id="" value="password" />

		<h3>Input date</h3>
		<input type="date" name="" id="" /><br />
		<input type="date" name="" id="" value="1985-11-23" />

		<h3>Select</h3>
		<select name="" id="">
			<option value="">
				1
			</option>
			<option value="">
				2
			</option>
			<option value="">
				3
			</option>
		</select>

		<h3>Textarea</h3>
		<textarea name="" id="" cols="30" rows="10"></textarea>
	</article>

	<article>
		<h2>Paragraphs</h2>

		<p>
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
			Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
			delectus beatae!
		</p>
	</article>

	<article>
		<h2>Lists</h2>

		<h3>Unordered list</h3>
		<ul>
			<li>
				plop
			</li>
			<li>
				plop
			</li>
			<li>
				plop
			</li>
		</ul>

		<h3>Ordered list</h3>
		<ol>
			<li>
				plop
			</li>
			<li>
				plop
			</li>
			<li>
				plop
			</li>
		</ol>
	</article>

	<article>
		<h2>Images</h2>
		<img src="http://placekitten.com/200/300" alt="" />
	</article>
</section>

<section>
	<h1>Molecules</h1>
	<app-voting-choice></app-voting-choice>
	<article>
		<h2>Useful classes</h2>

		<h3>Align right</h3>
		<div class="align-right">
			<a routerLink="../../home" class="next">
				<span class="text" i18n>
					C'est parti !
				</span>
			</a>
		</div>
	</article>

	<article>
		<h2>Label + input name</h2>
		<label for="test-text">Ceci est un label un peu long mais pas trop</label>
		<input type="name" name="test-text" id="test-text" />
	</article>

	<article>
		<h2>Label + select</h2>
		<label for="test-select">Ceci est un label un peu long mais pas trop</label>
		<select name="test-select" id="test-select">
			<option value="">
				1
			</option>
			<option value="">
				2
			</option>
			<option value="">
				3
			</option>
		</select>
	</article>

	<article>
		<h2>Input name with info</h2>
		<a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
	</article>

	<article>
		<h2>Commentaries</h2>
	</article>
</section>

<section>
	<h1>Components</h1>

	<article>
		<h2>Images list</h2>
		<a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a>
	</article>

	<article>
		<h2>Calendar</h2>
	</article>

	<article>
		<h2>Modale</h2>
	</article>

	<article>
		<h2>Way to vote</h2>
		<a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a>
	</article>

	<article>
		<h2>Voted</h2>
		<a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a>
	</article>

	<article>
		<h2>Graphics</h2>
		<a href="https://sketch.cloud/s/00A80/a/megprw">that</a>
	</article>
</section>