templates/content/horoscope/horoscopeSigne_page.html.twig line 1

Open in your IDE?
  1. <section class="d-none d-sm-block">
  2.     <a class="btn btn-sm btn-primary m-2" href="{{path('app_horoscope')}}">
  3.         <i class="bi bi-chevron-left"></i> &nbsp;
  4.         Retour
  5.     </a>
  6.     <div class="container col-sm-10 mx-auto">
  7.         <div class="text-center mb-2">
  8.             <h2 class="section-heading text-uppercase">{{horoscope.nom}}</h2>
  9.             <h3 class="section-subheading text-muted mb-2">{{horoscope.text}}</h3>
  10.         </div>
  11.     </div>
  12.     <div class="container col-10 row mx-auto ">
  13.         <div class="col-sm-3 col border">
  14.             <div class="team-member ">
  16.                 <div class="mt-2"> <img class="mx-auto rounded-circle mt-2 border-dark" src="{{asset(horoscope.photo)}}"
  17.                         alt="..." style="width: 150px; height: 150px;" /></div>
  20.                 <h4>{{horoscope.nom}}</h4>
  21.                 <p class="text-muted">{{horoscope.text}}</p>
  22.                 <div class=" btn-primary btn-social mx-2 " href="#"><i class="bi bi-calendar-date"></i></div>
  23.                 <div class=" btn-primary btn-social mx-2" href="#!"><i class="bi bi-calendar-week"></i></div>
  24.                 <div class=" btn-primary btn-social mx-2" href="#!"><i class="bi bi-calendar-month"></i></div>
  25.             </div>
  26.         </div>
  27.         <div class="col-sm-9 col">
  28.             <div class="card col-sm-9  h-100 w-100">
  29.                 <div class="card-header border-bottom ">
  30.                     <!-- Wizard navigation-->
  31.                     <div class="nav nav-pills nav-justified flex-column flex-xl-row nav-wizard " id="cardTab"
  32.                         role="tablist">
  33.                         <!-- Wizard navigation item 1-->
  34.                         <a class="nav-item nav-link active" id="jour-tab" href="#jour" data-bs-toggle="tab" role="tab"
  35.                             aria-controls="jour" aria-selected="true">
  36.                             <div class="wizard-step-icon"><i class="bi bi-calendar-date"></i></div>
  37.                             <div class="wizard-step-text">
  38.                                 <div class="wizard-step-text-name">Horoscope Journalier.</div>
  39.                             </div>
  40.                         </a>
  41.                         <!-- Wizard navigation item 2-->
  42.                         <a class="nav-item nav-link" id="semaine-tab" href="#semaine" data-bs-toggle="tab" role="tab"
  43.                             aria-controls="semaine" aria-selected="true">
  44.                             <div class="wizard-step-icon"><i class="bi bi-calendar-week"></i></div>
  45.                             <div class="wizard-step-text">
  46.                                 <div class="wizard-step-text-name">Horoscope Hebdomadaire.</div>
  47.                             </div>
  48.                         </a>
  51.                         <!-- Wizard navigation item 3-->
  52.                         <a class="nav-item nav-link" id="mois-tab" href="#mois" data-bs-toggle="tab" role="tab"
  53.                             aria-controls="mois" aria-selected="true">
  54.                             <div class="wizard-step-icon"><i class="bi bi-calendar-month"></i></div>
  55.                             <div class="wizard-step-text ">
  56.                                 <div class="wizard-step-text-name ">Horoscope Mensuel.</div>
  57.                             </div>
  58.                         </a>
  60.                     </div>
  61.                 </div>
  62.                 <div class="card-body ">
  63.                     <div class="tab-content" id="cardTabContent">
  64.                         <!-- Wizard tab pane item 1-->
  65.                         <div class="tab-pane fade show active" id="jour" role="tabpanel" aria-labelledby="jour-tab">
  66.                             <div class="row justify-content-center">
  67.                                 <h2 class="text-center mb-2">{{horoscope.Jour.date}}</h2>
  68.                                 <p class="mt-2">
  69.                                     <strong>Vie privée</strong>: {{horoscope.Jour.viePrivé}}
  70.                                 </p>
  73.                             </div>
  74.                         </div>
  75.                         <div class="tab-pane   fade  " id="semaine" role="tabpanel" aria-labelledby="semaine-tab">
  76.                             <div class="row justify-content-center">
  77.                                 <h2 class="text-center mb-2">{{horoscope.Semaine.date}}</h2>
  78.                                 <p class="mt-2">
  79.                                     <strong>Vie privée</strong>: {{horoscope.Semaine.viePrivé}}
  80.                                 </p>
  81.                                 <p>
  82.                                     <strong>Travail</strong>: {{horoscope.Semaine.travail}}
  83.                                 </p>
  84.                                 <p> <strong>Forme</strong>: {{horoscope.Semaine.forme}}</p>
  86.                             </div>
  87.                         </div>
  88.                         <div class="tab-pane  fade  " id="mois" role="tabpanel" aria-labelledby="mois-tab">
  89.                             <div class="row justify-content-center">
  90.                                 <h2 class="text-center mb-2">{{horoscope.Mois.date}}</h2>
  91.                                 <p class="mt-2">
  92.                                     <strong>Vie privée</strong>: {{horoscope.Mois.viePrivé}}
  93.                                 </p>
  94.                                 <p>
  95.                                     <strong>Travail</strong>: {{horoscope.Mois.travail}}
  96.                                 </p>
  97.                                 <p> <strong>Forme</strong>: {{horoscope.Mois.forme}}</p>
  98.                             </div>
  99.                         </div>
  100.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.     </div>
  108. </section>
  110. <section class="d-sm-none d-block ">
  111.     <div class="col-12 ">
  112.         <a class="btn btn-sm btn-primary m-2" href="{{path('app_horoscope')}}">
  113.             <i class="bi bi-chevron-left"></i> &nbsp;
  114.             Retour
  115.         </a>
  116.         <div class="team-member ">
  118.             <div class="mt-2"> <img class="mx-auto rounded-circle mt-2 border-dark" src="{{asset(horoscope.photo)}}"
  119.                     alt="..." style="width: 150px; height: 150px;" /></div>
  122.             <h4>{{horoscope.nom}}</h4>
  123.             <p class="text-muted">{{horoscope.text}}</p>
  124.             <div class=" btn-primary btn-social mx-2 " href="#"><i class="bi bi-calendar-date"></i></div>
  125.             <div class=" btn-primary btn-social mx-2" href="#!"><i class="bi bi-calendar-week"></i></div>
  126.             <div class=" btn-primary btn-social mx-2" href="#!"><i class="bi bi-calendar-month"></i></div>
  127.         </div>
  128.     </div>
  129.     <div class="accordion accordion-flush mt-3" id="serviceFlush">
  130.         <div class="accordion-item">
  131.             <h2 class="accordion-header" id="flush-Jour">
  132.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  133.                     data-bs-target="#Jour" aria-expanded="false" aria-controls="flush-collapseOne">
  134.                     <i class="bi bi-calendar-date"></i> &nbsp; Horoscope Journalier.
  135.                 </button>
  136.             </h2>
  137.             <div id="Jour" class="accordion-collapse collapse" aria-labelledby="flush-Jour"
  138.                 data-bs-parent="#serviceFlush">
  139.                 <div class="accordion-body">
  140.                     <h2 class="text-center mb-2">{{horoscope.Jour.date}}</h2>
  141.                     <p class="mt-2">
  142.                         <strong>Vie privée</strong>: {{horoscope.Jour.viePrivé}}
  143.                     </p>
  144.                 </div>
  145.             </div>
  146.         </div>
  148.         <div class="accordion-item mt-2">
  149.             <h2 class="accordion-header" id="flush-Semaine">
  150.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  151.                     data-bs-target="#Semaine" aria-expanded="false" aria-controls="flush-collapseTwo">
  152.                     <i class="bi bi-calendar-week"></i> &nbsp; Horoscope Hebdomadaire.
  153.                 </button>
  154.             </h2>
  155.             <div id="Semaine" class="accordion-collapse collapse " aria-labelledby="flush-Semaine"
  156.                 data-bs-parent="#serviceFlush">
  157.                 <div class="accordion-body">
  158.                     <h2 class="text-center mb-2">{{horoscope.Semaine.date}}</h2>
  159.                     <p class="mt-2">
  160.                         <strong>Vie privée</strong>: {{horoscope.Semaine.viePrivé}}
  161.                     </p>
  162.                     <p>
  163.                         <strong>Travail</strong>: {{horoscope.Semaine.travail}}
  164.                     </p>
  165.                     <p> <strong>Forme</strong>: {{horoscope.Semaine.forme}}</p>
  167.                 </div>
  168.             </div>
  169.         </div>
  171.         <div class="accordion-item mt-2">
  172.             <h2 class="accordion-header" id="flush-Mois">
  173.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  174.                     data-bs-target="#Mois" aria-expanded="false" aria-controls="flush-collapseTwo">
  175.                     <i class="bi bi-calendar-month"></i> &nbsp; Horoscope Mensuel.
  176.                 </button>
  177.             </h2>
  178.             <div id="Mois" class="accordion-collapse collapse " aria-labelledby="flush-Mois"
  179.                 data-bs-parent="#serviceFlush">
  180.                 <div class="accordion-body">
  181.                     <h2 class="text-center mb-2">{{horoscope.Mois.date}}</h2>
  182.                     <p class="mt-2">
  183.                         <strong>Vie privée</strong>: {{horoscope.Mois.viePrivé}}
  184.                     </p>
  185.                     <p>
  186.                         <strong>Travail</strong>: {{horoscope.Mois.travail}}
  187.                     </p>
  188.                     <p> <strong>Forme</strong>: {{horoscope.Mois.forme}}</p>
  189.                 </div>
  190.             </div>
  191.         </div>
  193.     </div>
  194. </section>
  195. <div class="row mb-2 mt-sm-n10">
  196.     <div class="col-sm-8 mx-auto text-center ">
  198.         <p class="large text-muted "> Si quelque chose
  199.             vous interpelle à la lecture de cet horoscope, n'oubliez pas que vos voyants sont là pour vous
  200.             éclairer et vous guider.</p>
  201.         {% if app.user %}
  202.         <a href="{{path('app_all')}}">
  203.             <button class="btn btn-primary">Consultez</button>
  204.         </a>
  206.         {% else %}
  207.         <a href="{{path('app_register')}}">
  208.             <button class="btn btn-primary">Inscription</button>
  209.         </a>
  210.         {% endif %}
  211.     </div>
  212. </div>