Grille des programmes de Riff en HTML CSS JS.

index.html 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <script>document.getElementsByTagName("html")[0].className += " js";</script>
  7. <link rel="stylesheet" href="assets/css/style.css">
  8. <title>Grille des programmes</title>
  9. </head>
  10. <body>
  11. <header class="cd-main-header text-center flex flex-column flex-center">
  12. <h1 class="text-xl">Programmation hebdomadaire</h1>
  13. </header>
  14. <div class="cd-schedule cd-schedule--loading margin-top-lg margin-bottom-lg js-cd-schedule">
  15. <div class="cd-schedule__timeline">
  16. <ul>
  17. <li><span>19:30</span></li>
  18. <li><span>20:00</span></li>
  19. <li><span>20:30</span></li>
  20. <li><span>21:00</span></li>
  21. <li><span>21:30</span></li>
  22. <li><span>22:00</span></li>
  23. <li><span>22:30</span></li>
  24. <li><span>23:00</span></li>
  25. <li><span>23:30</span></li>
  26. <li><span>00:00</span></li>
  27. <li><span>00:30</span></li>
  28. </ul>
  29. </div> <!-- .cd-schedule__timeline -->
  30. <div class="cd-schedule__events">
  31. <ul>
  32. <li class="cd-schedule__group">
  33. <div class="cd-schedule__top-info"><span>Lundi</span></div>
  34. <ul>
  35. <li class="cd-schedule__event">
  36. <a data-start="21:00" data-end="22:30" data-content="event-matt" data-event="event-2" href="#0">
  37. <em class="cd-schedule__name">Back in Time</em>
  38. Émission en direct
  39. </a>
  40. </li>
  41. </ul>
  42. </li>
  43. <li class="cd-schedule__group">
  44. <div class="cd-schedule__top-info"><span>Mardi</span></div>
  45. <ul>
  46. <li class="cd-schedule__event">
  47. <a data-start="21:00" data-end="22:00" data-content="event-matt" data-event="event-2" href="#0">
  48. <em class="cd-schedule__name">Happy Hour</em>
  49. Émission en direct
  50. </a>
  51. </li>
  52. </ul>
  53. </li>
  54. <li class="cd-schedule__group">
  55. <div class="cd-schedule__top-info"><span>Mercredi</span></div>
  56. <ul>
  57. <li class="cd-schedule__event">
  58. <a data-start="21:00" data-end="22:15" data-content="event-matt" data-event="event-1" href="#0">
  59. <em class="cd-schedule__name">Only Acoustic</em>
  60. Playlist à thème
  61. </a>
  62. </li>
  63. </ul>
  64. </li>
  65. <li class="cd-schedule__group">
  66. <div class="cd-schedule__top-info"><span>Jeudi</span></div>
  67. <ul>
  68. <li class="cd-schedule__event">
  69. <a data-start="21:00" data-end="22:15" data-content="event-matt" data-event="event-2" href="#0">
  70. <em class="cd-schedule__name">Jeudixit Habemus Rockam</em>
  71. </a>
  72. </li>
  73. </ul>
  74. </li>
  75. <li class="cd-schedule__group">
  76. <div class="cd-schedule__top-info"><span>Vendredi</span></div>
  77. <ul>
  78. <li class="cd-schedule__event">
  79. <a data-start="20:30" data-end="21:15" data-content="event-matt" data-event="event-1" href="#0">
  80. <em class="cd-schedule__name">Only Lives</em>
  81. </a>
  82. </li>
  83. <li class="cd-schedule__event">
  84. <a data-start="21:30" data-end="23:15" data-content="event-matt" data-event="event-2" href="#0">
  85. <em class="cd-schedule__name">Katamariff</em>
  86. Émission en direct
  87. </a>
  88. </li>
  89. </ul>
  90. </li>
  91. <li class="cd-schedule__group">
  92. <div class="cd-schedule__top-info"><span>Samedi</span></div>
  93. <ul>
  94. <li class="cd-schedule__event">
  95. <a data-start="21:00" data-end="23:00" data-content="event-matt" data-event="event-1" href="#0">
  96. <em class="cd-schedule__name">Beyond</em>
  97. Playlist à thème
  98. </a>
  99. </li>
  100. </ul>
  101. </li>
  102. <li class="cd-schedule__group">
  103. <div class="cd-schedule__top-info"><span>Dimanche</span></div>
  104. <ul>
  105. <li class="cd-schedule__event">
  106. <a data-start="20:30" data-end="22:45" data-content="event-matt" data-event="event-1" href="#0">
  107. <em class="cd-schedule__name">Only Games</em>
  108. Playlist à thème
  109. </a>
  110. </li>
  111. </ul>
  112. </li>
  113. </div>
  114. <div class="cd-schedule-modal">
  115. <header class="cd-schedule-modal__header">
  116. <div class="cd-schedule-modal__content">
  117. <span class="cd-schedule-modal__date"></span>
  118. <h3 class="cd-schedule-modal__name"></h3>
  119. </div>
  120. <div class="cd-schedule-modal__header-bg"></div>
  121. </header>
  122. <div class="cd-schedule-modal__body">
  123. <div class="cd-schedule-modal__event-info"></div>
  124. <div class="cd-schedule-modal__body-bg"></div>
  125. </div>
  126. <a href="#0" class="cd-schedule-modal__close text-replace">Close</a>
  127. </div>
  128. <div class="cd-schedule__cover-layer"></div>
  129. </div> <!-- .cd-schedule -->
  130. <script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
  131. <script src="assets/js/main.js"></script>
  132. </body>
  133. </html>