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

CreatorFolio - Modal paiement, Homeview positionnement contenu

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-14 00:46:40 -04:00
parent 8e8b137dc1
commit 81cce3e496
3 changed files with 202 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,10 +5,10 @@
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons -->
<v-container class="d-flex justify-center align-center">
<v-container class="d-flex justify-center align-center container-spacer header-container">
<v-row justify="center" align="center">
<v-col></v-col>
<v-col cols="5">
<v-col cols="5" xl="4" xxl="4">
<v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
</v-col>
<v-col>
@@ -29,10 +29,10 @@
</v-container>
<!--Header -->
<v-container>
<v-container class="container-spacer">
<v-row>
<v-spacer></v-spacer>
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
<v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
style="border-radius: 20px;"></v-img>
</v-col>
@@ -41,9 +41,9 @@
</v-container>
<!-- Créer Profiter Inspirer -->
<v-container>
<v-container class="container-spacer">
<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-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
<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 }">
@@ -115,10 +115,9 @@
</v-container>
<!-- Votre Hutopy -->
<v-container>
<v-container class="container-spacer">
<v-row justify="center">
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="7" xxl="7">
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
<v-row justify="center">
<v-col cols="6" md="7" lg="6">
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
@@ -150,27 +149,24 @@
</v-btn>
</RouterLink>
</v-col>
</v-col>
<v-col cols="6" md="5" lg="6">
<v-row justify="center">
<v-row justify="center" class="votre-hutopy-img">
<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-col cols="6" sm="12" md="6" 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 cols="6" sm="6" md="6" lg="6">
<v-img style="border-radius: 30px;" class="d-none d-md-block"
src="../../../images/homepage/girlvr.png"></v-img>
</v-col>
</v-row>
</v-col>
@@ -181,67 +177,48 @@
<v-row style="margin-top: 40px; margin-bottom: 60px;">
<v-spacer></v-spacer>
<!-- ILS SONT SUR HUTOPY -->
<v-container style="max-width: 1500px;">
<v-card-text>
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
<h1 style=" margin-bottom: 70px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
<v-spacer></v-spacer>
<v-col>
<v-row justify="center" class="profile-images">
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image ">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
</RouterLink>
</v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-container>
</v-card-text>
</v-container>
<!-- Fin Description D'hutopy -->
</div>
@@ -411,116 +388,37 @@ const goToLoginPage = () => {
<style src="../../cssstyle/homeView.css"></style>
<style scoped>
.phototexte {
margin-left: 10px;
margin-right: 10px;
}
.layer1-background {
background-color: rgba(163, 14, 121, 0.03);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.layer1-backgroundmobile {
background-color: rgba(163, 14, 121, 0.1);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.layer2-backgroundmobile {
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.layer2-background {
background-color: rgba(107, 0, 101, 0.02);
border-radius: 20px;
}
.v-container {
.container-spacer {
margin-bottom: 50px;
/* Augmente l'espace entre les v-containers */
}
.h2ilssontsurutopy {
font-weight: bold;
font-size: 2rem;
margin-bottom: 100px;
/* Ajoute de l'espace en bas du titre */
margin-top: 25px;
}
.h2ilssontsurutopytitle {
color: rgba(107, 0, 101, 0.85);
}
.profile-images {
gap: 90px;
/* Espace entre les images */
margin-top: 50px;
/* Ajoute de l'espace en haut des images */
gap: 15px;
transform: scale(.92);
}
.profile-image {
width: auto;
/* Largeur des images */
/* Hauteur des images */
border-radius: 35px;
/* Coins arrondis */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
.image-wrapper {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 30px;
}
.image-container {
position: relative;
width: 23vw;
/* Utilisation de 20% de la largeur de la vue */
margin: 5px 8px;
}
.image {
width: 100%;
height: auto;
border-radius: 8px;
}
.v-card-text h2 {
margin-bottom: 20px;
/* Ajoute de l'espace en bas du titre h2 */
font-size: 2rem;
/* Taille du texte */
font-weight: bold;
/* Texte en gras */
color: rgba(163, 14, 121, 0.85);
/* Couleur du texte (utilisez la couleur souhaitée) */
}
.v-card-text p {
font-size: 1rem;
/* Taille du texte */
}
.textjustify {
text-align: justify;
}
.overlay {
@@ -535,17 +433,13 @@ const goToLoginPage = () => {
display: flex;
text-align: left;
font-size: 1.5rem;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.banner-image {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
/* Ombre douce */
}
.image-container:hover .overlay {
@@ -562,8 +456,6 @@ const goToLoginPage = () => {
position: relative;
max-width: 100vw;
/* Limiter la largeur de la v-container à la largeur de l'écran */
}
.v-card {
@@ -577,21 +469,11 @@ const goToLoginPage = () => {
border-radius: 8px;
}
.overlay p.image-text {
display: none;
}
.overlay:hover p.image-text {
display: block;
}
body {
background-color: #F4F4F4;
}
.votre_hutopy_fontsize {
font-size: .2em;
}
@media (max-width: 600px) {
.votre_hutopy_fontsize {
@@ -602,10 +484,9 @@ body {
@media (min-width: 601px) and (max-width: 889px) {
.votre_hutopy_fontsize {
font-size: 0.9em;
font-size: 1.06em;
}
.créer-profiter-inspirer-row {
margin-left: -120px;
margin-top: -120px
@@ -613,26 +494,34 @@ body {
.card-size {
transform: scale(.7);
}
.banner-homepage {
transform: scale(1.19)
}
.votre-hutopy-img {
margin-top: -30px;
}
.header-container {
margin-top: 30px;
}
}
@media (min-width: 890px) and (max-width: 960px) {
.header-container {
margin-top: 30px;
}
.votre_hutopy_fontsize {
font-size: 0.9em;
font-size: 1.2em;
}
.card-size {
transform: scale(.75);
}
.créer-profiter-inspirer-row {
@@ -644,10 +533,12 @@ body {
transform: scale(1.07)
}
.votre-hutopy-img {
margin-top: -40px;
}
}
@media (min-width: 961px) and (max-width: 1280px) {
.votre_hutopy_fontsize {
font-size: 1.1em;
@@ -659,7 +550,6 @@ body {
.card-size {
transform: scale(.90);
}
.créer-profiter-inspirer-row {
@@ -669,23 +559,28 @@ body {
.in-between-image {
margin-left: -100px;
}
.profile-images {
gap: 15px;
transform: scale(.72);
}
.votre-hutopy-img {
margin-top: -30px;
}
}
@media (min-width: 1281px) and (max-width: 1920px) {
.votre_hutopy_fontsize {
font-size: 1.1em;
font-size: 1.2em;
}
.card-size {
transform: scale(1);
}
.banner-homepage {
transform: scale(1.03)
}
@@ -695,11 +590,19 @@ body {
margin-top: -70px
}
.profile-images {
gap: 15px;
transform: scale(.64);
}
.votre-hutopy-img {
margin-top: 65px;
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.votre_hutopy_fontsize {
font-size: 1.3em;
font-size: 1.2em;
}
.créer-profiter-inspirer-row {
@@ -713,29 +616,42 @@ body {
transform: scale(1.0)
}
.profile-images {
gap: 15px;
transform: scale(.90);
}
.votre-hutopy-img {
margin-top: 65px;
}
}
@media (min-width: 2561px) {
.votre_hutopy_fontsize {
font-size: 1.4em;
font-size: 1.2em;
}
.créer-profiter-inspirer-row {
margin-top: -50px;
}
.card-size {
transform: scale(.98);
}
.banner-homepage {
transform: scale(.98)
}
.profile-images {
gap: 15px;
transform: scale(.978);
}
.votre-hutopy-img {
margin-top: -10px;
}
}
</style>