{% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}

{% block stylesheets %}
{{ parent() }}


 <style>


    h4,h5{
        color: black !important;
    }

a.btn.btn-payer {
    background: #E2B653;
    border-radius: 0px;
    width: 200px;
    color: white;
}

.success-paiement {
    position: relative;
    top: -300px;
}

.container.success-container {
    background: #ffffffd9;
    padding: 25px;
    box-shadow: 0px 10px 10px 10px #0000001A;
    position: relative;
}
img.checkmark {
    position: absolute;
    left: 27%;
    width: 80px;
}

@media only screen and (max-width: 600px){
    img.checkmark {
        position: absolute;
        left: 7%;
        width: 62px;
    }   
}


</style>

  
{% endblock  %}
{% block body %}
 

  <img src="{{asset('themes/coworking/front/images/freewor.jpg')}}" style="width: 100%;height: 520px;" class="img-fluid" />
 
    <div class="success-paiement">
    <div class="container success-container">
        <div class="row pt-5 pb-5">
            <div class="col-sm-2"></div>
            <div class="col-sm-8 text-center">
                <img src="{{asset('themes/coworking/front/images/success.png')}}" class="checkmark">
                <small class="text-muted">Confirmation #DQFDHG5E0</small></br>
                
                <h4>Merci Soufiane!</h4>

                <h5 class="mt-5">Votre réservation n’est pas encore confirmée</h5>    
                <small class="text-muted mt-5">Veuillez vérifier que vous avez bien reçu l’e-mail de confirmation.</br>  Votre réservation est bloquée pour une durée de 24h, passé ce délai celle-ci sera annulée.</br> Merci de télécharger sur votre compte la preuve de versement  pour valider votre réservation. 
                </small>
                <br> <br> <br>

               
            <div class="col-sm-12 text-center"><a href="{{path("front_home")}}" class="btn btn-payer">RETOUR AU SITE</a></div>
             
             

            </div>
            <div class="col-sm-2">

                
            </div>
            
        </div>
        
    </div>
    
</div>
         

    
          
   
  
  
{% endblock %}






{% block javascripts %}
  <!-- MAIN CONTENT -->
 
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
 


 
 
{% endblock %}