555 lines
16 KiB
Vue
555 lines
16 KiB
Vue
<template>
|
||
<DefaultLayout></DefaultLayout>
|
||
|
||
<!-- 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-col>
|
||
</v-row>
|
||
</div>
|
||
|
||
<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="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
|
||
elevation="0">
|
||
<v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
|
||
<div style="margin-left: 10%;"> Accueil</div>
|
||
|
||
</v-btn>
|
||
</RouterLink>
|
||
|
||
<RouterLink :to="{ name: 'contact' }">
|
||
<v-btn size="x-large"
|
||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
|
||
elevation="0">
|
||
<v-icon left class="icon-size" style="margin-left: -1%;">mdi-account-plus</v-icon>
|
||
<div style="margin-left: 10%;">Ajouter des amis</div>
|
||
</v-btn>
|
||
</RouterLink>
|
||
|
||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||
<v-btn size="x-large"
|
||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
|
||
elevation="0">
|
||
<v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
|
||
<div style="margin-left: 10%;">Contenu</div>
|
||
</v-btn>
|
||
</RouterLink>
|
||
</v-container>
|
||
</v-col>
|
||
|
||
|
||
|
||
<!-- center menu -->
|
||
|
||
<v-col cols="7" class="mx-0">
|
||
|
||
|
||
|
||
|
||
<v-card class="flow-menu m-0"
|
||
style="background-color: #f4f4f4; 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=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||
PODCAST #01</h1>
|
||
</v-col>
|
||
|
||
<v-col cols="2">
|
||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||
10-03-2024</h1>
|
||
</v-col>
|
||
|
||
<v-col style="margin-right: 4%;" class="text-right">
|
||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||
style="color: rgb(11, 170, 178);">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>
|
||
|
||
<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
|
||
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="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||
</div>
|
||
|
||
<v-row style="z-index: 200;">
|
||
<v-row class="fill-height">
|
||
<!-- Bouton Like -->
|
||
<v-col cols="3" class="text-center">
|
||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||
elevation="0">
|
||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||
J'aime
|
||
</v-btn>
|
||
</v-col>
|
||
<!-- Bouton Dislike -->
|
||
<v-col cols="3" class="text-center">
|
||
<v-btn size="x-large" style="background-color: #f4f4f4; 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="background-color: #f4f4f4; 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%; margin-top: 3%;">
|
||
|
||
<div class="card-header"> <!-- Div pour l'en-tête de la carte -->
|
||
<v-col>
|
||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||
MA MISSION</h1>
|
||
</v-col>
|
||
|
||
<v-col cols="2">
|
||
<h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
|
||
10-03-2024</h1>
|
||
</v-col>
|
||
|
||
<v-col style="margin-right: 4%;" class="text-right">
|
||
<v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
|
||
style="color: rgb(11, 170, 178);">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>
|
||
|
||
|
||
|
||
<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="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||
</div>
|
||
|
||
<v-row style="z-index: 200;">
|
||
<v-row class="fill-height">
|
||
<!-- Bouton Like -->
|
||
<v-col cols="3" class="text-center">
|
||
<v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
|
||
elevation="0">
|
||
<v-icon left class="icon-size">mdi-thumb-up</v-icon>
|
||
J'aime
|
||
</v-btn>
|
||
</v-col>
|
||
<!-- Bouton Dislike -->
|
||
<v-col cols="3" class="text-center">
|
||
<v-btn size="x-large" style="background-color: #f4f4f4; 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="background-color: #f4f4f4; 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">
|
||
|
||
<!-- tips menu -->
|
||
<v-card
|
||
style=" background-color: #f4f4f4; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
|
||
|
||
<v-container class="text-center d-flex align-center justify-center"
|
||
style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
|
||
<h1 style="font-size: 2rem; color: white; margin: 0; text-orientation: upright;">
|
||
Je soutiens!
|
||
</h1>
|
||
</v-container>
|
||
|
||
<v-row style=" margin-top: 30px; ">
|
||
<v-col cols="6" style="background-color: #f4f4f4">
|
||
<v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
|
||
<v-form @submit.prevent>
|
||
<v-text-field label="Montant ($)"
|
||
style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
|
||
</v-form>
|
||
</v-sheet>
|
||
</v-col>
|
||
<v-col cols="6" class="d-flex align-center">
|
||
<v-btn
|
||
style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
|
||
class="mt-4" block>Envoyez</v-btn>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<v-row>
|
||
<v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
|
||
label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||
</v-row>
|
||
|
||
</v-card>
|
||
|
||
|
||
|
||
|
||
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- 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-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 SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
|
||
|
||
</script>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
overlayMenu: false,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/*Banner */
|
||
.image-container {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-banner {
|
||
|
||
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 */
|
||
|
||
.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 */
|
||
}
|
||
|
||
|
||
|
||
|
||
.sticky-column {
|
||
position: sticky;
|
||
top: 0;
|
||
|
||
|
||
}
|
||
|
||
.profile-picture-position {
|
||
margin-top: 25;
|
||
}
|
||
|
||
.label-paiement-color {
|
||
color: rgba(163, 14, 121, 0.5);
|
||
/* 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 */
|
||
|
||
}
|
||
|
||
.card-header {
|
||
background-color: rgba(255, 255, 255, 0.6);
|
||
/* Couleur de l'en-tête */
|
||
padding: 10px;
|
||
/* Marge intérieure */
|
||
display: flex;
|
||
/* Utilisation de flexbox */
|
||
justify-content: space-between;
|
||
/* Alignement des éléments sur l'en-tête */
|
||
margin: 0 -24px 0;
|
||
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
|
||
.label-tips {
|
||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
|
||
|
||
.menu-creator-position {
|
||
margin-top: -25px;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
|
||
|
||
.flow-menu {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.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>
|