Reviews.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <v-container>
  3. <div class="container">
  4. <h6 class="small-title">Avis Clients</h6>
  5. <h1 class="title">
  6. C'est vous qui le dites
  7. </h1>
  8. <v-row justify="center">
  9. <!-- v-card with client review -->
  10. <v-col cols="12" md="6" lg="4">
  11. <v-card class="review-card mx-auto">
  12. <v-card-title>
  13. <v-avatar size="50">
  14. <v-img src="/images/reviews/1.jpg"></v-img>
  15. </v-avatar>
  16. <span class="review-name">John Doe</span>
  17. </v-card-title>
  18. <v-card-text>
  19. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
  20. </v-card-text>
  21. </v-card>
  22. </v-col>
  23. <v-col cols="12" md="6" lg="4">
  24. <v-card class="review-card mx-auto">
  25. <v-card-title>
  26. <v-avatar size="50">
  27. <v-img src="/images/reviews/2.jpg"></v-img>
  28. </v-avatar>
  29. <span class="review-name">Jane Doe</span>
  30. </v-card-title>
  31. <v-card-text>
  32. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
  33. </v-card-text>
  34. </v-card>
  35. </v-col>
  36. </v-row>
  37. <v-row justify="center">
  38. <!-- v-card with client review -->
  39. <v-col cols="12" md="6" lg="4">
  40. <v-card class="review-card mx-auto">
  41. <v-card-title>
  42. <v-avatar size="50">
  43. <v-img src="/images/reviews/1.jpg"></v-img>
  44. </v-avatar>
  45. <span class="review-name">John Doe</span>
  46. </v-card-title>
  47. <v-card-text>
  48. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
  49. </v-card-text>
  50. </v-card>
  51. </v-col>
  52. <v-col cols="12" md="6" lg="4">
  53. <v-card class="review-card mx-auto">
  54. <v-card-title>
  55. <v-avatar size="50">
  56. <v-img src="/images/reviews/2.jpg"></v-img>
  57. </v-avatar>
  58. <span class="review-name">Jane Doe</span>
  59. </v-card-title>
  60. <v-card-text>
  61. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
  62. </v-card-text>
  63. </v-card>
  64. </v-col>
  65. </v-row>
  66. <h3 class="title">
  67. Plus de 5 000 structures nous font confiance
  68. </h3>
  69. <!-- caroussel en bandau avec le logo des structures qui nous font confiance-->
  70. <v-carousel cycle height="200" hide-delimiter-background show-arrows-on-hover>
  71. <v-carousel-item
  72. v-for="(item,i) in items"
  73. :key="i"
  74. :src="item.src"
  75. ></v-carousel-item>
  76. </v-carousel>
  77. </div>
  78. </v-container>
  79. </template>
  80. <style scoped>
  81. .review-card {
  82. max-width: 500px;
  83. margin: 10px;
  84. text-align: center;
  85. }
  86. .review-name {
  87. margin-left: 15px;
  88. font-size: 1.2em;
  89. font-weight: 500;
  90. }
  91. .small-title {
  92. font-family: "Barlow";
  93. font-style: normal;
  94. text-align: center;
  95. }
  96. .title{
  97. font-family: "Barlow";
  98. font-style: normal;
  99. font-weight: 400;
  100. font-size: 34px;
  101. line-height: 38px;
  102. text-align: center;
  103. }
  104. </style>