<commit_before><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Alicht CSS style">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link rel="stylesheet" href="css/alicht.css">
    <title>Alicht CSS</title>
</head>
<body>

<div id="topbar">
	<div>
		<div id="head">
			Alicht
			<!--<img src="img/archost_logo_20150419_dark_flat_full_text.png">-->
		</div>
		<nav id="nav" class="righted">
			<div class="mobileoff">
					<a href="#">Qui sommes-nous ?</a>
					<a href="#">Log In</a>
			</div>

			<select class="mobileon" name="Menu" onchange="location = this.options[this.selectedIndex].value;">
				<option value="#" selected="selected">Menu</option>
					<option value="#">Qui sommes-nous ?</option>
					<option value="#">Log In</option>
			</select>
		</nav>
	</div>
</div>

<header class="medium cover" style="background-image:url(img/nonamericanhands.jpg)">
    <div>
        <h1 class="home-head">
        	<!--<img class="logo" src="" alt="logo">-->
        	Alicht
        </h1>
        <div>Pour un enseignement public, gratuit, critique et populaire.</div>
    </div>
</header>

<div class="wrapper">
	<nav class="side-nav">
		<span class="small-title">Navigation Title</span>
		<ul>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li class="active"><a href="#">Nam tincidunt congue enim</a>
				<ul>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
				</ul>
			</li>
			<li><a href="#">Ut turpis felis</a>
				<ul>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
				</ul>
			</li>
			<li><a href="#">Lorem ipsum</a></li>
			<li><a href="#">Nam tincidunt congue enim</a></li>
			<li><a href="#">Ut turpis felis</a></li>
		</ul>
	</nav>
	<section>
		<h1>Mauris vitae</h1>
		<div class="tile-wrapper alternate">
			<div class="tile">
				<h4><NAME></h4>
				<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies.</p>
			</div>
			<div class="tile shadow">
				<h4><NAME></h4>
				<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies.</p>
			</div>
		</div>
	</section>
	<nav class="inline-nav">
		<ul>
			<span class="small-title">Nav Title</span>
			<li><a href="#">Lorem ipsum</a></li>
			<li class="active"><a href="#">Nam</a>
				<ul>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
				</ul>
			</li>
			<li><a href="#">Ut turpis</a>
				<ul>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
				</ul>
			</li>
			<li><a href="#">Lorem ipsum</a></li>
		</ul>
	</nav>
	<section>
		<h1>H1 Heading</h1>
		<h2>H2 Heading</h2>
		<h3>H3 Heading</h3>
		<h4>H4 Heading</h4>

		<p>We want to write some text <em>in italic</em>, but also sometimes <strong>in bold</strong> variants.</p>

		<ul>
			<li>First item</li>
			<li>Second, quite longer, item in this list</li>
			<li>OMGCSS</li>
		</ul>

		<ol>
			<li>Ordinal lists, shall we too?</li>
			<li>Sure, why not ?</li>
			<li>Shake my booty, pls.</li>
		</ol>

		<blockquote>
		<p>"What do you meaaan?"<br>
		— <NAME>.</p>
		</blockquote>
	</section>
</div>

<header class="small cover dim righted" style="background-image:url(img/hammer.jpg)">
    <div>
        <h1 class="home-head">
        	<!--<img class="logo" src="" alt="logo">-->
        	Alicht
        </h1>
        <div class="meta">
            <span class="small">Pour un enseignement public, gratuit, critique et populaire.</span>
        </div>
    </div>
</header>

<div class="wrapper">

<section>
    <h1 id="forms">Forms</h1>

    <p>Forms also use Flexboxes, just like the tile layout.<br>
    It makes responsive designed forms easy to create and to set up.</p>

	<h3>Form with placeholders</h3>
	<form method="post">
		<input type="text" name="username" placeholder="Username" required>
		<input type="email" name="email" placeholder="Email" required>
		<textarea name="comment" placeholder="Type in your comment"></textarea>
		<button type="submit">Send comment</button>
	</form>

	<h3>Form with labels</h3>
	<form method="post">
		<div>
			<span class="input-label">Username</span><commit_msg>Just fooling around<commit_after><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Alicht CSS style">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link rel="stylesheet" href="css/alicht.css">
    <title>Alicht CSS</title>
</head>
<body>

<div id="topbar">
	<div>
		<div id="head">
			Alicht
			<!--<img src="img/archost_logo_20150419_dark_flat_full_text.png">-->
		</div>
		<nav id="nav" class="righted">
			<div class="mobileoff">
					<a href="#">Qui sommes-nous ?</a>
					<a href="#">Log In</a>
			</div>

			<select class="mobileon" name="Menu" onchange="location = this.options[this.selectedIndex].value;">
				<option value="#" selected="selected">Menu</option>
					<option value="#">Qui sommes-nous ?</option>
					<option value="#">Log In</option>
			</select>
		</nav>
	</div>
