templates/contact/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Contact - DimaWork{% endblock %}
  5. {% block body %}
  6. <link rel="icon" href="image_figma/Logo_Dima_transparent.png">
  7. <style>
  8.     body {
  9.         background-image: url('{{ asset('image_figma/bleu5.png') }}');
  10.         background-size: cover;
  11.         background-position: center;
  12.         min-height: 100vh;
  13.         padding-top: 125px; /* Pour éviter que l'image touche la navbar */
  14.         padding-bottom: 0; /* Ne pas affecter le footer */
  15.     }
  17.     /* Assurez-vous que le footer reste blanc et est plus long */
  18.     footer {
  19.         background-color: white;
  20.         padding: 30px 0; /* Augmente le padding pour allonger le footer */
  21.         height: 150px; /* Optionnel: Fixe la hauteur du footer */
  22.         border-top: 2px solid #ddd; /* Ajoute une bordure en haut pour délimiter */
  23.     }
  25.     .btn {
  26.         background-color: rgb(96, 215, 228);
  27.         font-size: 1.2rem;
  28.         width: 125px;
  29.         padding: 10px 15px;
  30.         border-radius: 7px;
  31.         color: rgb(255, 255, 255);
  32.     }
  34.     .card {
  35.         width: 475px; /* Augmente la largeur de la carte */
  36.         margin: 20px;
  37.         padding: 20px;
  38.         border: 2.5px solid #ddd;
  39.         border-radius: 15px;
  40.         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  41.         background-color: white; /* Pour s'assurer que la carte reste bien visible */
  42.         margin-bottom: 50px; /* Augmente l'espace entre la carte et le footer */
  43.     }
  45.     .form-group {
  46.         margin-bottom: 15px;
  47.     }
  49.     .g-recaptcha {
  50.         margin: 20px 0;
  51.         display: inline-block;
  52.     }
  54.     .btn:hover {
  55.         background-color: rgb(84, 194, 221);
  56.     }
  58.     .container {
  59.         display: flex;
  60.         justify-content: space-between;
  61.         align-items: flex-start;
  62.         width: 100%;
  63.     }
  65.     .left-section {
  66.         flex: 2;  /* Augmente la taille de cette section par rapport à l'autre */
  67.         text-align: left;
  68.         padding-left: 40px; /* Augmente l'espacement à gauche pour agrandir la section */
  69.         margin-top: 100px; /* Déplace encore plus le titre vers le bas */
  70.     }
  72.     .right-section {
  73.         flex: 1;
  74.         display: flex;
  75.         justify-content: flex-end;
  76.         padding-right: 20px;
  77.     }
  79.     h1 {
  80.         margin-bottom: 0;
  81.         font-size: 3rem; /* Agrandit la taille du titre */
  82.         margin-top: 100px; /* Abaisse le titre */
  83.     }
  85.     p.contact-description {
  86.         font-size: 1.5rem;
  87.         color: #555;
  88.         margin-top: 35px;
  89.         font-weight: 400;
  90.     }
  92.     .alert {
  93.         margin-bottom: 5px;
  94.     }
  96.     .alert-danger {
  97.         color: #721c24;
  98.         background-color: #f8d7da;
  99.         border-color: #f5c6cb;
  100.     }
  101. </style>
  103. <div class="container">
  104.     <div class="left-section">
  105.         <h1>Contactez-nous !</h1>
  106.         <p class="contact-description">Nous sommes à votre écoute. N'hésitez pas à nous contacter pour toute question ou demande d'information !</p>
  107.     </div>
  108.     <div class="right-section">
  109.         <div class="card">
  110.             <form method="POST" action="#">
  111.                 <div class="form-group row">
  112.                     <div class="col-md-6">
  113.                         <label for="nom">Nom <span style="color: red;">*</span></label>
  114.                         <input type="text" class="form-control" id="nom" name="nom" placeholder="Votre nom" required>
  115.                     </div>
  116.                     <div class="col-md-6">
  117.                         <label for="tel">Portable</label>
  118.                         <input type="tel" class="form-control" id="tel" name="tel" placeholder="Téléphone" required>
  119.                     </div>
  120.                 </div>
  121.                 <div class="form-group">
  122.                     <label for="email">Adresse e-mail <span style="color: red;">*</span></label>
  123.                     <input type="email" class="form-control" id="email" name="email" placeholder="Votre e-mail" required>
  124.                 </div>
  125.                 <div class="form-group">
  126.                     <label for="message">Message <span style="color: red;">*</span></label>
  127.                     <textarea class="form-control" id="message" name="message" rows="4" placeholder="Votre message" required></textarea>
  128.                 </div>
  129.                 <!-- Messages d'erreur à l'intérieur de la carte -->
  130.                 {% for label, messages in app.flashes %}
  131.                     {% for message in messages %}
  132.                         <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
  133.                             {{ message }}
  134.                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  135.                         </div>
  136.                     {% endfor %}
  137.                 {% endfor %}
  138.                 <div class="form-group mb-3">
  139.                     <div class="g-recaptcha" data-sitekey="6LdsZb4qAAAAAKzWURbc-3MZY-DjEXRcm81pFAjs"></div>
  140.                 </div>
  141.                 <button type="submit" class="btn w-100">Envoyer</button>
  142.             </form>
  143.         </div>
  144.     </div>
  145. </div>
  147. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  149. {% endblock %}