templates/front_end/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Track A Poo | Royal Canin{% endblock %}
  5. {% block body %}
  6. <style>
  7.     * {font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
  8.     body {background: #fff;overflow-x: hidden;}
  9.     .page-wrapper {height: 100%;width: 100%;margin: -10px auto 0 auto;max-width: 75%;}
  10.     .page-wrapper img {display: block;border-radius: 0 0 20px 20px;margin: 0 auto 50px auto;height: 450px;width: 100%;object-fit: cover;}
  11.     .page-wrapper .buttons {list-style: none;padding: 0;margin: 0 auto;display: flex;width: fit-content;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;}
  12.     .page-wrapper .buttons li a {opacity: 1;transition: 0.2s opacity ease-in-out;width: 174px;height: 62px;display: block;background-position: center;background-size: contain;background-repeat: no-repeat;}
  13.     .page-wrapper .buttons li a:hover {opacity: 0.75;transition: 0.2s opacity ease-in-out;}
  14.     .page-wrapper .buttons li:first-of-type {margin: 0 15px 0 0;}
  15.     .page-wrapper .buttons li a.app-btn {background-image: url("images/appstore-btn.png");}
  16.     .page-wrapper .buttons li a.play-btn {background-image: url("images/playstore-btn.png");}
  17.     .page-wrapper .links {list-style: none;padding: 0;margin: 50px auto 0 auto;display: flex;width: fit-content;}
  18.     .page-wrapper .links li:first-of-type {margin: 0 15px 0 0;padding: 0 15px 0 0;position: relative;}
  19.     .page-wrapper .links li:first-of-type:after {content: '';height: 15px;width: 1px;background: #000;position: absolute;top: 50%;transform: translateY(-50%);right: 0;}
  20.     .page-wrapper .links li a {color: #000;transition: 0.2s color ease-in-out;text-underline-offset: 4px;}
  21.     .page-wrapper .links li a:hover {color: #04419f;transition: 0.2s color ease-in-out;}
  23.     @media (max-width: 992px) {
  24.         .page-wrapper {max-width: 100%;}
  25.         .page-wrapper img {height: auto;min-height: 350px;}
  26.     }
  27.     @media (max-width: 567px) {
  28.         .page-wrapper .buttons, .page-wrapper .links {flex-direction: column;text-align: center;}
  29.         .page-wrapper .buttons li:first-of-type, .page-wrapper .links li:first-of-type {margin: 0 0 10px 0;padding: 0;}
  30.         .page-wrapper .links li:first-of-type:after {display: none;}
  31.         .page-wrapper .buttons li a {width: 234px;height: 82px;}
  32.     }
  33. </style>
  34.     <div class="page-wrapper">
  35.             <img src="images/banner.jpg">
  36.             <ul class="buttons">
  37.                 <li><a href="https://apps.apple.com/fr/app/track-a-poo/id6479363163" target="_blank" class="app-btn"></a></li>
  38.                 <li><a href="https://play.google.com/store/apps/details?id=com.infostrates.trackapoo" target="_blank" class="play-btn"></a></li>
  39.             </ul>
  40.             <ul class="links">
  41.                 <li><a href="{{ path('terms') }}">Terms and conditions</a></li>
  42.                 <li><a href="{{ path('policy') }}">Confidentiality policy</a></li>
  43.             </ul>
  44.     </div>
  45. {% endblock %}