Banner.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <LayoutContainer>
  3. <v-row>
  4. <v-col
  5. cols="12"
  6. class="title"
  7. >
  8. <h1 class="text-center">
  9. Nous rejoindre
  10. </h1>
  11. </v-col>
  12. </v-row>
  13. <v-row>
  14. <v-col cols="12">
  15. <div class="banner-container">
  16. <img
  17. src="/images/join/join.jpg"
  18. alt="line"
  19. class="cover-image"
  20. >
  21. </div>
  22. </v-col>
  23. </v-row>
  24. <h3 class="text-center join-title">
  25. Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est
  26. ipsa laborum sed internos dolor in pariatur vitae. Et quis nostrum non
  27. praesentium impedit 33 doloribus cumque et adipisci velit!
  28. </h3>
  29. </LayoutContainer>
  30. </template>
  31. <script setup></script>
  32. <style scoped>
  33. .join-title {
  34. font-family: "Barlow";
  35. font-style: normal;
  36. font-weight: 300;
  37. font-size: 1.5rem;
  38. line-height: 2.5rem;
  39. text-align: center;
  40. margin-top: 2rem;
  41. margin-bottom: 2rem;
  42. margin-left: 30rem;
  43. margin-right: 30rem;
  44. }
  45. .title {
  46. margin-top: 2rem;
  47. margin-bottom: 2rem;
  48. text-align: center;
  49. font-family: "Barlow";
  50. font-style: normal;
  51. font-weight: 600;
  52. font-size: 3rem;
  53. line-height: 85px;
  54. }
  55. .banner-container {
  56. position: relative;
  57. overflow: hidden;
  58. }
  59. .cover-image {
  60. width: 100%;
  61. height: 25rem;
  62. object-fit: cover;
  63. transition: transform 0.2s;
  64. margin: 0 auto;
  65. transform: scaleX(-1);
  66. }
  67. </style>