UpdateUI Css Page creator

2024-03-05 21:43:48 -05:00
parent a4765405c3
commit 5253c5448c
43 changed files with 1625 additions and 157 deletions
--- a/src/layouts/FooterLayout.vue
+++ b/src/layouts/FooterLayout.vue
@@ -0,0 +1,100 @@
+<template>
+  <div style="background-color: rgb(107, 0, 101, 1); min-height: 10vh; display: flex; flex-direction: column;">
+    <v-container style="background-color: rgb(107, 0, 101, 1);">
+      <v-row justify="center" style="margin-top: 30px;">
+        <v-row cols="auto" class="d-flex justify-center">
+
+          <a href="https://www.facebook.com/profile.php?id=61556819217561"><img src="../../../images/facebookicon.png"
+              alt="Description image 2" style="width: 50px; height: 50px; margin-right: 40px;"></a>
+          <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instafacebook.png"
+              alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px;"></a>
+          <router-link :to="{ name: 'home' }">
+            <img src="../../../images/ChevronBlanc.png" alt="Description image 1"
+              style="width: 50px; height: 50px; margin-right: 40px;">
+          </router-link>
+        </v-row>
+      </v-row>
+    </v-container>
+
+    <v-container class="text-center" style="flex-grow: 1;">
+      <v-btn v-for="link in links" :key="link" class="mx-2" color="white" rounded="xl" variant="text">
+        {{ link }}
+      </v-btn>
+    </v-container>
+
+    <v-container class="text-white text-center">
+      {{ new Date().getFullYear() }} — <strong>Hutopy</strong>
+    </v-container>
+
+  </div>
+</template>
+
+
+
+<script>
+export default {
+  data: () => ({
+    links: [
+      'Aide & Contact',
+      'Conditions générales',
+      'Politique des contenus',
+      'Programme Ambassadeurs',
+      'conditions_utilisation',
+      'anti-exploitation',
+    ],
+  }),
+}
+</script>
+
+<style>
+.custom-footer {
+  background-color: rgb(107, 0, 101, 1);
+  padding: 10px;
+  /* Ajoute un rembourrage intérieur de 10px autour du contenu du footer */
+  margin: 0;
+  /* Réinitialise les marges à zéro */
+}
+
+.no-margin {
+  margin: 0 !important;
+  /* Annule la marge de v-app */
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  /* Pour aligner le contenu verticalement */
+  background-color: rgba(107, 0, 101, 1);
+}
+
+footer a:not(:last-child) {
+  margin-right: 20px;
+  /* Ajoute de l'espace entre les images et les liens */
+}
+
+.footertextcolor {
+  margin-top: 5px;
+  margin-bottom: 40px;
+  color: azure;
+}
+
+.socialiconspacer {
+  margin-top: 25px;
+}
+
+.custom-color-button {
+  background-color: rgb(255, 0, 0);
+  /* Your custom color */
+  color: white;
+  /* Text color */
+  font-size: 1.5rem;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.background {
+  background-color: rgba(107, 0, 101, 1);
+}
+</style>