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

Amélioration de la structure de la homepage

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-09 23:33:46 -04:00
parent af3216ae82
commit 8e8b137dc1
2 changed files with 263 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/anonymelarge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

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

@@ -32,150 +32,157 @@
<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"
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
<v-img class="profile-banner banner-homepage" 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">
<v-row class="justify-center">
<v-col cols="6">
<v-col cols="11" class="d-flex justify-center align-center">
<v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col>
<v-col cols="auto" md="10">
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
la créativité.
</p>
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
prendre vie.
</p>
<v-col cols="auto" class="d-flex justify-center align-center">
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
elevation="0">
Inscription
</v-btn>
</RouterLink>
<!-- Créer Profiter Inspirer -->
<v-container>
<v-row class="d-flex justify-center creer-profiter-inspirer-row">
<v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
<v-row justify="center" align="center" class="créer-profiter-inspirer-row">
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" 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>
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " 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="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" 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>
<!-- Colonne de droite -->
<v-col cols="3">
<v-img src="../../../images/homepage/grinding.png"
style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></v-img>
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
</v-col>
<v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
<v-img src="../../../images/homepage/girlvr.png"
style="border-radius: 30px; min-width: 250px; max-height: 350;"></v-img>
</v-row>
</v-container>
<!-- Votre Hutopy -->
<v-container>
<v-row justify="center">
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="7" xxl="7">
<v-row justify="center">
<v-col cols="6" md="7" lg="6">
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
la créativité.
</p>
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
prendre vie.
</p>
<v-col cols="12" class="text-center">
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
elevation="0">
Inscription
</v-btn>
</RouterLink>
</v-col>
</v-col>
<v-col cols="6" md="5" lg="6">
<v-row justify="center">
<v-col cols="6" sm="12" md="12" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
class="hidden-md-and-down" hidden-and-down></v-img>
</v-col>
<v-col cols="6" sm="12" md="12" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
</v-col>
<v-col cols="6" sm="3" md="12" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
</v-col>
<v-col cols="6" sm="3" md="12" lg="6">
<v-img style="border-radius: 30px;" src="../../../images/homepage/girlvr.png"
class="hidden-md-and-down" hidden-and-down></v-img>
</v-col>
</v-row>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
<!-- ILS SONT SUR HUTOPY -->
<v-container style="max-width: 1500px;">
<v-card-text>
@@ -190,14 +197,11 @@
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image ">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image ">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
@@ -209,10 +213,7 @@
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
@@ -221,14 +222,11 @@
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
@@ -368,7 +366,8 @@
</v-snackbar>
<v-list style="background-color: #F4F4F4;" lines="one">
<v-list-item v-for=" item in itemList " :key="item" :title="item.firstName" :subtitle="item.lastName"></v-list-item>
<v-list-item v-for=" item in itemList " :key="item" :title="item.firstName"
:subtitle="item.lastName"></v-list-item>
</v-list>
<FooterLayout></FooterLayout>
</div>
@@ -594,45 +593,149 @@ body {
font-size: .2em;
}
@media (max-width: 475px) {
@media (max-width: 600px) {
.votre_hutopy_fontsize {
font-size: 0.55em;
}
}
@media (min-width: 476px) and (max-width: 640px) {
@media (min-width: 601px) and (max-width: 889px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
.créer-profiter-inspirer-row {
margin-left: -120px;
margin-top: -120px
}
.card-size {
transform: scale(.7);
}
.banner-homepage {
transform: scale(1.19)
}
}
@media (min-width: 641px) and (max-width: 768px) {
@media (min-width: 890px) and (max-width: 960px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
.card-size {
transform: scale(.75);
}
}
@media (min-width: 1025px) and (max-width: 1536px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
.créer-profiter-inspirer-row {
margin-left: -80px;
margin-top: -130px
}
.banner-homepage {
transform: scale(1.07)
}
}
@media (min-width: 1537px) and (max-width: 1920px) {
@media (min-width: 961px) and (max-width: 1280px) {
.votre_hutopy_fontsize {
font-size: 1.1em;
}
.banner-homepage {
transform: scale(1.06)
}
.card-size {
transform: scale(.90);
}
.créer-profiter-inspirer-row {
margin-left: -55px;
margin-top: -90px
}
.in-between-image {
margin-left: -100px;
}
}
@media (min-width: 1921px) {
@media (min-width: 1281px) and (max-width: 1920px) {
.votre_hutopy_fontsize {
font-size: 1.5em;
font-size: 1.1em;
}
.card-size {
transform: scale(1);
}
.banner-homepage {
transform: scale(1.03)
}
.créer-profiter-inspirer-row {
margin-left: -25px;
margin-top: -70px
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.votre_hutopy_fontsize {
font-size: 1.3em;
}
.créer-profiter-inspirer-row {
margin-top: -60px;
}
.banner-homepage {
transform: scale(1.0)
}
}
@media (min-width: 2561px) {
.votre_hutopy_fontsize {
font-size: 1.4em;
}
.créer-profiter-inspirer-row {
margin-top: -50px;
}
.card-size {
transform: scale(.98);
}
.banner-homepage {
transform: scale(.98)
}
}
</style>