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

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

@@ -32,33 +32,25 @@
<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-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" v-bind="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-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
@@ -73,13 +65,12 @@
</v-card>
</v-hover>
</v-col>
<v-col cols="12" sm="6" md="4">
<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" v-bind="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-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;">
@@ -95,13 +86,12 @@
</v-card>
</v-hover>
</v-col>
<v-col cols="12" sm="6" md="4">
<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" v-bind="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-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;">
@@ -120,21 +110,22 @@
</v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-container>
<!-- Votre Hutopy -->
<v-container>
<v-row justify="center">
<!-- Description D'hutopy -->
<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>
<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; ">
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
@@ -150,32 +141,48 @@
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">
<v-col cols="12" class="text-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
<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>
<!-- 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 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="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-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>