templates/front-office/registration/step1.html.twig line 1

{% extends "front-office/_base.html.twig" %}

{% block script %}

    <script defer src="{{ asset('assets/js/security/login.js') }}"></script>
    <script defer src="{{ asset('assets/js/registration.js') }}"></script>
{% endblock %}

{% block content %}

    <section class="registration meli-center-center">
        <div class="content meli-section-45 bgc-white">
            <div class="border">
                <form action="#" method="POST" id="js-registration-form">
                    <h1 class="txt-century txt-bold txt-size25 txt-green txt-center">S'inscrire 1/2</h1>

                    <div class="field-group">
                        <div class="field meli-flex-col meli-between-start">
                            <label class="txt-century txt-bold txt-green txt-size15" for="email">Adresse email <span class="txt-red">*</span></label>
                            <input type="email" name="email" id="email" class="bgc-lightGreen" required>
                        </div>
                        <div class="field meli-flex-col meli-between-start">
                            <label class="txt-century txt-bold txt-green txt-size15" for="email2">Confirmation de votre adresse emai <span class="txt-red">*</span></label>
                            <input type="email" name="email2" id="email2" class="bgc-lightGreen" required>
                        </div>
                    </div>

                    <div class="field-group">
                        <div class="field meli-flex-col meli-between-start">
                            <label class="txt-century txt-bold txt-green txt-size15" for="password">Mot de passe <span class="txt-red">*</span></label>
                            <div class="password-box meli-between-center">
                                <input type="password" name="password" id="password"
                                       class=" bgc-white txt-lightGreen" placeholder="Mot de passe" required>
                                <div class="password-icon-box bgc-lightGreen meli-width-15 meli-center-center">
                                    <div class="password-icon js-login-password-btn"
                                         data-target="password"
                                    ></div>
                                </div>
                            </div>
                        </div>
                        <div class="field meli-flex-col meli-between-start">
                            <label class="txt-century txt-bold txt-green txt-size15" for="password2">Confirmation du mot de passe <span class="txt-red">*</span></label>
                            <div class="password-box meli-between-center">
                                <input type="password" name="password2" id="password2"
                                       class=" bgc-white txt-lightGreen" placeholder="Mot de passe" required>
                                <div class="password-icon-box bgc-lightGreen meli-width-15 meli-center-center">
                                    <div class="password-icon js-login-password-btn"
                                         data-target="password2"
                                    ></div>
                                </div>
                            </div>
                        </div>
                        <p class="advice txt-red txt-century txt-regular txt-size12">
                            Conseil : le mot de passe doit contenir une lettre majuscule, minuscule et un symbole (ex : -_!*.)
                        </p>
                        <p class="advice txt-green txt-century txt-regular txt-size12">
                            Les champs avec la mention <span class="txt-red">(*)</span> sont obligatoires                        </p>
                    </div>

                    <div class="button-box meli-center-center">
                        <button class="btn-base bgc-orange">
                            <span>Continuer</span>
                        </button>
                    </div>


                </form>
            </div>
        </div>
    </section>

{% endblock %}