100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<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> |