jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Banner modification

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-08 23:57:36 -04:00
parent 9b6ad50503
commit 27b11f2b23
1 changed files with 117 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/views/main/HomeView.vue
View File

@@ -6,148 +6,123 @@
<!--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-col></v-col>
<v-col cols="5">
<v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
</v-col>
<v-col>
<v-row> <v-row>
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }"> <RouterLink :to="{ name: 'login' }">
<v-btn size="large" <v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
light elevation="0">
Connexion Connexion
</v-btn> </v-btn>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'contact' }"> <RouterLink :to="{ name: 'contact' }">
<v-btn size="large" <v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
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 Inscription
</v-btn> </v-btn>
</RouterLink> </RouterLink>
</v-row> </v-row>
</v-col>
</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-row>
</v-container> </v-container>
</div>
<!--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--> <!-- Colonnes Créer Partager Inspirer-->
<v-container>
<v-row>
<!-- vide de gauche -->
<v-col cols="1" class="ml-4 ml-sm-0">
</v-col>
<!-- Colonne Centre -->
<v-col cols="9" style="margin-left: 4%;">
<!-- Créer Profiter Inspirer --> <!-- Créer Profiter Inspirer -->
<v-row>
<div class="d-flex justify-center align-center"> <v-spacer></v-spacer>
<div> <v-col cols=8>
<div style="margin-top: 40px;"> <v-row justify="center" align="center">
<v-container class="d-flex justify-center align-center" style="width: 128vh;"> <v-col cols="12" sm="6" md="4">
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600" <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" v-bind="props">
v-bind="props">
<v-img src="../../../images/homepage/creer.png" <v-img src="../../../images/homepage/creer.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img> style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained> contained>
<v-container> <v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79"> <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;"> <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">CRÉER
CRÉER</h3> </h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur <p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur Hutopy,
Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde où
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
réalité. possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
</p>
</v-card> </v-card>
</v-container> </v-container>
</v-overlay> </v-overlay>
</v-card> </v-card>
</v-hover> </v-hover>
</v-col>
<div style="margin-left: 5vw;"></div> <v-col cols="12" sm="6" md="4">
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600" <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" v-bind="props">
v-bind="props">
<v-img src="../../../images/homepage/partager.png" <v-img src="../../../images/homepage/partager.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img> style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained> contained>
<v-container> <v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79"> <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }"> PROFITER
PROFITER</h3> </h3>
<p class="text-justify pa-4" style="font-size: 1.2em;"> <p class="text-justify pa-4" style="font-size: 1.2em;">Plongez dans l'univers Hutopy et
Plongez dans l'univers Hutopy et découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et
des enrichir votre quotidien.</p>
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
sens
et enrichir votre quotidien.</p>
</v-card> </v-card>
</v-container> </v-container>
</v-overlay> </v-overlay>
</v-card> </v-card>
</v-hover> </v-hover>
</v-col>
<div style="margin-left: 5vw;"></div> <v-col cols="12" sm="6" md="4">
<v-hover v-slot="{ isHovering, props }"> <v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600" <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" v-bind="props">
v-bind="props">
<v-img src="../../../images/homepage/inspirer.png" <v-img src="../../../images/homepage/inspirer.png"
style="border-radius: 20px; width: 80vw;"></v-img> style="border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained> contained>
<v-container> <v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79"> <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }"> INSPIRER
INSPIRER</h3> </h3>
<p class="text-justify pa-4" style="font-size: 1.2em;"> <p class="text-justify pa-4" style="font-size: 1.2em;">Devenez une source d'inspiration sur
Devenez une source d'inspiration Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez positivement
sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez la
positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves dans un
leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p> cercle vertueux de créativité et d'inspiration.</p>
</v-card> </v-card>
</v-container> </v-container>
</v-overlay> </v-overlay>
</v-card> </v-card>
</v-hover> </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-col>
<v-spacer></v-spacer>
</v-row>
<!-- Description D'hutopy --> <!-- Description D'hutopy -->
@@ -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';