Structure de base en place - Ce soir et vendredi soir, je vais nettoyer mes css.
This commit is contained in:
PascalMarchesseault
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 MiB After Width: | Height: | Size: 3.5 MiB |
BIN
images/guillaumepublication.jpg
Normal file
BIN
images/guillaumepublication.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 406 KiB After Width: | Height: | Size: 143 KiB |
BIN
images/roadmapbanner.png
Normal file
BIN
images/roadmapbanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
BIN
images/world.png
BIN
images/world.png
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 MiB After Width: | Height: | Size: 3.1 MiB |
@@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
/* CSS pour ajuster la taille de l'image */
|
||||
.img-small {
|
||||
width: 70px;
|
||||
@@ -38,7 +36,7 @@
|
||||
/* Centrer les éléments verticalement */
|
||||
flex: 1;
|
||||
/* Utiliser tout l'espace disponible */
|
||||
margin-right:8%
|
||||
margin-right: 8%
|
||||
}
|
||||
|
||||
/* CSS pour le texte du menu-right */
|
||||
@@ -66,8 +64,10 @@
|
||||
}
|
||||
|
||||
.profilePicture {
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||||
/* Ajouter une ombre à la photo */
|
||||
border: 2px solid #a30e79;
|
||||
/* Ajouter une bordure de 2px solide de couleur rouge (#f00) */
|
||||
}
|
||||
|
||||
.bg-customdarker {
|
||||
@@ -85,29 +85,28 @@
|
||||
}
|
||||
|
||||
.center-column {
|
||||
flex: 3; /* La colonne centrale occupe 3 fois plus d'espace que les autres */
|
||||
flex: 3;
|
||||
/* La colonne centrale occupe 3 fois plus d'espace que les autres */
|
||||
}
|
||||
|
||||
|
||||
.colum-aligncenter
|
||||
{
|
||||
.colum-aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-center a:nth-child(1):hover svg {
|
||||
color: rgba(163, 14, 121, 1); /* Changer la couleur en rouge au survol */
|
||||
color: rgba(163, 14, 121, 1);
|
||||
/* Changer la couleur en rouge au survol */
|
||||
}
|
||||
|
||||
/* Pour le deuxième bouton */
|
||||
.menu-center a:nth-child(2):hover svg {
|
||||
color: rgba(163, 14, 121, 1); /* Changer la couleur en bleu au survol */
|
||||
color: rgba(163, 14, 121, 1);
|
||||
/* Changer la couleur en bleu au survol */
|
||||
}
|
||||
|
||||
/* Pour le troisième bouton */
|
||||
.menu-center a:nth-child(3):hover svg {
|
||||
color: rgba(163, 14, 121, 1); /* Changer la couleur en vert au survol */
|
||||
color: rgba(163, 14, 121, 1);
|
||||
/* Changer la couleur en vert au survol */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
41
src/layouts/CardDonate.vue
Normal file
41
src/layouts/CardDonate.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container class=" footer-donate-container">
|
||||
|
||||
<h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
|
||||
|
||||
|
||||
<v-text-field label="Montant"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
|
||||
<v-text-field label="Message"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
|
||||
<v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
|
||||
size="x-large" block>Faire un don</v-btn>
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.footer-donate-container {
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
}
|
||||
</style>
|
||||
164
src/layouts/CreatorHeader.vue
Normal file
164
src/layouts/CreatorHeader.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="md:flex hidden items-center justify-between">
|
||||
<v-container>
|
||||
|
||||
|
||||
<div class="banner-container">
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
|
||||
style="margin-bottom: -80px;">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="banner-container ">
|
||||
<img src="../../../images/guillaume.png" class="profile-picture">
|
||||
<img src="../../../images/checkprofile.png" class="check-profile" style="margin-top: 5px;">
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px; text-align: center;">
|
||||
<v-container class="label-creator">
|
||||
<v-row justify="center">
|
||||
|
||||
<v-card style="width: 470px; margin-top: 10px;">
|
||||
<v-card-title class="card-background label-creator-texte-color">Guillaume
|
||||
Mousseau</v-card-title>
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-card style="width: 470px; margin-top: 10px;">
|
||||
<v-card-title class="card-background label-creator-texte-color">Créateur de
|
||||
contenus</v-card-title>
|
||||
</v-card>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<div style="margin-top: -100px;">
|
||||
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator" style="margin-top: 10;">
|
||||
|
||||
|
||||
|
||||
<div class="banner-container ">
|
||||
<img src="../../../images/guillaume.png" class="profile-picture-mobile">
|
||||
<img src="../../../images/checkprofile.png" class="check-profile-mobile" style="margin-top: 5px;">
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 150px; text-align: right;">
|
||||
<v-container class="label-creator" style="width: 105%;">
|
||||
<v-row justify="center">
|
||||
|
||||
<v-card style="width: 350px; margin-top: 5%; margin-left: 10%;">
|
||||
<v-card-title class="card-background2 label-creator-texte-color">Guillaume
|
||||
Mousseau</v-card-title>
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-card style="width: 350px; margin-top: 1%; margin-left: 10%;">
|
||||
<v-card-title class="card-background label-creator-texte-color">Créateur de
|
||||
contenus</v-card-title>
|
||||
</v-card>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style>
|
||||
.banner-creator {
|
||||
align-items: center;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.smooth-picture {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: -20px;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(163, 14, 121, 0.5);
|
||||
}
|
||||
|
||||
.profile-picture-mobile {
|
||||
border-radius: 50%;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
margin-top: 420px;
|
||||
margin-left: -230px;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(163, 14, 121, 0.5);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.check-profile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
margin-top: -90px;
|
||||
margin-left: 160px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.check-profile-mobile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
margin-top: -90px;
|
||||
margin-left: -80px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.label-creator-texte-color {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-creator {
|
||||
margin-right: 43px;
|
||||
margin-top: -160px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
/* Valeur inférieure pour placer derrière */
|
||||
}
|
||||
|
||||
|
||||
.card-background2 {
|
||||
background-color: rgba(163, 14, 121, 1);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-background {
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -9,7 +9,7 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="menu-center flex items-center justify-center space-x-12">
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
@@ -17,8 +17,8 @@
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
|
||||
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
@@ -26,8 +26,8 @@
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
|
||||
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
@@ -35,12 +35,16 @@
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</router-link>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="menu-right">
|
||||
<router-link :to="{ name: 'yourprofile' }">
|
||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,6 +54,8 @@
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container style="margin-top: -20px;">
|
||||
<v-row>
|
||||
|
||||
|
||||
<v-col cols="auto">
|
||||
<!-- Logo -->
|
||||
<router-link :to="{ name: 'home' }">
|
||||
@@ -60,7 +66,7 @@
|
||||
<v-col cols="auto">
|
||||
<!-- Photo de profil -->
|
||||
<router-link :to="{ name: 'yourprofile' }" class="text-green-700">
|
||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
@@ -69,6 +75,7 @@
|
||||
|
||||
<v-container class="text-center" style="margin-top: -30px;">
|
||||
<v-row class="justify-center">
|
||||
|
||||
<!-- Premier lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
@@ -98,8 +105,13 @@
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
|
||||
|
||||
</v-row>
|
||||
|
||||
@@ -26,6 +26,10 @@
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy</strong>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container class="custom-footer">
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -39,7 +43,7 @@ export default {
|
||||
'Conditions générales',
|
||||
'Politique des contenus',
|
||||
'Programme Ambassadeurs',
|
||||
'conditions_utilisation',
|
||||
'conditions utilisation',
|
||||
'anti-exploitation',
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<div class="md:flex hidden justify-between flex-col">
|
||||
<div>
|
||||
<H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
|
||||
<h1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -15,26 +15,25 @@
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
|
||||
<div>
|
||||
<H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-text-field label="First name"
|
||||
<div class="md:hidden flex flex-col justify-center">
|
||||
<div>
|
||||
<h1 class="h1-inscription-beta-Inscrivez-vous">Inscrivez-vous</h1>
|
||||
</div>
|
||||
<div style="margin-left: -45%; margin-right: -45%;">
|
||||
<v-text-field label="First name" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="Last name"
|
||||
<v-text-field label="Last name" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="E-mail"
|
||||
<v-text-field label="E-mail" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-textarea label="Pourquoi voulez-vous participer?"
|
||||
<v-textarea label="Pourquoi voulez-vous participer?" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
36
src/layouts/SimpleVideoCard.vue
Normal file
36
src/layouts/SimpleVideoCard.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<v-card class="vcard-descriptions-mobile" style="margin-top: 30px;">
|
||||
|
||||
<h1 class="h1profilemobile">Podcast #01</h1>
|
||||
|
||||
|
||||
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
|
||||
<iframe width="420" height="315" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
|
||||
</iframe>
|
||||
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">
|
||||
Voici mon nouveau podcast!
|
||||
|
||||
</p>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.vcard-descriptions-mobile {
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6);
|
||||
|
||||
}
|
||||
|
||||
.h1profilemobile {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.card-date {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,7 @@ import LoginView from '../views/LoginView.vue'
|
||||
import ContactView from '../views/main/ContactView.vue'
|
||||
import CreatorFolio from '../views/main/CreatorFolio.vue'
|
||||
import YourProfile from '../views/main/YourProfile.vue'
|
||||
import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
@@ -38,6 +39,11 @@ const router = createRouter({
|
||||
name: 'login',
|
||||
component: LoginView
|
||||
},
|
||||
{
|
||||
path: '/roadmap',
|
||||
name: 'roadmap',
|
||||
component: ProjectRoadmap
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
@@ -7,16 +7,20 @@
|
||||
|
||||
<div class="column"></div>
|
||||
<div class="center-column" style="width: 70vw; margin: auto;">
|
||||
<h1 class="h1-inscription-beta">Participez au développement de </h1>
|
||||
<h1 class="h1-inscription-betacolor">Hutopy</h1>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rectangular-image h-full flex justify-center items-center">
|
||||
<img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture">
|
||||
|
||||
<img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture" style="float: right;">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h1-inscription-betacolor">Hutopy</h1>
|
||||
<h1 class="h1-inscription-beta">Participez au développement de </h1>
|
||||
|
||||
<p class="para-inscription">
|
||||
|
||||
|
||||
<p class="para-inscription" style="font-size: 1.4rem;">
|
||||
Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
|
||||
nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
|
||||
passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
|
||||
@@ -41,7 +45,7 @@
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
|
||||
<h1 class="h1-inscription-beta">Participez au développement de </h1>
|
||||
|
||||
|
||||
|
||||
<div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
|
||||
@@ -80,7 +84,9 @@ import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
|
||||
|
||||
<style scoped>
|
||||
.contactpicture {
|
||||
margin-top: 15px;
|
||||
height: 800px;
|
||||
width: auto;
|
||||
|
||||
/* ajustez cette valeur selon votre besoin */
|
||||
margin-bottom: 45px;
|
||||
border-radius: 12px;
|
||||
|
||||
@@ -1,263 +0,0 @@
|
||||
<template>
|
||||
|
||||
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<v-container>
|
||||
|
||||
<div class="banner-container">
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture" style="margin-bottom: -80px;">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="banner-container ">
|
||||
<img src="../../../images/guillaume.png" class="profile-picture">
|
||||
<img src="../../../images/checkprofile.png" class="check-profile" style="margin-top: 5px;">
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px;">
|
||||
<v-container class="label-creator" >
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="2" md="3" class="d-flex justify-center">
|
||||
<v-card style="width: 425px;">
|
||||
<v-card-title class="card-background text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="4" md="3" class="d-flex justify-center">
|
||||
<v-card style="width: 425px;">
|
||||
<v-card-title class="card-background text-center label-creator-texte-color">Créateur de contenus</v-card-title>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container fluid class="menu-creator-position">
|
||||
<v-row>
|
||||
<v-col cols="3" class="d-flex justify-end">
|
||||
<!-- Menu à gauche -->
|
||||
<v-card class="label-paiement-color" style="min-width: 300px; max-width: 75%; max-width: 300px;">
|
||||
<v-card-text>
|
||||
Menu gauche
|
||||
<v-row>
|
||||
<v-col class="" cols="6">
|
||||
<v-switch :model-value="true" color="primary" label="on"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6" class="d-flex justify-center">
|
||||
<!-- Contenu centré -->
|
||||
<v-card class="flow-menu" style="max-width: 80; max-width: 1200px;">
|
||||
<v-card-text class="color">
|
||||
Contenu centré
|
||||
<v-container>
|
||||
<p>AESDAWDAESDAWDAESDAWDAESDAWD
|
||||
AESDAWDAESDAWDAESDAWDAESDAWD
|
||||
...
|
||||
|
||||
...
|
||||
sssAESDAWDAESDAWDAESDAWDAESDAWD
|
||||
sss AESDAWDAESDAWDAESDAWDAESDAWD
|
||||
...
|
||||
|
||||
...
|
||||
sssAESDAWDAESDAWDAESDAWDAESDAWD
|
||||
sss
|
||||
</p>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
|
||||
<v-col cols="3">
|
||||
<!-- Menu à droite -->
|
||||
<v-card class="label-paiement-color" style="max-width: 75%; max-width: 350px;">
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<H1 class="tips-h1">ENCOURAGEZ-MOI</H1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-sheet class="mx-auto" width="250">
|
||||
<v-form @submit.prevent>
|
||||
<v-text-field label="Montant ($)" style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="Message" style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>Envoyez</v-btn>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sticky-column {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.profile-picture-position{
|
||||
margin-top: 25;
|
||||
}
|
||||
|
||||
.label-paiement-color{
|
||||
color: rgba(163, 14, 121, 0.85); /* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
background-color: rgba(255, 255, 255, 0.2); /* Couleur de fond */
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4); /* Ombre */
|
||||
|
||||
}
|
||||
|
||||
.tips-h1{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: rgba(163, 14, 121, 0.85); /* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.test-color{
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
}
|
||||
|
||||
.check-profile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: -90px;
|
||||
margin-left: 140px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.label-tips
|
||||
{
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.label-creator-texte-color {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-creator-position {
|
||||
margin-top: -25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label-creator {
|
||||
margin-right: 43px;
|
||||
margin-top: -160px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
/* Valeur inférieure pour placer derrière */
|
||||
}
|
||||
|
||||
.card-background {
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.flow-menu {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-creator {
|
||||
align-items: center;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: -100px;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(163, 14, 121, 0.5);
|
||||
}
|
||||
|
||||
.smooth-picture {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.column-creatorFolio {
|
||||
flex-grow: 1.2;
|
||||
/* La colonne centrale peut agrandir de 20% */
|
||||
flex-shrink: 0;
|
||||
/* Empêche la colonne centrale de rétrécir */
|
||||
flex-basis: auto;
|
||||
/* La colonne centrale prend sa taille de base */
|
||||
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column-creatorFolio-side {
|
||||
flex-grow: 0;
|
||||
/* Les colonnes latérales ne peuvent pas agrandir */
|
||||
flex-shrink: 0;
|
||||
/* Empêche les colonnes latérales de rétrécir */
|
||||
flex-basis: 200px;
|
||||
/* Largeur fixe pour les colonnes latérales */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rgb-background {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.top-aligned-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.center-column {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,130 +1,181 @@
|
||||
<template>
|
||||
|
||||
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<CreatorHeader></CreatorHeader>
|
||||
|
||||
<h1>Dashboard</h1>
|
||||
<!-- PC-->
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
|
||||
<v-container fluid class="menu-creator-position donate-menu">
|
||||
<v-row>
|
||||
<v-col cols="3" class="d-flex" style="justify-content: end;">
|
||||
<!-- Menu à gauche -->
|
||||
<v-card class="label-paiement-color"
|
||||
style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<div class="d-flex flex-colum flex-md-row justify-space-between">
|
||||
<div
|
||||
class="w-100 pa-4 rounded-lg elevation-2"
|
||||
>
|
||||
TEST
|
||||
</div>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="tips-h1">ENCOURAGEZ-MOI</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-sheet class="mx-auto" width="250">
|
||||
<v-form @submit.prevent>
|
||||
<v-text-field label="Montant ($)"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="Message"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4" block>Envoyez</v-btn>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
<!-- Center -->
|
||||
<v-col cols="6" class="d-flex flex-column justify-center" style="max-width: 1400px;">
|
||||
<!-- Premier composant -->
|
||||
<v-card class="flow-menu"
|
||||
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
|
||||
<v-card-text class="color">
|
||||
<v-container>
|
||||
<h1 style="margin-top: 25px;" class="h1profilemobile">MA MISSION</h1>
|
||||
<h1 class="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024
|
||||
</h1>
|
||||
<v-img src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le
|
||||
côté
|
||||
humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion,
|
||||
d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions
|
||||
authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque
|
||||
entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi,
|
||||
quel
|
||||
est ton objectif pour cette année?</p>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<div
|
||||
class="w-100 pa-4 rounded-lg elevation-2"
|
||||
>
|
||||
TEST
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Deuxième composant -->
|
||||
<v-card class="flow-menu" style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto;">
|
||||
<h1 style="margin-top: 25px;" class="h1profilemobile">PODCAST #01</h1>
|
||||
<h1 class="card-date" style="align-items: center; margin-bottom: 4%; text-align: right; margin-right: 5%;">
|
||||
10-03-2024 </h1>
|
||||
<v-container style="height: 700px;">
|
||||
<iframe width="100%" height="100%"
|
||||
src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
<v-layout column justify-center align-center>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px;">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">Voici mon nouveau podcast!</p>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px;">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center"> <!-- Centrage horizontal -->
|
||||
<v-col cols="12" sm="6"> <!-- Taille de la colonne pour occuper la moitié de la largeur en plein écran -->
|
||||
<div class="banner-container" style="width: 100%; max-width: 50vw; margin: auto;">
|
||||
<!-- Utilisation de margin: auto; pour centrer -->
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
|
||||
style="width: 100%; margin-bottom: -80px;">
|
||||
</div>
|
||||
<v-col cols="3" class="d-flex justify-end">
|
||||
<!-- Menu à droite -->
|
||||
<!-- Ajoutez ici votre menu de droite -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="banner-container">
|
||||
<img src="../../../images/guillaume.png" class="profile-picture">
|
||||
<img src="../../../images/checkprofile.png" class="check-profile">
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<v-container class="label-creator">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="2" md="3" class="d-flex justify-center"></v-col>
|
||||
<v-col cols="12" sm="4" md="3" class="d-flex justify-center"></v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<!-- DonateMobile-->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
|
||||
<v-container style="width: 105%;">
|
||||
<v-card class="vcard-descriptions-mobile">
|
||||
<h1 class="h1profilemobile">Ma mission</h1>
|
||||
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
|
||||
|
||||
<v-img src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le côté humain
|
||||
des entrepreneurs. Chaque
|
||||
service,
|
||||
chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif
|
||||
est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs
|
||||
et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui
|
||||
méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?</p>
|
||||
|
||||
</v-card>
|
||||
|
||||
<SimpleVideoCard> </SimpleVideoCard>
|
||||
|
||||
|
||||
|
||||
</v-container>
|
||||
|
||||
<v-layout column justify-center align-center>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 460px;">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 20px">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
|
||||
|
||||
<h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
|
||||
|
||||
|
||||
|
||||
<v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
|
||||
don</v-btn>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import CreatorHeader from '@/layouts/CreatorHeader.vue';
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
|
||||
|
||||
const { name } = useDisplay()
|
||||
|
||||
const height = computed(() => {
|
||||
// name is reactive and
|
||||
// must use .value
|
||||
switch (name.value) {
|
||||
case 'xs': return 220
|
||||
case 'sm': return 400
|
||||
case 'md': return 500
|
||||
case 'lg': return 600
|
||||
case 'xl': return 800
|
||||
case 'xxl': return 1200
|
||||
}
|
||||
|
||||
return undefined
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayMenu: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sticky-column {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.profile-picture-position {
|
||||
@@ -141,6 +192,8 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tips-h1 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@@ -153,42 +206,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
}
|
||||
|
||||
.check-profile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: -20px;
|
||||
margin-left: 140px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
/* Placez les levels derrière la photo de profil */
|
||||
}
|
||||
|
||||
.label-tips {
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.label-creator-texte-color {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.menu-creator-position {
|
||||
margin-top: -25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label-creator {
|
||||
margin-right: 43px;
|
||||
margin-top: -160px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
/* Placez les levels derrière la photo de profil */
|
||||
/* Valeur inférieure pour placer derrière */
|
||||
}
|
||||
|
||||
.card-background {
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
.flow-menu {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
@@ -196,27 +227,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-creator {
|
||||
align-items: center;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(163, 14, 121, 0.5);
|
||||
z-index: 1;
|
||||
/* Assurez-vous que la photo de profil est au-dessus des autres éléments */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
<!-- Colonnes -->
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="2" class="ml-4 ml-sm-0">
|
||||
<v-col cols="1" class="ml-4 ml-sm-0">
|
||||
<!-- vide de gauche -->
|
||||
</v-col>
|
||||
|
||||
<v-col cols="8">
|
||||
<v-col cols="9" style="margin-left: 3%;">
|
||||
|
||||
|
||||
|
||||
@@ -28,8 +28,11 @@
|
||||
<v-col cols="6">
|
||||
<v-card-text>
|
||||
<div>
|
||||
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
|
||||
<p class="textjustify">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
|
||||
<h2 style="margin-top: 30px; margin-bottom: 70px; font-size: 50px; text-align: center;">C'EST QUOI
|
||||
HUTOPY</h2>
|
||||
<p class="textjustify" style="margin-bottom: 75px; font-size: 1.5em;">Découvrez Hutopy, une
|
||||
plateforme révolutionnaire
|
||||
conçue pour célébrer
|
||||
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
|
||||
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
|
||||
par son engagement envers une expérience numérique enrichissante, offrant une interface
|
||||
@@ -44,17 +47,19 @@
|
||||
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
|
||||
</div>
|
||||
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
<v-col cols="6" class="mt-auto">
|
||||
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"
|
||||
style="margin-bottom: 25px;"></v-img>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
|
||||
<v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
|
||||
block>
|
||||
CONNECTEZ-VOUS
|
||||
</v-btn>
|
||||
</router-link>
|
||||
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
<v-col cols="6" class="mt-auto">
|
||||
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"
|
||||
style="margin-bottom: 5px;"></v-img>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
@@ -64,85 +69,85 @@
|
||||
|
||||
<!-- Créer Profiter Inspirer -->
|
||||
|
||||
<div style="margin-top: 30px;">
|
||||
<v-container class="d-flex">
|
||||
<v-container style="margin-top: 35px;" class="flex-grow-1">
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div>
|
||||
<div style="margin-top: 30px;">
|
||||
<v-container class="d-flex ">
|
||||
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card class="mx-auto" max-width="344" v-bind="props">
|
||||
<v-img src="../../../images/creer.png"></v-img>
|
||||
<v-card class=" mx-auto" max-width="400" v-bind="props">
|
||||
<v-img src="../../../images/creer.png" style="min-width: 344px;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
|
||||
<v-card class="mx-auto" max-width="400" 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-10" style="font-size: 1em;">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>
|
||||
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>
|
||||
</v-container>
|
||||
|
||||
<v-space style="margin-left: 30px;"></v-space>
|
||||
|
||||
<v-container style="margin-top: 35px;" class="flex-grow-1 ">
|
||||
<div>
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card class="mx-auto" max-width="344" v-bind="props">
|
||||
<v-img src="../../../images/profitez.png"></v-img>
|
||||
<v-card class="mx-auto" max-width="400" v-bind="props">
|
||||
<v-img src="../../../images/profitez.png" style="min-width: 344px;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
|
||||
<v-card class="mx-auto" max-width="400" 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-10" style="">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>
|
||||
<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>
|
||||
</v-container>
|
||||
|
||||
<v-space style="margin-left: 30px;"> </v-space>
|
||||
|
||||
|
||||
|
||||
<v-container style="margin-top: 35px;" class="flex-grow-1">
|
||||
<div>
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card class="mx-auto" max-width="344" v-bind="props">
|
||||
<v-img src="../../../images/inspirer.png"></v-img>
|
||||
<v-card class="mx-auto" max-width="400" v-bind="props">
|
||||
<v-img src="../../../images/inspirer.png" style="min-width: 344px;"></v-img>
|
||||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
|
||||
contained>
|
||||
<v-container>
|
||||
<v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
|
||||
<v-card class="mx-auto" max-width="400" 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-10" style="">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
|
||||
<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>
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ILS SONT SUR HUTOPY -->
|
||||
<v-container>
|
||||
@@ -262,7 +267,8 @@
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center" style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
|
||||
<div class="d-flex justify-content-center"
|
||||
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
|
||||
|
||||
43
src/views/main/ProjectRoadmap.vue
Normal file
43
src/views/main/ProjectRoadmap.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<v-container>
|
||||
<v-img class="roadmap-image" src="../../../images/roadmapbanner.png"></v-img>
|
||||
|
||||
</v-container>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.footer-donate {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.footer-donate-container {
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
}
|
||||
|
||||
.roadmap-image {
|
||||
border-radius: 35px;
|
||||
width: 50%;
|
||||
/* reduces width by 50% */
|
||||
height: auto;
|
||||
/* maintains aspect ratio */
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user