Histoire.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <LayoutContainer id="Qui-sommes-nous" >
  3. <v-row class="mt-12 custom-row">
  4. <v-col cols="4">
  5. <LayoutUISubTitle :titleText="'Qui sommes-nous ?'" />
  6. </v-col>
  7. <v-col cols="8">
  8. <h3 class="italic-title mr-8">
  9. “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
  10. la référence pour la gestion et la promotion du spectacle vivant sur
  11. les territoires.”
  12. </h3>
  13. </v-col>
  14. </v-row>
  15. <v-row style="width: 80%; margin-left: auto; margin-right: auto" class="mb-12">
  16. <v-col cols="6">
  17. <div class="passion-img"></div>
  18. </v-col>
  19. <v-col cols="6">
  20. <h2 class="passion-title">Une histoire de passionnés</h2>
  21. <p class="passion-details">
  22. En 2005, Guillaume CORCOBA, musicien depuis toujours et à ce moment là
  23. président d'un orchestre d'harmonie, mais également membre du conseil
  24. d'administration de sa fédération, réfléchit à un outil pour
  25. centraliser les informations de sa structure, mais également au niveau
  26. fédéral. Il souhaite simplifier la gestion des structures culturelles
  27. et en faire la promotion, car pour lui, le milieu culturel est
  28. indispensable. Il est rapidement rejoint par Michel PERNET-SOLLIET,
  29. lui aussi musicien, et ils montent ensemble Openassos, qui deviendra
  30. quelques années plus tard, Opentalent. Opentalent c'est un ensemble de
  31. 3 logiciels spécialement dédiés à la culture et un agenda culturel
  32. pour en faire la promotion.
  33. </p>
  34. <h2 class="culture-title">
  35. La Culture au service du développement territorial
  36. </h2>
  37. <p class="culture-details">
  38. Qui n'a jamais entendu que la culture coûtait trop cher ? On l'entend
  39. , ha ça oui on l'a même trop entendu ! Mais la culture c'est avant
  40. tout un facteur de lien social incroyable. On se retrouve, on échange,
  41. on partage... on vit ensemble. On crée des vrais moments et on
  42. développe des groupes de passionnés. On participe à rendre nos
  43. collectivités attractives et surtout on les fait vivre, toute l'année,
  44. à toutes les saisons. Depuis plusieurs décennies, un grand nombre de
  45. territoires s'appuie sur le développement de la culture comme un outil
  46. de développement territorial pour faire face à la
  47. désindustrialisation, à une croissance démographique ralentie ou
  48. encore une image défavorable. Ce modèle de développement par la
  49. culture pour pallier un déficit d’attractivité touristique inspire de
  50. plus en plus de politiques de développement territorial.
  51. </p>
  52. </v-col>
  53. </v-row>
  54. </LayoutContainer>
  55. </template>
  56. <script setup></script>
  57. <style scoped>
  58. .custom-row {
  59. width: 90%;
  60. margin-left: auto;
  61. margin-right: auto;
  62. }
  63. .culture-details {
  64. font-weight: 300;
  65. font-size: 16px;
  66. line-height: 20px;
  67. color: #091d20;
  68. width: 30rem;
  69. text-align: justify;
  70. }
  71. .culture-title {
  72. font-weight: 400;
  73. font-size: 34px;
  74. line-height: 38px;
  75. color: #071b1f;
  76. margin-bottom: 3rem;
  77. width: 25rem;
  78. text-align: justify;
  79. }
  80. .passion-title {
  81. font-weight: 600;
  82. font-size: 42px;
  83. line-height: 42px;
  84. color: #071b1f;
  85. flex: none;
  86. margin-bottom: 3rem;
  87. }
  88. .passion-details {
  89. text-align: justify;
  90. font-weight: 300;
  91. font-size: 16px;
  92. line-height: 20px;
  93. color: #091d20;
  94. width: 30rem;
  95. margin-bottom: 2rem;
  96. }
  97. .passion-img {
  98. background-image: url(/images/about/passion.jpg);
  99. background-repeat: no-repeat;
  100. background-size: cover;
  101. background-position: center;
  102. width: 400px;
  103. height: 100%;
  104. border-radius: 20px;
  105. }
  106. .italic-title {
  107. text-align: justify;
  108. font-style: italic;
  109. font-weight: 300;
  110. font-size: 34px;
  111. line-height: 40px;
  112. color: #091d20;
  113. width: 80%;
  114. margin-left: auto;
  115. margin-bottom: auto;
  116. }
  117. </style>