Banner modification
This commit is contained in:
PascalMarchesseault
@@ -6,149 +6,124 @@
|
|||||||
|
|
||||||
<!--Logo & bouttons -->
|
<!--Logo & bouttons -->
|
||||||
<v-container class="d-flex justify-center align-center">
|
<v-container class="d-flex justify-center align-center">
|
||||||
<div style="margin-left: 20%;">
|
<v-row justify="center" align="center">
|
||||||
<v-row>
|
<v-col></v-col>
|
||||||
|
<v-col cols="5">
|
||||||
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
|
<v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
|
||||||
<RouterLink :to="{ name: 'login' }">
|
|
||||||
<v-btn size="large"
|
|
||||||
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
|
|
||||||
light elevation="0">
|
|
||||||
Connexion
|
|
||||||
</v-btn>
|
|
||||||
</RouterLink>
|
|
||||||
<RouterLink :to="{ name: 'contact' }">
|
|
||||||
<v-btn size="large"
|
|
||||||
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
|
|
||||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
|
||||||
Inscription
|
|
||||||
</v-btn>
|
|
||||||
</RouterLink>
|
|
||||||
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<v-container style="margin: 0; padding: 0;">
|
|
||||||
<v-row style="justify-content: center;">
|
|
||||||
<img src="../../../images/homepage/bannierehomepage.png"
|
|
||||||
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Colonnes Créer Partager Inspirer-->
|
|
||||||
<v-container>
|
|
||||||
<v-row>
|
|
||||||
<!-- vide de gauche -->
|
|
||||||
<v-col cols="1" class="ml-4 ml-sm-0">
|
|
||||||
</v-col>
|
</v-col>
|
||||||
<!-- Colonne Centre -->
|
<v-col>
|
||||||
<v-col cols="9" style="margin-left: 4%;">
|
<v-row>
|
||||||
|
<RouterLink :to="{ name: 'login' }">
|
||||||
<!-- Créer Profiter Inspirer -->
|
<v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
|
||||||
|
Connexion
|
||||||
<div class="d-flex justify-center align-center">
|
</v-btn>
|
||||||
<div>
|
</RouterLink>
|
||||||
<div style="margin-top: 40px;">
|
<RouterLink :to="{ name: 'contact' }">
|
||||||
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
|
<v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
|
||||||
<v-hover v-slot="{ isHovering, props }">
|
Inscription
|
||||||
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
|
</v-btn>
|
||||||
v-bind="props">
|
</RouterLink>
|
||||||
<v-img src="../../../images/homepage/creer.png"
|
</v-row>
|
||||||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
|
||||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
|
||||||
contained>
|
|
||||||
<v-container>
|
|
||||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
|
||||||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
|
||||||
CRÉER</h3>
|
|
||||||
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
|
|
||||||
Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
|
|
||||||
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
|
|
||||||
réalité.
|
|
||||||
</p>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
</v-overlay>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
|
|
||||||
</v-hover>
|
|
||||||
|
|
||||||
<div style="margin-left: 5vw;"></div>
|
|
||||||
|
|
||||||
<v-hover v-slot="{ isHovering, props }">
|
|
||||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
|
||||||
v-bind="props">
|
|
||||||
<v-img src="../../../images/homepage/partager.png"
|
|
||||||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
|
||||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
|
||||||
contained>
|
|
||||||
<v-container>
|
|
||||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
|
||||||
<h3 class="white--text"
|
|
||||||
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
|
||||||
PROFITER</h3>
|
|
||||||
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
|
||||||
Plongez dans l'univers Hutopy et
|
|
||||||
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques,
|
|
||||||
des
|
|
||||||
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
|
|
||||||
sens
|
|
||||||
et enrichir votre quotidien.</p>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
</v-overlay>
|
|
||||||
</v-card>
|
|
||||||
</v-hover>
|
|
||||||
|
|
||||||
<div style="margin-left: 5vw;"></div>
|
|
||||||
|
|
||||||
<v-hover v-slot="{ isHovering, props }">
|
|
||||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
|
||||||
v-bind="props">
|
|
||||||
<v-img src="../../../images/homepage/inspirer.png"
|
|
||||||
style="border-radius: 20px; width: 80vw;"></v-img>
|
|
||||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
|
||||||
contained>
|
|
||||||
<v-container>
|
|
||||||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
|
||||||
<h3 class="white--text"
|
|
||||||
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
|
||||||
INSPIRER</h3>
|
|
||||||
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
|
||||||
Devenez une source d'inspiration
|
|
||||||
sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
|
|
||||||
positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
|
|
||||||
leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
</v-overlay>
|
|
||||||
</v-card>
|
|
||||||
</v-hover>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</v-col>
|
|
||||||
<!-- vide de droite -->
|
|
||||||
<v-col cols="2" class="mr-4 mr-sm-0">
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
|
<!--Header -->
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-col cols="10" xs="12" sm="12" md="12" lg="12" xl="10" xxl="8">
|
||||||
|
<v-img class="profile-banner" src="../../../images/homepage/bannierehomepage.png"
|
||||||
|
style="border-radius: 20px;"></v-img>
|
||||||
|
</v-col>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Colonnes Créer Partager Inspirer-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Créer Profiter Inspirer -->
|
||||||
|
<v-row>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-col cols=8>
|
||||||
|
<v-row justify="center" align="center">
|
||||||
|
<v-col cols="12" sm="6" md="4">
|
||||||
|
<v-hover v-slot="{ isHovering, props }">
|
||||||
|
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" v-bind="props">
|
||||||
|
<v-img src="../../../images/homepage/creer.png"
|
||||||
|
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||||||
|
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||||
|
contained>
|
||||||
|
<v-container>
|
||||||
|
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||||
|
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">CRÉER
|
||||||
|
</h3>
|
||||||
|
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur Hutopy,
|
||||||
|
où
|
||||||
|
chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
|
||||||
|
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</v-overlay>
|
||||||
|
</v-card>
|
||||||
|
</v-hover>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12" sm="6" md="4">
|
||||||
|
<v-hover v-slot="{ isHovering, props }">
|
||||||
|
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" v-bind="props">
|
||||||
|
<v-img src="../../../images/homepage/partager.png"
|
||||||
|
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||||||
|
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||||
|
contained>
|
||||||
|
<v-container>
|
||||||
|
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||||
|
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||||||
|
PROFITER
|
||||||
|
</h3>
|
||||||
|
<p class="text-justify pa-4" style="font-size: 1.2em;">Plongez dans l'univers Hutopy et
|
||||||
|
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
|
||||||
|
interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et
|
||||||
|
enrichir votre quotidien.</p>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</v-overlay>
|
||||||
|
</v-card>
|
||||||
|
</v-hover>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12" sm="6" md="4">
|
||||||
|
<v-hover v-slot="{ isHovering, props }">
|
||||||
|
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" v-bind="props">
|
||||||
|
<v-img src="../../../images/homepage/inspirer.png"
|
||||||
|
style="border-radius: 20px; width: 80vw;"></v-img>
|
||||||
|
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||||
|
contained>
|
||||||
|
<v-container>
|
||||||
|
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||||||
|
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||||||
|
INSPIRER
|
||||||
|
</h3>
|
||||||
|
<p class="text-justify pa-4" style="font-size: 1.2em;">Devenez une source d'inspiration sur
|
||||||
|
Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez positivement
|
||||||
|
la
|
||||||
|
communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves dans un
|
||||||
|
cercle vertueux de créativité et d'inspiration.</p>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</v-overlay>
|
||||||
|
</v-card>
|
||||||
|
</v-hover>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
|
||||||
<!-- Description D'hutopy -->
|
<!-- Description D'hutopy -->
|
||||||
|
|
||||||
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
|
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
|
||||||
@@ -277,7 +252,8 @@
|
|||||||
<div>
|
<div>
|
||||||
|
|
||||||
|
|
||||||
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
|
<img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
|
||||||
|
style="margin-top: -100px;">
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
@@ -397,13 +373,13 @@
|
|||||||
<FooterLayout></FooterLayout>
|
<FooterLayout></FooterLayout>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
s
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script async setup>
|
<script async setup>
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
import {useClient} from "@/plugins/api.js";
|
import { useClient } from "@/plugins/api.js";
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user