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

Template update

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-11 22:55:14 -04:00
parent 32a5bd258c
commit 12f66cd6fb
2 changed files with 206 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/layouts/Profile.vue Normal file
View 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>

198
src/views/main/CreatorFolio.vue
View File

@@ -1,15 +1,24 @@
<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>
<CreatorHeader></CreatorHeader>
<!-- PC-->
<div class="md:flex hidden items-center justify-between flex-col">
<v-container fluid class="menu-creator-position donate-menu">
<v-row>
<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"
@@ -41,47 +50,137 @@
</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"
<v-card class="flow-menu m-0"
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
<v-card-text class="color">
<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;">
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">
10-03-2024</h1>
</v-col>
<v-col style="margin-right: 1%;" 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>
</v-col>
</div>
<div
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
<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-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="margin-bottom: 5%; background-color: rgba(163, 14, 121, 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-container>
</v-card-text>
</div>
</v-card>
<!-- 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>
<p class="text-justify pa-4" style="font-size: 1.2em">Voici mon nouveau podcast!</p>
<v-card class="flow-menu m-0"
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
<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>
</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>
</v-col>
<v-col style="margin-right: 1%;" 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>
</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
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>
</div>
</v-card>
</v-col>
<v-col cols="3" class="d-flex justify-end">
<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>
@@ -90,6 +189,7 @@
</v-container>
</div>
@@ -154,7 +254,7 @@
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import CreatorHeader from '@/layouts/CreatorHeader.vue';
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
@@ -171,6 +271,27 @@ export default {
</script>
<style scoped>
/*Banner */
.image-container {
width: 100%;
overflow: hidden;
}
.image-banner {
width: 100%;
clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%);
}
/*Profile*/
.image-profile {
border-radius: 50%;
}
.sticky-column {
position: sticky;
top: 0;
@@ -183,7 +304,7 @@ export default {
}
.label-paiement-color {
color: rgba(163, 14, 121, 0.85);
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 */
@@ -192,7 +313,18 @@ export default {
}
.card-header {
background-color: rgba(163, 14, 121, 1);
/* 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;