</div>

<header class="medium cover" style="background-image:url(img/nonamericanhands.jpg)">
    <div>
        <h1 class="home-head">
        	<!--<img class="logo" src="" alt="logo">-->
        	Alicht
        </h1>
        <div>Pour un enseignement public, gratuit, critique et populaire.</div>
    </div>
</header>

<div class="wrapper">
	<nav class="side-nav">
		<span class="small-title">Navigation Title</span>
		<ul>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li class="active"><a href="#">Nam tincidunt congue enim</a>
				<ul>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
				</ul>
			</li>
			<li><a href="#">Ut turpis felis</a>
				<ul>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
				</ul>
			</li>
			<li><a href="#">Lorem ipsum</a></li>
			<li><a href="#">Nam tincidunt congue enim</a></li>
			<li><a href="#">Ut turpis felis</a></li>
		</ul>
	</nav>
	<section>
		<h1>Mauris vitae</h1>
		<div class="tile-wrapper alternate">
			<div class="tile">
				<h4>Septimo Chimaera</h4>
				<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies.</p>
			</div>
			<div class="tile shadow">
				<h4><NAME></h4>
				<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies.</p>
			</div>
		</div>
	</section>
	<nav class="inline-nav">
		<ul>
			<span class="small-title">Nav Title</span>
			<li><a href="#">Lorem ipsum</a></li>
			<li class="active"><a href="#">Nam</a>
				<ul>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
				</ul>
			</li>
			<li><a href="#">Ut turpis</a>
				<ul>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
				</ul>
			</li>
			<li><a href="#">Lorem ipsum</a></li>
		</ul>
	</nav>
	<section>
		<h1>H1 Heading</h1>
		<h2>H2 Heading</h2>
		<h3>H3 Heading</h3>
		<h4>H4 Heading</h4>

		<p>We want to write some text <em>in italic</em>, but also sometimes <strong>in bold</strong> variants.</p>

		<ul>
			<li>First item</li>
			<li>Second, quite longer, item in this list</li>
			<li>OMGCSS</li>
		</ul>

		<ol>
			<li>Ordinal lists, shall we too?</li>
			<li>Sure, why not ?</li>
			<li>Shake my booty, pls.</li>
		</ol>

		<blockquote>
		<p>"What do you meaaan?"<br>
		— <NAME>.</p>
		</blockquote>
	</section>
</div>

<header class="small cover dim righted" style="background-image:url(img/hammer.jpg)">
    <div>
        <h1 class="home-head">
        	<!--<img class="logo" src="" alt="logo">-->
        	Alicht
        </h1>
        <div class="meta">
            <span class="small">Pour un enseignement public, gratuit, critique et populaire.</span>
        </div>
    </div>
</header>

<div class="wrapper">
<nav class="side-nav right">
		<span class="small-title">Navigation Title</span>
		<ul>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li class="active"><a href="#">Nam tincidunt congue enim</a>
				<ul>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
				</ul>
			</li>
			<li><a href="#">Ut turpis felis</a>
				<ul>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
					<li><a href="#">Vivamus fermentum</a></li>
				</ul>
			</li>
			<li><a href="#">Lorem ipsum</a></li>
			<li><a href="#">Nam tincidunt congue enim</a></li>
			<li><a href="#">Ut turpis felis</a></li>
		</ul>
	</nav>
<section>
    <h1 id="forms">Forms</h1>

    <p>Forms also use Flexboxes, just like the tile layout.<br>
    It makes responsive designed forms easy to create and to set up.</p>

	<h3>Form with placeholders</h3>
	<form method="post">
		<input type="text" name="username" placeholder="Username" required>
		<input type="email" name="email" placeholder="Email" required>
		<textarea name="comment" placeholder="Type in your comment"></textarea>
		<button type="submit">Send comment</button>
	</form>

	<h3>Form with labels</h3>
	<form method="post">
		<div>
			<span class="input-label">Username</span>
{'fraction_non_alphanumeric': 0.22317346045335149, 'fraction_numerical': 0.007588286798326686, 'mean_word_length': 3.423407917383821, 'pattern_counts': {'":': 0, '<': 596, '<?xml version=': 0, '>': 596, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7163693', 'n_tokens_mistral': 4596, 'n_tokens_neox': 3947, 'n_words': 879}