templates/website/inscription.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block meta %}
  4. <meta name="description"
  5. content=""/>
  6. {% endblock %}
  7. {% block title %}Inscription | Nibuco{% endblock %}
  8. {% block canonical %}<link rel="canonical" href="https://www.livraison.nibuco.fr/inscription"/>{% endblock %}
  9. {% block body %}
  10. <style>
  11. .width-50
  12. {
  13. width: 50%;
  14. }
  15. .signin-wrapper
  16. {
  17. display: flex;
  18. justify-content: center;
  19. margin: 0 auto;
  20. width: 100%;
  21. margin-bottom: 3rem;
  23. }
  24. .quick-access
  25. {
  26. --columns: 1;
  27. --gap: 3rem;
  28. align-items: flex-start;
  29. display: flex;
  30. flex-flow: row wrap;
  31. gap: var(--gap);
  32. justify-content: flex-start;
  33. }
  34. .quick-access .column
  35. {
  36. display: flex;
  37. justify-content: center;
  38. margin: 0 auto;
  39. width: 100%;
  40. }
  41. .functionality .card:hover
  42. {
  43. background-color: #FFF9E6 !important;
  44. transition: all 0.2s ease-out;
  45. text-decoration: none;
  46. }
  47. @media (min-width: 576px) {
  48. .card-columns
  49. {
  50. -webkit-column-count: 1;
  51. -moz-column-count: 1;
  52. -webkit-column-gap: 1.25rem;
  53. -moz-column-gap: 1.25rem;
  54. column-gap: 1.25rem;
  55. }
  56. .card-columns .card
  57. {
  58. display: inline-block;
  59. width: 100%;
  60. }
  61. }
  62. .bg-light
  63. {
  64. background-color: #f8f9fa !important;
  65. }
  67. </style>
  68. <div id="main-content" class="main-content signin">
  69. <div class="shell">
  70. <div class="signin-wrapper">
  71. <figure>
  72. <img src="{{ asset('assets/imgs/delivery2.png') }}" alt="Image livreur Nibuco">
  73. </figure>
  74. </div>
  75. <div class="choice-wrapper">
  76. <section class="quick-access" style="--column: 1 !important;">
  77. <div class="column">
  78. <a class="btn btn-outline width-50" href="{{path('customer_register') }}">Créer un compte client</a>
  79. </div>
  80. <div class="column">
  81. <a class="btn width-50" href="{{ path('delivery_man_register') }}">Devenir livreur</a>
  82. </div>
  83. <div class="column width-50">
  84. <p class="" style="display: flex;">Déjà un compte ?&nbsp;<a href="{{ path('app_login') }}" class="link">Connexion</a></p>
  85. </div>
  86. </section>
  87. </div>
  88. <div class="functionality">
  89. <div class="container">
  90. <div class="row">
  91. <div class="card-columns" style="display: flex;flex-direction: column;align-items: center;">
  92. <!-- 1 -->
  93. <div class="mt-lg-5 width-50" style="margin-top: 3rem;">
  94. <div class="card bg-light border border-white mb-3 p-4 col-xs-12">
  95. <div class="card-body">
  96. <img src="{{ asset('/assets/imgs/nibuco/icon-simple.svg') }}" class="mb-3" alt="icône graphique coursier rapide à vélo ">
  97. <h3 class="card-title">Simple et rapide</h3>
  98. <p class="card-text">Inscrivez-vous en quelques minutes en remplissant un formulaire et vous aurez la possibilité de commencer immédiatement.</p>
  99. </div>
  100. </div>
  101. </div>
  102. <!-- 2 -->
  103. <div class="width-50" style="margin-top: 3rem;">
  104. <div class="card bg-light border border-white mb-3 p-4 col-xs-12">
  105. <div class="card-body">
  106. <img src="{{ asset('/assets/imgs/nibuco/icon-ecology.svg') }}" class="mb-3" alt="icône graphique livraison écologique">
  107. <h3 class="card-title">Œuvrez pour l’écologie</h3>
  108. <p class="card-text">Effectuez des livraisons sans intermédiaire et dans la mesure du possible, avec des moyens de transport sans émission de CO2.</p>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. {% endblock %}