{% extends "base.html.twig" %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="css/fogot_pass.css">
{% endblock %}
{% block body %}

<section class="wrapper">
	<div class="container-fluid">
		<div class="col-lg-6 col-md-6 col-sm-6">
			<div class="fond_gauche"></div>
		</div>
		<div class="col-lg-6 col-md-6 col-sm-6">
			<div class="row">
				<div class="grand_titre_si">
					<div class="bg_titre">
						<span>SOUND'S</span>
					</div>
					<div class="sm_titre">
						<span>HOTELS GROUP</span>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="div_parag">
					<p>Entrez votre email et nous vous envoyons une réinitialisation de mot de passe.</p>
				</div>
			</div>
			<div class="row">
				<div class="form">
					<form>
						<div class="form-group">
							<span class="span__label"></span><input type="text" data-placeholder="Adresse mail" name="" class="form-control" id="mail" placeholder="Adresse mail">
						</div>
						<div class="form-group last_iput">
							<input type="submit" value="Send request" id="btn_sr" class="btn btn-md" name="">
						</div>
					</form>
				</div>
			</div>
			<div class="footer">
				<p>Conditions d'utilisation. Politique de confidentialité</p>
			</div>
		</div>
	</div>
</section>

{% endblock %}
{% block javascripts %}
<script>

	/*animation des input  */

    $(document).ready(function () {
        $("input[placeholder]").on({
            focus: function () {
                $(this).parent().children(".span__label").text($(this).attr('placeholder'));
                $(this).attr('placeholder', ' ');
                $(this).css("border-color", "#d29e00");
            },
            blur: function () {
                var t = $(this).attr('data-placeholder');
                $(this).attr('placeholder', t);
                $(this).parent().children(".span__label").text("");
                $(this).css("border-color", "#e2e3e6");
            }
        })
    })

/* / animation des input  */

</script>

{% endblock %}