Updated UI
This commit is contained in:
PascalMarchesseault
@@ -1,88 +1,99 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<v-container class="image-container" style="margin-top: -6%;">
|
||||
<img src="../../../images/guillaimeaime2x.png" alt="" class="image-banner">
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<img src="../../../images/guillaume.png" class="image-profile">
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- PC-->
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
|
||||
<!-- Banner + Profile-->
|
||||
<div style="margin-top: -1.6%;">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
|
||||
style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
|
||||
|
||||
|
||||
<v-container fluid class="menu-creator-position donate-menu">
|
||||
<v-row class="d-flex justify-center"> <!-- Centrer les rangées -->
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Center -->
|
||||
<v-col cols="6" class="d-flex flex-column justify-center" style="max-width: 1400px;">
|
||||
<!-- Premier composant -->
|
||||
<v-card class="label-paiement-color"
|
||||
style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-container class="pa-0">
|
||||
<v-row no-gutters class="justify-center">
|
||||
<!-- Left menu -->
|
||||
<v-col cols="2" class="mx-0">
|
||||
<v-container style="position: sticky; top: 0;">
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
|
||||
style="margin-bottom: 6%; margin-top: 10%; height: 150px;" class="mx-auto"></v-img>
|
||||
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
|
||||
Accueil
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
|
||||
<v-icon left class="icon-size">mdi-account-plus</v-icon>
|
||||
Ajouter des amis
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -75%;">mdi-newspaper</v-icon>
|
||||
Contenu
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
<!-- center menu -->
|
||||
|
||||
<v-col cols="7" class="mx-0">
|
||||
|
||||
|
||||
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
|
||||
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="card-header"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center"
|
||||
style="color: rgb(255, 255, 255); margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
MA MISSION</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<h1 style=" color: rgb(255, 255, 255);margin-top: 5%; margin-left: 10%;" class="card-date text-left">
|
||||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||||
10-03-2024</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-right: 1%;" class="text-right">
|
||||
<v-col style="margin-right: 4%;" class="text-right">
|
||||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||||
style="color: rgb(163, 14, 121);">mdi-pencil</v-icon></v-btn>
|
||||
style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
|
||||
<v-container>
|
||||
|
||||
<v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
<iframe width=100% height="650px" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
|
||||
</iframe>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; 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
|
||||
@@ -91,105 +102,233 @@
|
||||
comprises. Et toi, quel est ton objectif pour cette année?</p>
|
||||
|
||||
<div
|
||||
style="margin-bottom: 5%; background-color: rgba(163, 14, 121, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 3px; width: 100%; margin-top: 20px;"></div>
|
||||
<v-row>
|
||||
<v-row class="fill-height">
|
||||
<!-- Bouton Like -->
|
||||
<v-col cols="3" class="text-center" style="margin-left: 3%;">
|
||||
<v-btn size="x-large" style="width: 500;" elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||||
Aime
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Dislike -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
|
||||
Je n'aime pas
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Partager -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0">
|
||||
<v-icon left class="icon-size">mdi-share-variant</v-icon>
|
||||
Partagez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Champ Commentaire -->
|
||||
|
||||
<v-text-field style="margin-left: 2%;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
|
||||
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="card-header"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center"
|
||||
style="color: rgb(255, 255, 255); margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
PODCAST #01</h1>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
MA MISSION</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<h1 style=" color: rgb(255, 255, 255);margin-top: 5%; margin-left: 10%;" class="card-date text-left">
|
||||
16-03-2024</h1>
|
||||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||||
10-03-2024</h1>
|
||||
</v-col>
|
||||
|
||||
<v-col style="margin-right: 1%;" class="text-right">
|
||||
<v-col style="margin-right: 4%;" class="text-right">
|
||||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||||
style="color: rgb(163, 14, 121);">mdi-pencil</v-icon></v-btn>
|
||||
style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
|
||||
<v-container>
|
||||
<v-container style="height: 700px; margin-top: -3%;">
|
||||
<iframe width="100%" height="100%"
|
||||
src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
|
||||
</v-container>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-top: -5%; 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
|
||||
<v-img
|
||||
style="margin-top: -2%; border-top: 6px solid rgb(107, 0, 101); border-bottom: 6px solid rgb(163, 14, 121);"
|
||||
src="../../../images/guillaumepublication.jpg"></v-img>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; 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>
|
||||
|
||||
<div
|
||||
style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<v-row>
|
||||
<v-row class="fill-height">
|
||||
<!-- Bouton Like -->
|
||||
<v-col cols="3" class="text-center" style="margin-left: 3%;">
|
||||
<v-btn size="x-large" style="width: 500;" elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||||
Aime
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Dislike -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
|
||||
<v-icon left class="icon-size">mdi-thumb-down</v-icon>
|
||||
Je n'aime pas
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<!-- Bouton Partager -->
|
||||
<v-col cols="3" class="text-center">
|
||||
<v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0">
|
||||
<v-icon left class="icon-size">mdi-share-variant</v-icon>
|
||||
Partagez
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Champ Commentaire -->
|
||||
|
||||
<v-text-field style="margin-left: 2%;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Right menu -->
|
||||
<v-col cols="2" class="mx-0">
|
||||
|
||||
<!-- Profile menu -->
|
||||
<v-card
|
||||
style="margin-top: -25%; border-top-left-radius: 25px; border-top-right-radius: 25px; height: auto; max-height: 400; min-width: 200; min-height: 325; position: sticky; top: 0;">
|
||||
|
||||
<v-container class="text-center" style="background-color: #6b0065; margin-bottom: -10px;">
|
||||
<h1 style="font-size:3rem; color: white;">
|
||||
Je soutiens!
|
||||
</h1>
|
||||
</v-container>
|
||||
|
||||
<v-img src="../../../images/guillaume.jpg"></v-img>
|
||||
|
||||
<v-container style="background-color: #6b0065; margin-bottom: -1px">
|
||||
<h1 style="font-size:1.5rem; color: white;">Guillaume Mousseau</h1>
|
||||
</v-container>
|
||||
|
||||
<v-container style="background-color: #a30e79;">
|
||||
<h1 style="font-size:1.5rem; color: white;">Créateur de contenus</h1>
|
||||
</v-container>
|
||||
|
||||
<v-expansion-panels style="margin-top: -50px;">
|
||||
<v-expansion-panel
|
||||
text="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?"
|
||||
title="À propos"></v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
|
||||
<v-row style="margin-top: 20px;">
|
||||
<v-col cols="6">
|
||||
<v-sheet class="mx-auto" width="150">
|
||||
<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-form>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-btn
|
||||
style=" margin-left: -15px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4" block>Envoyez</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Votre message" placeholder="Écrivez votre message ici"
|
||||
rows="3" auto-grow></v-textarea>
|
||||
</v-row>
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center" style="margin-top: 10px;">
|
||||
<router-link to="lien_facebook" class="mr-13">
|
||||
<img src="../../../images/facebook.svg" alt="Facebook" width="40">
|
||||
</router-link>
|
||||
<router-link to="lien_tiktok" class="mr-13">
|
||||
<img src="../../../images/tiktok.svg" alt="TikTok" width="40">
|
||||
</router-link>
|
||||
<router-link to="lien_instagram" class="mr-13">
|
||||
<img src="../../../images/instagram.svg" alt="Instagram" width="40">
|
||||
</router-link>
|
||||
<router-link to="lien_x">
|
||||
<img src="../../../images/x.svg" alt="X" width="40">
|
||||
</router-link>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-card>
|
||||
|
||||
|
||||
<v-col cols="3" class="d-flex justify-start">
|
||||
<!-- Menu à droite -->
|
||||
<v-col cols="3" class="d-flex" style="justify-content: start;">
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- Ajoutez ici votre menu de droite -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -256,6 +395,7 @@ import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
|
||||
|
||||
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
|
||||
|
||||
</script>
|
||||
@@ -278,16 +418,42 @@ export default {
|
||||
}
|
||||
|
||||
.image-banner {
|
||||
width: 100%;
|
||||
clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%);
|
||||
|
||||
width: 90%;
|
||||
/* 100% de la largeur de la fenêtre visible */
|
||||
margin: 0;
|
||||
/* Enlève les marges par défaut */
|
||||
z-index: -1000;
|
||||
/* Met l'image en arrière-plan */
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*Profile*/
|
||||
/*Profile */
|
||||
|
||||
.image-profile {
|
||||
border-radius: 50%;
|
||||
|
||||
margin-left: 15%;
|
||||
margin-top: -7%;
|
||||
border: 10px solid white;
|
||||
z-index: 9999;
|
||||
|
||||
}
|
||||
|
||||
.description-text {
|
||||
font-size: 1.3rem;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
color: white
|
||||
}
|
||||
|
||||
|
||||
/*LeftMenu */
|
||||
.icon-size {
|
||||
font-size: 30px;
|
||||
/* ou toute autre taille de votre choix */
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -314,7 +480,7 @@ export default {
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: rgba(163, 14, 121, 1);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
/* Couleur de l'en-tête */
|
||||
padding: 10px;
|
||||
/* Marge intérieure */
|
||||
|
||||
Reference in New Issue
Block a user