templates/front/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr" class="h-100">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
  8.     <title>Hello, world!</title>
  9.     <style>
  11.         @font-face {
  12.             font-family: 'Goldman';
  13.             font-style: normal;
  14.             font-weight: 400;
  15.             src: local('Goldman'), url('https://fonts.cdnfonts.com/s/46601/Goldman-Regular.woff') format('woff');
  16.         }
  17.         @font-face {
  18.             font-family: 'Goldman';
  19.             font-style: normal;
  20.             font-weight: 700;
  21.             src: local('Goldman'), url('https://fonts.cdnfonts.com/s/46601/Goldman-Bold.woff') format('woff');
  22.         }
  23.         @font-face {
  24.             font-family: 'Nunito';
  25.             font-style: normal;
  26.             font-weight: 400;
  27.             src: local('Nunito'), url('https://fonts.cdnfonts.com/s/15604/Nunito-Regular.woff') format('woff');
  28.         }
  29.         @font-face {
  30.             font-family: 'Nunito';
  31.             font-style: normal;
  32.             font-weight: 700;
  33.             src: local('Nunito'), url('https://fonts.cdnfonts.com/s/15604/Nunito-Bold.woff') format('woff');
  34.         }
  36.         body, 
  37.         #diapo1, #diapo1 > *,
  38.         #diapo2, #diapo2 > * {
  39.             min-height: 100vh;
  40.         }
  42.         #diapo1, #diapo2 {
  43.             position: absolute;
  44.             width: 100%;
  45.             background-position: center;
  46.         }
  48.         #diapo1 {
  49.             background-image: url("images/front/1Page-DS-login-logiciel.jpg");
  50.         }
  51.         #diapo2 {
  52.             background-image: url("images/front/2Page-DS-login-logiciel.jpg");
  53.             background-position: 50% 0%;
  54.             background-repeat: no-repeat;
  55.         }
  56.         .Rectangle-56 {
  57.             border: solid #065285;
  58.             border-width: 15px 0;
  59.             background-color: rgba(3, 1, 32, 0.67);
  60.         }
  61.         .Rectangle-59 {
  62.             color: #c0d119;
  63.             font-family: Goldman;
  64.             margin: 22px 0;
  65.             border: solid #c0d119;
  66.             border-width: 15px 0;
  67.         }
  68.         .Title-5x {
  69.             font-size: 100px;
  70.         }
  71.         .Title-4x {
  72.             font-size: 87px;
  73.         }
  75.         .connectBtn {
  76.             background-color: #065285;
  77.             color: #c0d119;
  78.             font-family: Nunito;
  79.             /*font-weight: 650;*/
  80.             font-size: 26px;
  81.             padding: 0.375rem 3rem;
  82.             border-radius: 17px;
  83.             border: solid 1px #06003b;
  84.         }
  85.         
  86.         .text-lime {
  87.             color: #C0D119;
  88.         }
  90.         /*
  91.         #container {
  92.             position:relative;
  93.             height:610px;
  94.             width:610px;
  95.         }
  96.         #container img {
  97.             position:absolute;
  98.             left:0;
  99.         }
  101.         @keyframes imgFade {
  102.             0% {
  103.                 opacity:1;
  104.             }
  105.             100% {
  106.                 opacity:0;
  107.             }
  108.         }
  110.         #container img:nth-of-type(2) {
  111.             animation-name: imgFade;
  112.             animation-delay: 3s;
  113.             animation-timing-function: ease-in-out;
  114.             animation-iteration-count: 1;
  115.             animation-duration: 6s;
  116.             animation-fill-mode: forwards;
  117.         }
  118.         */
  119.     </style>
  120. </head>
  121. <body>
  123.     <div id="diapo1">
  124.         <div class="d-flex flex-column">
  125.             <div class="text-center pb-4">&nbsp;</div>
  126.             <div class="flex-grow-1">&nbsp;</div>
  127.             <div class="flex-shrink-1 text-center Rectangle-56">
  128.                 <div class="Rectangle-59 py-4">
  129.                     <h1 class="fw-bold Title-5x text-break">DataSports <br/> Systems</h1>
  130.                 </div>
  131.             </div>
  132.             <div class="flex-grow-1 d-flex">
  133.                 <!--<div class="flex-grow-1">&nbsp;</div>
  134.                 <div class="align-self-center py-3">
  135.                     <a class="btn connectBtn text-break" href="connexion.html" role="button">Connexion</a>
  136.                 </div>
  137.                 <div class="col-1">&nbsp;</div>-->
  138.             </div>
  139.             <div class="text-center text-lime fw-bolder pb-4">Copyright. © 2021 Datasports Systems. All Rights Reserved</div>
  140.         </div>
  141.     </div>
  144.     <div id="diapo2" style="display:none">
  145.         <div class="d-flex flex-column">
  146.             <div class="text-center pb-4">&nbsp;</div>
  147.             <div class="flex-grow-1">&nbsp;</div>
  148.             <div class="flex-shrink-1 text-center Rectangle-56">
  149.                 <div class="Rectangle-59 py-4">
  150.                     <h1 class="Title-4x text-break">Welcome <br/> To <br/> DataSports</h1>
  151.                 </div>
  152.             </div>
  153.             <div class="flex-grow-1 d-flex">
  154.                 <div class="flex-grow-1">&nbsp;</div>
  155.                 <div class="align-self-center py-3">
  156.                     <a class="btn connectBtn text-break" href="connexion" role="button">Connexion</a>
  157.                 </div>
  158.                 <div class="col-1">&nbsp;</div>
  159.             </div>
  160.             <div class="text-center text-lime fw-bolder pb-4">Copyright. © 2021 Datasports Systems. All Rights Reserved</div>
  161.         </div>
  162.     </div>
  165.     <!-- <div class="position-absolute bottom-0 end-0 text-white" style="margin-bottom:7rem; margin-right:7rem"></div> -->
  168.     <!-- <div class="position-absolute bottom-0 start-50 translate-middle-x text-white pb-4" style="display:none">Copyright. © 2021 Datasports Systems. All Rights Reserved</div> -->
  172.     <!-- Option 1: Bootstrap Bundle with Popper -->
  173.     <!--
  174.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
  175.     -->
  177.     <!-- Option 2: Separate Popper and Bootstrap JS -->
  178.     <!--
  179.     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
  180.     -->
  181.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
  183.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  184.     <script>
  185.         $(document).ready(function()
  186.         {
  187.             setTimeout(function(){
  188.                 $("#diapo1").fadeOut().next().fadeIn();
  189.             }, 3500);
  190.             //$('body > div:first-child').click();
  191.         });
  192.     </script>
  194. </body>
  195. </html>