templates/offre_emploi_offline.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Log in!{% endblock %}
  5. {% block stylesheets %}
  6.     <style>
  7.         body{
  8.             margin-top:50px;
  9.             background:#eee;
  10.         }
  12.         /*panel*/
  13.         .panel {
  14.             border: none;
  15.             box-shadow: none;
  16.         }
  18.         .panel-heading {
  19.             border-color:#eff2f7 ;
  20.             font-size: 16px;
  21.             font-weight: 300;
  22.         }
  24.         .panel-title {
  25.             color: #2A3542;
  26.             font-size: 14px;
  27.             font-weight: 400;
  28.             margin-bottom: 0;
  29.             margin-top: 0;
  30.             font-family: 'Open Sans', sans-serif;
  31.         }
  33.         /*product list*/
  35.         .prod-cat li a{
  36.             border-bottom: 1px dashed #d9d9d9;
  37.         }
  39.         .prod-cat li a {
  40.             color: #3b3b3b;
  41.         }
  43.         .prod-cat li ul {
  44.             margin-left: 30px;
  45.         }
  47.         .prod-cat li ul li a{
  48.             border-bottom:none;
  49.         }
  50.         .prod-cat li ul li a:hover,.prod-cat li ul li a:focus, .prod-cat li ul li.active a , .prod-cat li a:hover,.prod-cat li a:focus, .prod-cat li a.active{
  51.             background: none;
  52.             color: #ff7261;
  53.         }
  55.         .pro-lab{
  56.             margin-right: 20px;
  57.             font-weight: normal;
  58.         }
  60.         .pro-sort {
  61.             padding-right: 20px;
  62.             float: left;
  63.         }
  65.         .pro-page-list {
  66.             margin: 5px 0 0 0;
  67.         }
  69.         .product-list img{
  70.             width: 100%;
  71.             border-radius: 4px 4px 0 0;
  72.             -webkit-border-radius: 4px 4px 0 0;
  73.         }
  75.         .product-list .pro-img-box {
  76.             position: relative;
  77.         }
  78.         .adtocart {
  79.             background: #fc5959;
  80.             width: 50px;
  81.             height: 50px;
  82.             border-radius: 50%;
  83.             -webkit-border-radius: 50%;
  84.             color: #fff;
  85.             display: inline-block;
  86.             text-align: center;
  87.             border: 3px solid #fff;
  88.             left: 45%;
  89.             bottom: -25px;
  90.             position: absolute;
  91.         }
  93.         .adtocart i{
  94.             color: #fff;
  95.             font-size: 25px;
  96.             line-height: 42px;
  97.         }
  99.         .pro-title {
  100.             color: #5A5A5A;
  101.             display: inline-block;
  102.             margin-top: 20px;
  103.             font-size: 16px;
  104.         }
  106.         .product-list .price {
  107.             color:#fc5959 ;
  108.             font-size: 15px;
  109.         }
  111.         .pro-img-details {
  112.             margin-left: -15px;
  113.         }
  115.         .pro-img-details img {
  116.             width: 100%;
  117.         }
  119.         .pro-d-title {
  120.             font-size: 16px;
  121.             margin-top: 0;
  122.             color: #166BC0;
  123.         }
  125.         .product_meta {
  126.             border-top: 1px solid #eee;
  127.             border-bottom: 1px solid #eee;
  128.             padding: 10px 0;
  129.             margin: 15px 0;
  130.         }
  132.         .product_meta span {
  133.             display: block;
  134.             margin-bottom: 10px;
  135.         }
  136.         .product_meta a, .pro-price{
  137.             color:#fc5959 ;
  138.         }
  140.         .pro-price, .amount-old {
  141.             font-size: 18px;
  142.             padding: 0 10px;
  143.         }
  145.         .amount-old {
  146.             text-decoration: line-through;
  147.         }
  149.         .quantity {
  150.             width: 120px;
  151.         }
  153.         .pro-img-list {
  154.             margin: 10px 0 0 -15px;
  155.             width: 100%;
  156.             display: inline-block;
  157.         }
  159.         .pro-img-list a {
  160.             float: left;
  161.             margin-right: 10px;
  162.             margin-bottom: 10px;
  163.         }
  165.         .pro-d-head {
  166.             font-size: 18px;
  167.             font-weight: 300;
  168.         }
  169.         .bootdey{
  170.             margin-top: 25px;
  171.         }
  172.         span{
  173.             font-size: 15px;
  174.         }
  175.         .certified {
  176.             margin-top: 10px
  177.         }
  179.         .certified ul {
  180.             padding-left: 0
  181.         }
  183.         .certified ul li:not(first-child) {
  184.             margin-left: -3px
  185.         }
  187.         .certified ul li {
  188.             display: inline-block;
  189.             background-color: #f9f9f9;
  190.             border: 1px solid #ccc;
  191.             padding: 13px 19px
  192.         }
  194.         .certified ul li:first-child {
  195.             border-right: none
  196.         }
  198.         .certified ul li a {
  199.             text-align: left;
  200.             font-size: 12px;
  201.             color: #6d7a83;
  202.             line-height: 16px;
  203.             text-decoration: none
  204.         }
  206.         .certified ul li a span {
  207.             display: block;
  208.             color: #21c2f8;
  209.             font-size: 13px;
  210.             font-weight: 700;
  211.             text-align: center
  212.         }
  213.         .pro-d-title {
  214.             color: #21c2f8;
  215.             display: inline-block;
  216.             margin-top: 20px;
  217.             font-size: 20px;
  218.         }
  219.     </style>
  220. {% endblock %}
  222. {% block body %}
  223.     <div class="container bootdey">
  224.         <div class="col-md-12">
  225.             <section class="panel">
  226.                 <div class="row">
  227.                     <div class="col-lg-5">
  228.                         <div class="pro-img-details">
  229.                             <img src="{{ asset(offreEmploi.image) }}" alt="Image Offre d'emploi" style="width: 500px; height: 600px">
  230.                         </div>
  231.                     </div>
  232.                     <div class="col-lg-6">
  233.                         <div style="padding: 10px 0px; background-color: #166BC0; color: #FFFFFF; text-align: center; font-size: 18px;">
  234.                             <span class="glyphicon glyphicon-bullhorn" style="margin: 0px 10px 0px 0px; color: #fff; ">
  235.                             </span>&nbsp;{{ offreEmploi.titre }}
  236.                         </div>
  237.                         <h4 class="pro-d-title">
  238.                             Description de l'Offre d'Emploi
  239.                         </h4>
  240.                         <div style="font-size: 20px; margin-top: 20px; text-align: justify;">
  241.                             {{ offreEmploi.contenu | raw }}
  242.                         </div>
  243.                         <div class="certified">
  244.                             <ul>
  245.                                 <li>
  246.                                     <a href="javascript:void(0);">Service(s)<span>{{ offreEmploi.service.nom }}</span></a>
  247.                                 </li>
  248.                                 <li>
  249.                                     <a href="javascript:void(0);">Statut de l'offre:
  250.                                         {% if ( offreEmploi.statutOE.libelle  == "ouvert") %}
  251.                                             <span style="color: #166BC0">
  252.                                                 {{ offreEmploi.statutOE.libelle }}
  253.                                             </span>
  254.                                         {%endif%}
  255.                                         {% if ( offreEmploi.statutOE.libelle  == "ferme") %}
  256.                                             <span style="color: #FB9687">
  257.                                                 {{ offreEmploi.statutOE.libelle }}
  258.                                             </span>
  259.                                         {%endif%}
  260.                                     </a>
  261.                                 </li>
  262.                             </ul>
  263.                         </div>
  264.                         <p>
  265.                             <a href="{{ path('acces_postuler', {'id': offreEmploi.id})}}" class="btn btn-round btn-success" type="button"><i class="fa fa-shopping-cart"></i> Je postule à cette offre</a>
  266.                         </p>
  267.                     </div>
  268.                 </div>
  269.             </section>
  270.         </div>
  271.     </div>
  272.     <hr>
  273.     <div class="col-lg-6 mx-auto">
  274.         <div style="padding: 10px 0px; background-color: #166BC0; color: #FFFFFF; text-align: center; font-size: 18px;">
  275.                             <span class="glyphicon glyphicon-bullhorn" style="margin: 0px 10px 0px 0px; color: #fff; ">
  276.                             </span>&nbsp;D'autres offres d'emploi
  277.         </div>
  278.         <div class="pro-img-list text-center">
  279.             {% for oE in offres_emploi %}
  280.                 <a href="{{ path('acces_job_offline', {'id': oE.id})}}" style="text-align: center; margin-left: 25px;">
  281.                     <figure>
  282.                         <img src="{{ oE.image }}" alt="" style="width: 150px; height: 140px;">
  283.                         <figcaption style="font-size: 10px;">{{ oE.titre }}</figcaption>
  284.                     </figure>
  285.                 </a>
  286.             {% endfor %}
  287.         </div>
  288.     </div>
  289. {% endblock %}