templates/default/content/so_geht_es.html.twig line 1

Open in your IDE?
  1. {% extends '/default/content/base.html.twig' %}
  3. {% block stylesheets %}
  4. <style>
  5. .card.little-card {
  6. box-shadow: none;
  7. }
  9. .custom-margins {
  10. padding-top: 0;
  11. padding-left: 5px;
  12. }
  14. .card .card-body .card-text {
  15. font-size: 1.1rem;
  16. line-height: 1.2;
  17. color: black;
  18. padding-left: 0;
  19. margin-bottom: 30px;
  20. }
  22. .card .card-body .card-title {
  23. padding-left: 0;
  24. }
  26. .card > hr {
  27. padding: 1px;
  28. margin-top: 2px;
  29. margin-bottom: 0;
  30. }
  32. .go-rounded {
  33. border-radius: 20px;
  34. }
  36. .go-color {
  37. vertical-align: top;
  38. font-size: 120px;
  39. font-weight: lighter;
  40. line-height: 0.5;
  41. padding-top: 0;
  42. margin-top: 0;
  43. }
  45. @media screen and (max-width: 370px) {
  46. .card > hr {
  47. padding: 1px;
  48. margin-top: 2px;
  49. margin-bottom: 0;
  50. }
  52. .card-img {
  53. height: 75px;
  54. width: 70px;
  55. margin-left: 0;
  56. padding-left: 0;
  57. }
  58. }
  60. @media screen and (max-width: 330px) {
  61. .card .card-body .card-title {
  62. font-size: 1.1rem;
  63. padding-left: 0;
  64. }
  66. .card .card-body .card-text {
  67. font-size: 1rem;
  68. line-height: 1.2;
  69. color: black;
  70. padding-left: 0;
  71. margin-bottom: 30px;
  72. }
  74. .card-img {
  75. height: 65px;
  76. width: 60px;
  77. margin-left: 0;
  78. padding-left: 0;
  79. }
  80. }
  81. </style>
  82. {% endblock %}
  84. {% block content_headline %}
  85. {{ 'frequently_asked_questions.title'|trans }}
  86. {% endblock %}
  88. {% block content_body %}
  89. <div class="row">
  90. <div class="col">
  91. <div class="card little-card" data-testclass="faq-title-cta">
  92. <hr class="bg-primary">
  93. </div>
  95. <div class="card little-card">
  96. <a class="d-none d-sm-flex flex-row justify-content-start align-items-center py-1"
  97. href="{{ path('content', {'content': 'so-gehts-anleitung'}) }}"
  98. data-testclass="faq-title-cta"
  99. style="overflow: hidden;">
  100. <div data-testid="box-jobs" class="p-2">
  101. <img data-testclass="faq-icon-cta"
  102. src="{{ asset('assets/images/faq_noun_tutorial_blue.png')|cdnifyUri }}"
  103. style="width: auto; height: auto; max-height: 130px; max-width: 130px;"
  104. alt="{{ 'frequently_asked_questions.questions.how_it_works'|trans }}">
  105. </div>
  106. <div class="p-2">
  107. <div class="custom-margins">
  108. <h5 class="card-title">{{ 'frequently_asked_questions.questions.how_it_works'|trans }}</h5>
  109. <p class="card-text pb-0 mb-0">{{ 'frequently_asked_questions.explanations.how_it_works'|trans }}</p>
  110. </div>
  111. </div>
  112. <div class="p-2 d-none d-lg-block ml-auto">
  113. <span data-testclass="faq-arrow-cta" class="go-color text-primary">&gt;</span>
  114. </div>
  115. </a>
  116. <a class="d-flex d-sm-none flex-row justify-content-start align-items-center py-1"
  117. href="{{ path('content', {'content': 'so-gehts-anleitung'}) }}"
  118. style="overflow: hidden">
  119. <div data-testid="box-jobs" class="p-2">
  120. <img src="{{ asset('assets/images/faq_noun_tutorial_blue.png')|cdnifyUri }}"
  121. style="width: auto; height: auto; max-height: 40px; max-width: 40px;"
  122. alt="{{ 'frequently_asked_questions.questions.how_it_works'|trans }}">
  123. </div>
  124. <div class="m-0">
  125. <div class="py-0 my-0">
  126. <div>
  127. <h6 class="overflow-hidden mb-0 pb-0">
  128. {{ 'frequently_asked_questions.questions.how_it_works'|trans }}
  129. </h6>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="ml-auto">
  134. <span class="px-1">&gt;</span>
  135. </div>
  136. </a>
  137. <hr class="bg-primary">
  138. {% if app.user is defined and app.user is not null and app.user.isJobseeker %}
  139. <a class="d-none d-sm-flex flex-row justify-content-start align-items-center py-1"
  140. href="{{ path('contact') }}"
  141. data-testclass="faq-title-cta"
  142. style="overflow: hidden;">
  143. <div data-testid="box-jobs" class="p-2">
  144. <img data-testclass="faq-icon-cta"
  145. src="{{ asset('assets/images/dashboard-help.png')|cdnifyUri }}"
  146. style="width: auto; height: auto; max-height: 130px; width: 130px;"
  147. alt="{{ 'frequently_asked_questions.questions.how_it_works'|trans }}">
  148. </div>
  149. <div class="p-2">
  150. <div class="custom-margins">
  151. <h5 class="card-title">{{ 'frequently_asked_questions.questions.help_and_contact'|trans }}</h5>
  152. <p class="card-text pb-0 mb-0">{{ 'frequently_asked_questions.explanations.help_and_contact'|trans }}</p>
  153. </div>
  154. </div>
  155. <div class="p-2 d-none d-lg-block ml-auto">
  156. <span data-testclass="faq-arrow-cta" class="go-color text-primary">&gt;</span>
  157. </div>
  158. </a>
  159. <a class="d-flex d-sm-none flex-row justify-content-start align-items-center py-1"
  160. href="{{ path('contact') }}"
  161. style="overflow: hidden">
  162. <div data-testid="box-jobs" class="p-2">
  163. <img src="{{ asset('assets/images/dashboard-help.png')|cdnifyUri }}"
  164. style="width: auto; height: auto; max-height: 40px; max-width: 40px;"
  165. alt="{{ 'frequently_asked_questions.questions.help_and_contact'|trans }}">
  166. </div>
  167. <div class="m-0">
  168. <div class="py-0 my-0">
  169. <div>
  170. <h6 class="overflow-hidden mb-0 pb-0">
  171. {{ 'frequently_asked_questions.questions.help_and_contact'|trans }}
  172. </h6>
  173. </div>
  174. </div>
  175. </div>
  176. <div class="ml-auto">
  177. <span class="px-1">&gt;</span>
  178. </div>
  179. </a>
  180. <hr class="bg-primary">
  181. {% endif %}
  184. {% if app.user is defined and app.user is not null and app.user.isJobseeker %}
  185. <a class="d-none d-sm-flex flex-row justify-content-start align-items-center py-1"
  186. href="{{ path('recurrent_jobs.show_recurrent_jobs_belonging_to_joboo_gmbh') }}"
  187. data-testclass="faq-title-cta"
  188. style="overflow: hidden;">
  189. <div data-testid="box-jobs" class="p-2">
  190. <img data-testclass="faq-icon-cta"
  191. src="{{ asset('assets/images/default/joboo-logo-square-full.png')|cdnifyUri }}"
  192. style="width: auto; height: auto; max-height: 130px; max-width: 130px;"
  193. alt="{{ 'frequently_asked_questions.questions.how_to_career_at_joboo'|trans }}">
  194. </div>
  195. <div class="p-2">
  196. <div class="custom-margins">
  197. <h5 class="card-title">{{ 'frequently_asked_questions.questions.how_to_career_at_joboo'|trans }}</h5>
  198. <p class="card-text pb-0 mb-0">{{ 'frequently_asked_questions.explanations.how_to_career_at_joboo'|trans }}</p>
  199. </div>
  200. </div>
  201. <div class="p-2 d-none d-lg-block ml-auto">
  202. <span data-testclass="faq-arrow-cta" class="go-color text-primary">&gt;</span>
  203. </div>
  204. </a>
  205. <a class="d-flex d-sm-none flex-row justify-content-start align-items-center py-1"
  206. href="{{ path('recurrent_jobs.show_recurrent_jobs_belonging_to_joboo_gmbh') }}"
  207. style="overflow: hidden">
  208. <div data-testid="box-jobs" class="p-2">
  209. <img src="{{ asset('assets/images/default/joboo-logo-square-full.png')|cdnifyUri }}"
  210. style="width: auto; height: auto; max-height: 40px; max-width: 40px;"
  211. alt="{{ 'frequently_asked_questions.questions.how_to_career_at_joboo'|trans }}">
  212. </div>
  213. <div class="m-0">
  214. <div class="py-0 my-0">
  215. <div>
  216. <h6 class="overflow-hidden mb-0 pb-0">
  217. {{ 'frequently_asked_questions.questions.how_to_career_at_joboo'|trans }}
  218. </h6>
  219. </div>
  220. </div>
  221. </div>
  222. <div class="ml-auto">
  223. <span class="px-1">&gt;</span>
  224. </div>
  225. </a>
  226. <hr class="bg-primary">
  227. {% else %}
  228. <a class="d-none d-sm-flex flex-row justify-content-start align-items-center py-1"
  229. href="{{ path('contactForCorporateClients') }}"
  230. data-testclass="faq-title-cta"
  231. style="overflow: hidden;">
  232. <div data-testid="box-jobs" class="p-2">
  233. <img data-testclass="faq-icon-cta"
  234. src="{{ asset('assets/images/faq_noun_store_blue.png')|cdnifyUri }}"
  235. style="width: auto; height: auto; max-height: 130px; max-width: 130px;"
  236. alt="{{ 'frequently_asked_questions.questions.how_to_jobofferer_multiple_locations'|trans }}">
  237. </div>
  238. <div class="p-2">
  239. <div class="custom-margins">
  240. <h5 class="card-title">{{ 'frequently_asked_questions.questions.how_to_jobofferer_multiple_locations'|trans }}</h5>
  241. <p class="card-text pb-0 mb-0">{{ 'frequently_asked_questions.explanations.how_to_jobofferer_multiple_locations'|trans }}</p>
  242. </div>
  243. </div>
  244. <div class="p-2 d-none d-lg-block ml-auto">
  245. <span data-testclass="faq-arrow-cta" class="go-color text-primary">&gt;</span>
  246. </div>
  247. </a>
  248. <a class="d-flex d-sm-none flex-row justify-content-start align-items-center py-1"
  249. href="{{ path('contactForCorporateClients') }}"
  250. style="overflow: hidden">
  251. <div data-testid="box-jobs" class="p-2">
  252. <img src="{{ asset('assets/images/faq_noun_store_blue.png')|cdnifyUri }}"
  253. style="width: auto; height: auto; max-height: 40px; max-width: 40px;"
  254. alt="{{ 'frequently_asked_questions.questions.how_to_jobofferer_multiple_locations'|trans }}">
  255. </div>
  256. <div class="m-0">
  257. <div class="py-0 my-0">
  258. <div>
  259. <h6 class="overflow-hidden mb-0 pb-0">
  260. {{ 'frequently_asked_questions.questions.how_to_jobofferer_multiple_locations'|trans }}
  261. </h6>
  262. </div>
  263. </div>
  264. </div>
  265. <div class="ml-auto">
  266. <span class="px-1">&gt;</span>
  267. </div>
  268. </a>
  269. <hr class="bg-primary">
  270. {% endif %}
  271. {% if app.user is not defined or app.user is null or app.user.isJobofferer %}
  272. <a class="d-none d-sm-flex flex-row justify-content-start align-items-center py-1"
  273. href="{{ path('contact') }}"
  274. data-testclass="faq-title-cta"
  275. style="overflow: hidden;">
  276. <div data-testid="box-jobs" class="p-2">
  277. <img data-testclass="faq-icon-cta"
  278. src="{{ asset('assets/images/dashboard-help.png')|cdnifyUri }}"
  279. style="width: auto; height: auto; max-height: 130px; width: 130px;"
  280. alt="{{ 'frequently_asked_questions.questions.how_it_works'|trans }}">
  281. </div>
  282. <div class="p-2">
  283. <div class="custom-margins">
  284. <h5 class="card-title">{{ 'frequently_asked_questions.questions.help_and_contact'|trans }}</h5>
  285. <p class="card-text pb-0 mb-0">{{ 'frequently_asked_questions.explanations.help_and_contact'|trans }}</p>
  286. </div>
  287. </div>
  288. <div class="p-2 d-none d-lg-block ml-auto">
  289. <span data-testclass="faq-arrow-cta" class="go-color text-primary">&gt;</span>
  290. </div>
  291. </a>
  292. <a class="d-flex d-sm-none flex-row justify-content-start align-items-center py-1"
  293. href="{{ path('contact') }}"
  294. style="overflow: hidden">
  295. <div data-testid="box-jobs" class="p-2">
  296. <img src="{{ asset('assets/images/dashboard-help.png')|cdnifyUri }}"
  297. style="width: auto; height: auto; max-height: 40px; max-width: 40px;"
  298. alt="{{ 'frequently_asked_questions.questions.help_and_contact'|trans }}">
  299. </div>
  300. <div class="m-0">
  301. <div class="py-0 my-0">
  302. <div>
  303. <h6 class="overflow-hidden mb-0 pb-0">
  304. {{ 'frequently_asked_questions.questions.help_and_contact'|trans }}
  305. </h6>
  306. </div>
  307. </div>
  308. </div>
  309. <div class="ml-auto">
  310. <span class="px-1">&gt;</span>
  311. </div>
  312. </a>
  313. <hr class="bg-primary">
  314. {% endif %}
  316. </div>
  317. </div>
  318. </div>
  319. {% endblock %}