Banner modification
This commit is contained in:
PascalMarchesseault
@@ -6,149 +6,124 @@
|
||||
|
||||
<!--Logo & bouttons -->
|
||||
<v-container class="d-flex justify-center align-center">
|
||||
<div style="margin-left: 20%;">
|
||||
<v-row>
|
||||
|
||||
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
|
||||
<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-row justify="center" align="center">
|
||||
<v-col></v-col>
|
||||
<v-col cols="5">
|
||||
<v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
|
||||
</v-col>
|
||||
<!-- Colonne Centre -->
|
||||
<v-col cols="9" style="margin-left: 4%;">
|
||||
|
||||
<!-- Créer Profiter Inspirer -->
|
||||
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div>
|
||||
<div style="margin-top: 40px;">
|
||||
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
|
||||
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>
|
||||
|
||||
<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-row>
|
||||
<RouterLink :to="{ name: 'login' }">
|
||||
<v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
|
||||
Connexion
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</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 -->
|
||||
|
||||
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
|
||||
@@ -277,7 +252,8 @@
|
||||
<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>
|
||||
<v-card-text>
|
||||
@@ -397,13 +373,13 @@
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
s
|
||||
|
||||
</template>
|
||||
|
||||
<script async setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user