Banner.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <LayoutContainer>
  3. <LayoutUITitlePage title="webinaires" subtitle="Partez à la découverte de vos logiciels Opentalent. " />
  4. <v-row>
  5. <v-col cols="12" style="position: relative">
  6. <img
  7. src="/images/formation/banner.jpg"
  8. alt="line"
  9. class="cover-image"
  10. />
  11. </v-col>
  12. </v-row>
  13. <v-row>
  14. <v-col cols="12" class="menu-container">
  15. <div v-for="menu in menus" :key="menu.label">
  16. <v-chip v-if="state.activeMenu === menu.label" class="active-menu">
  17. {{ menu.label }}
  18. </v-chip>
  19. <span v-else>{{ menu.label }}</span>
  20. </div>
  21. </v-col>
  22. </v-row>
  23. </LayoutContainer>
  24. </template>
  25. <script setup>
  26. </script>
  27. <style scoped>
  28. .image-text {
  29. position: absolute;
  30. top: 40px;
  31. left: 20px;
  32. font-family: "Barlow";
  33. color: white;
  34. font-size: 3rem;
  35. width: 30rem;
  36. font-style: italic;
  37. font-weight: 300;
  38. line-height: 40px;
  39. }
  40. :deep().subtitle {
  41. font-size: 1.5rem;
  42. line-height: 2rem;
  43. letter-spacing: .1rem;
  44. margin-bottom: 1rem;
  45. }
  46. .formation {
  47. font-family: "Barlow";
  48. font-style: normal;
  49. font-weight: 600;
  50. font-size: 90px;
  51. line-height: 85px;
  52. text-align: center;
  53. color: #000000;
  54. margin-bottom: 1rem;
  55. }
  56. .menu-container {
  57. display: flex;
  58. justify-content: space-around;
  59. padding: 1rem 10rem;
  60. background: white;
  61. color: #bbb8b8;
  62. font-family: "Barlow";
  63. font-size: 12px;
  64. line-height: 16px;
  65. display: flex;
  66. align-items: center;
  67. text-align: center;
  68. letter-spacing: 0.18em;
  69. text-transform: uppercase;
  70. }
  71. .v-chip.active-menu {
  72. background: black;
  73. color: white;
  74. }
  75. .cover-image {
  76. width: 100%;
  77. height: 35rem;
  78. object-fit: cover;
  79. object-position: center 30%;
  80. margin: 0 auto;
  81. transform: scaleX(-1);
  82. }
  83. </style>