Remove Static pages
This commit is contained in:
PascalMarchesseault
@@ -14,9 +14,6 @@ import Join from '../views/main/Join.vue'
|
||||
import Home from '../views/main/Home.vue'
|
||||
import Wallet from '../views/main/Wallet.vue'
|
||||
import Profile from '../views/main/Profile.vue'
|
||||
import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
|
||||
import Leffet from '../views/manualusers/LeffetProfile.vue'
|
||||
import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
|
||||
import CreatorList from '../views/creators/CreatorList.vue'
|
||||
import CreatorPage from "@/views/creators/CreatorPage.vue";
|
||||
import ContentPage from "@/views/contents/ContentPage.vue";
|
||||
@@ -50,23 +47,6 @@ const routes = [
|
||||
component: PostContent,
|
||||
},
|
||||
|
||||
{
|
||||
path: '/@leffet',
|
||||
component: Leffet
|
||||
},
|
||||
{
|
||||
path: '/@chloebeaugrand',
|
||||
component: ChloeBeaugrand
|
||||
},
|
||||
{
|
||||
path: '/@guillaumeaime',
|
||||
component: GuillaumeAime
|
||||
},
|
||||
{
|
||||
path: '/@mathieucaron',
|
||||
component: MathieuCaron
|
||||
},
|
||||
|
||||
{
|
||||
path: '/helpandcontact',
|
||||
component: HelpAndContact,
|
||||
|
||||
@@ -1,378 +0,0 @@
|
||||
<template>
|
||||
|
||||
<!-- "Mobile -->
|
||||
<v-row class="fluid hidden-md-and-up social-mobile-container"
|
||||
style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "PurpleLine" -->
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile-Profile" -->
|
||||
<!-- "Profile picture" -->
|
||||
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
|
||||
hidden-md-and-down>
|
||||
|
||||
<!-- Facebook -->
|
||||
<v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||||
<a href="https://www.facebook.com/chloegestionmedias">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Facebook"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<!-- Profile picture - Small -->
|
||||
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<!-- Instagram -->
|
||||
<v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||||
<a href="https://www.instagram.com/chloe.photo_gms">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Instagram"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User informations Name title and description -->
|
||||
<v-row class="social-container-mobile">
|
||||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||||
<v-row class="d-flex justify-center">
|
||||
{{ name }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-spacer xs="12" sm="4"></v-spacer>
|
||||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||||
<v-row class="d-flex justify-center">
|
||||
{{ title }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
|
||||
class="social-icon-group-mobile">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify" style="color: white;" text="
|
||||
|
||||
Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté!
|
||||
Chaque collaboration est une aventure marketing inspirante!
|
||||
|
||||
|
||||
Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
|
||||
" title="À propos de moi.">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Bannière Pc -->
|
||||
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
|
||||
hidden-sm-and-up>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
|
||||
hidden-sm-and-up>
|
||||
</v-row>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
||||
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
|
||||
<v-container>
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
<!-- User informations Name & title -->
|
||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||
<h1 class="name-info">{{ name }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||
<h1 class="occupation-info">{{ title }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||
<v-row>
|
||||
<a href="https://www.facebook.com/chloegestionmedias">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/chloe.photo_gms">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col background-color="primary"></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row>
|
||||
<v-container
|
||||
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify" style="color: white;" text="
|
||||
|
||||
Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté!
|
||||
Chaque collaboration est une aventure marketing inspirante!
|
||||
|
||||
|
||||
Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
|
||||
" title="À propos de moi.">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container style="margin-top: -15px;">
|
||||
<v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
|
||||
title="Savoir faire"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
|
||||
23-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Quand on observe des gens
|
||||
réaliser un
|
||||
Rubik’s Cube ça a l’air si facile pour eux qu’on est vraiment impressionnés et peut-être même
|
||||
découragés…<br><br>
|
||||
|
||||
Mais saviez-vous que pour résoudre ce casse-tête, il suffit d’une série de mouvements exécutés à
|
||||
répétitions
|
||||
dans le même ordre jusqu’à la fin?<br><br>
|
||||
|
||||
La gestion de médias sociaux peut donner l’impression d’être un vrai casse-tête!
|
||||
|
||||
La clé c’est de comprendre chaque élément individuellement et ensuite en faire un tout.
|
||||
</p>
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px" class="Comments-font"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container style="margin-top: -15px;">
|
||||
<v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand02.png"
|
||||
title="Guillaumem"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
|
||||
23-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||||
Que ce soit pour un portrait créatif, la gestion totales de tes médias sociaux où pour devenir
|
||||
autonome à
|
||||
les gérer par toi-même → Je suis là pour ça!
|
||||
<br><br>
|
||||
|
||||
Je te promets qu’on passera un bon moment ET que tu auras des résultats à la hauteur de tes attentes
|
||||
<v-icon icon=" mdi-emoticon"></v-icon>
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let imageSrc = '/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png';
|
||||
let profilePicture = '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png';
|
||||
let name = 'Chloé Beaugrand'
|
||||
let title = 'Spécialiste en média'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.Comments-font {
|
||||
font-size: .1rem;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #231f20;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #8c5536;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #231f20;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #8c5536;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #272526;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
border-radius: 100px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 4px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,366 +0,0 @@
|
||||
<template>
|
||||
<!-- Bannière Pc -->
|
||||
<v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0;">
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
||||
<v-container class="profile-container">
|
||||
<v-container>
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
<!-- User informations Name & title -->
|
||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||
<h1 class="name-info">{{ name }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||
<h1 class="occupation-info">{{ title }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||
<v-row>
|
||||
<a href="https://www.facebook.com/GuillaumeMousseau222">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/p/C2f-3UnNdfX/">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
|
||||
<a href="https://www.tiktok.com/@guillaumeaime">
|
||||
<img class="socialicons invert-color" src="/images/externals/tiktok-white.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col background-color="primary"></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row>
|
||||
<v-container
|
||||
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify" style="color: white;"
|
||||
text="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 : Ma mission est claire :">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
|
||||
<!-- Card youtube balado -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
MON PREMIER BALADO</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||||
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
24-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
|
||||
présenter
|
||||
mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
|
||||
particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
|
||||
partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
|
||||
le
|
||||
Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
|
||||
agence
|
||||
créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
|
||||
personnelle,
|
||||
"Guillaume aime", où je partage tout ce qui me passionne.</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
|
||||
title="Guillaumem"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
24-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
|
||||
boutique
|
||||
à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
|
||||
le
|
||||
savoir-faire québécois !
|
||||
|
||||
J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
|
||||
Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
|
||||
|
||||
Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
|
||||
Carl
|
||||
pour ce projet!</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
C'EST PARTI POUR 2024!</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
|
||||
title="Guillaumem"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
22-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
|
||||
retour au
|
||||
travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
|
||||
lumière les
|
||||
entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
|
||||
n'hésite
|
||||
pas à me contacter.</p>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
|
||||
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
|
||||
let name = 'Guillaume Mousseau'
|
||||
let title = 'Créateur de contenus'
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invert-color {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #cc6f91;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #006d77;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #0baab2;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #006d77;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #0baab2;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
@apply rounded-full border-4 border-white;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,656 +0,0 @@
|
||||
<template>
|
||||
|
||||
<v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0; ">
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
||||
<v-container class="profile-container">
|
||||
<v-container>
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
<!-- User informations Name & title -->
|
||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||
<h1 class="name-info">{{ name }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||
<h1 class="occupation-info">{{ title }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||
<v-row>
|
||||
<a href="https://www.facebook.com/Hutopy">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://fondationleffet.ca/">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/leffetblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col background-color="primary"></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row>
|
||||
<v-container
|
||||
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify" style="color: white;"
|
||||
text="La Fondation L'effet est un organisme de bienfaisance qui a trois fins principales, toutes pour prendre soin de son prochain. Notre principal objectif est de promouvoir l’éducation, en fournissant les ressources nécessaires et en donnant des conférences afin d’encourager la persévérance scolaire. Nous soulageons également les conditions des personnes atteintes d'un handicap en offrant des programmes récréatifs et d’autres services de soutien visant à appuyer leur mieux-être physique, mental et émotif afin qu’ils deviennent et demeurent des acteurs importants au sein de la collectivité. La Fondation L’effet encourage aussi les autres organismes et aide les initiatives individuelles ou corporatives à faire une différence positive dans leur communauté."
|
||||
title="Notre mission">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
<v-container>
|
||||
</v-container>
|
||||
|
||||
<v-container style="margin-top: -30px">
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
DOCU-PODCAST</h1>
|
||||
</v-col>
|
||||
|
||||
<!--<v-col class="text-right">
|
||||
<v-btn class="btn-card-options" flat tile elevation="0">
|
||||
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
|
||||
</v-btn> (a intégrer)
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container>
|
||||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||||
src="https://www.youtube.com/embed/3MqKVf1CEIQ?si=aV03Xq2ZNwlv1DWu" title="Guillaumem"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
24-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||||
|
||||
C’est un honneur de vous
|
||||
En exclusivité : Voici l'Épisode 8 de la Saison 2 du Docu-Podcast de Cédieu Léveillé avec le Fondateur
|
||||
de la
|
||||
Fondation l'Effet, Marc-Olivier Hébert. Cette homme est un Ange sur 2 pattes et un Master de
|
||||
l'Introspection :
|
||||
'' Quand j'ai Compris que Mon Seul Obstacle Était Moi-même '' ! Merci de continuer à faire partie de
|
||||
cette
|
||||
AVENTURE et à être les PIONNIERS de mon Docu-Podcast. Seuls vous, Fidèles PIADINS avez le DROIT à
|
||||
l'ENTIÈRETÉ
|
||||
de ces images !!!
|
||||
Marc-Olivier
|
||||
Marc-Olivier Hébert
|
||||
Le nom de la Fondation vient de l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette
|
||||
théorie
|
||||
implique que le battement d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.
|
||||
|
||||
Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
|
||||
un
|
||||
paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long terme,
|
||||
des
|
||||
changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également aux
|
||||
sciences humaines et à l’environnement. <br><br>
|
||||
|
||||
L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
|
||||
le
|
||||
précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
|
||||
arriver à
|
||||
une chose gigantesque.
|
||||
<br><br>
|
||||
|
||||
Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
|
||||
soit
|
||||
toujours positif.
|
||||
<br><br>
|
||||
|
||||
Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
|
||||
créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
|
||||
participants
|
||||
et des
|
||||
bénéficiaires.
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- Le nom -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
C'EST PARTI POUR 2024!</h1>
|
||||
</v-col>
|
||||
<!--
|
||||
<v-col class="text-right">
|
||||
<v-btn class="btn-card-options" flat tile elevation="0">
|
||||
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
|
||||
</v-btn> (a intégrer)
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/leffet/profilepictures/leffetProfile01.png" title="Guillaumem"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
22-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Le nom de la Fondation vient de
|
||||
l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette théorie implique que le battement
|
||||
d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.<br><br>
|
||||
|
||||
Selon l’expression, inventée par le météorologue Edward Lorenz, il suffit de modifier de façon infime
|
||||
un paramètre dans un modèle météo pour que celui-ci s’amplifie progressivement et provoque, à long
|
||||
terme,
|
||||
des changements colossaux. Cette notion ne concerne plus seulement la météo, mais s’applique également
|
||||
aux
|
||||
sciences humaines et à l’environnement.<br>
|
||||
<br>
|
||||
|
||||
L'effet papillon est matérialisé par une chaîne d'événements qui se suivent les uns les autres et dont
|
||||
le précédent influe sur le suivant. Ainsi, on part d'un événement minuscule au début de la chaîne pour
|
||||
arriver à une chose gigantesque.<br>
|
||||
<br>
|
||||
|
||||
|
||||
Chaque action que nous entreprenons crée automatiquement un résultat. Il est à nous de choisir qu’il
|
||||
soit toujours positif.
|
||||
|
||||
Donc, voici toute l’essence de la nature de cette fondation. Que de petites actions et gestes positifs
|
||||
créeront automatiquement de grandes et merveilleuses différences positives dans la vie des
|
||||
participants et
|
||||
des bénéficiaires.
|
||||
</p>
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let imageSrc = '/images/usersmedia/leffet/banners/banner02.png';
|
||||
let profilePicture = '/images/usersmedia/leffet/profilepictures/leffetProfile01.png';
|
||||
let name = 'L\'EFFET'
|
||||
let title = 'Page officiel'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #c9017d;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #79cc02;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #fbc702;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #9add03;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #588801;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 6px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 474px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 475px) and (max-width: 599px) {
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) and (max-width: 960px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.8) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 425px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1280px) {
|
||||
.middle-col {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -185px;
|
||||
min-width: 480px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 40px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 80px;
|
||||
min-width: 270px;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 50px;
|
||||
min-width: 250px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 290px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 90px;
|
||||
min-width: 350px;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 70px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
|
||||
margin-left: 40px;
|
||||
min-width: 290px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -171px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 355px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-top: -4px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 75px;
|
||||
margin-top: -2px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 70px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
|
||||
.profile-container {
|
||||
margin-top: -160px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 35px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 110px;
|
||||
margin-top: -4px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 30px;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 38px;
|
||||
max-width: 100px;
|
||||
margin-top: 13px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -150px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 65px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 45px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,383 +0,0 @@
|
||||
<template>
|
||||
|
||||
<v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0;">
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
||||
<v-container class="profile-container">
|
||||
<v-container>
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
<!-- User informations Name & title -->
|
||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||
<h1 class="name-info">{{ name }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||
<h1 class="occupation-info">{{ title }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||
<v-row>
|
||||
<a href="https://www.facebook.com/MathieuCaronPro/">
|
||||
<img class="socialicons"
|
||||
src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@lesinterviewsatypiquesdema4692">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col background-color="primary"></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row>
|
||||
<v-container
|
||||
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
|
||||
<v-expansion-panels style="min-width: 320px;">
|
||||
<v-col cols="12" offset="-1">
|
||||
<v-expansion-panel class="background-pink text-justify"
|
||||
style="color: white;"
|
||||
text="Mathieu Caron est un intervieweur et un conférencier peu banal. Étant lui-même neuro-atypique, il concilie travail, entrevues et conférences avec l’objectif de démystifier le trouble de l’autisme ainsi que promouvoir la différence et le droit d’être atypique.
|
||||
|
||||
Il réalise des allocutions et de nombreuses entrevues avec des personnalités du monde artistique, politique et des affaires. C’est sur les médias sociaux, dont Facebook et YouTube, qu’il diffuse ces communications et rencontres inusitées. Son engagement et le dépassement de soi dans ses réalisations lui permettent de contribuer à élargir l’acceptation sociale de la différence et de la singularité."
|
||||
title="À propos des Entrevues Atypiques:">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
<v-container>
|
||||
</v-container>
|
||||
|
||||
<!-- LES DENIS DROLETS -->
|
||||
<v-container style="margin-top: -30px">
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
ENTREVUE ATYPIQUE AVEC LES DENIS DROLETS</h1>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video LES DENIS DROLETS -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container>
|
||||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||||
src="https://www.youtube.com/embed/bj4QTpzEO6E?si=9NrwEpsZ-f_KPsNo"
|
||||
title="Guillaumem" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
16-05-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||||
|
||||
Cette belle entrevue atypique est sans aucun doute un must dont j'en suis fiers !
|
||||
Office des personnes handicapées du Québec, sans vous cette vidéo n'aurait pas été
|
||||
possible.
|
||||
<br> <br>
|
||||
Merci aussi à Nissan et à J’achète Québécois, J’achète local ! JQJL !.
|
||||
Vidéo et montage par Jacob Lacroix.
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div
|
||||
style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- Jocelyn Grégoire -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
ENTREVUE ATYPIQUE AVEC JOCELYN GRÉGOIRE</h1>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container>
|
||||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||||
src="https://www.youtube.com/embed//61ZNNeuQV_Y?si=Yl1lzDvuNkaAFdPU"
|
||||
title="Guillaumem" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
28-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||||
|
||||
Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
|
||||
Autisme Estrie,
|
||||
un organisme de mon coin dans le garage de Luc Poirier Perso.
|
||||
Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
|
||||
Mordus
|
||||
d'immobilier
|
||||
<br> <br>
|
||||
Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
|
||||
maquilleuse
|
||||
Anick Bonhomme.
|
||||
<br> <br>
|
||||
Merci à mon assistant technique Éthienne Lafond-Lessard.
|
||||
À mes ''petits'' sponsors :
|
||||
Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
|
||||
handicapées
|
||||
du Québec.
|
||||
Musique : Lydie Morneau.
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div
|
||||
style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- Virginie Roy -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<!-- Title, date and btn -->
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col class="text-center">
|
||||
<h1 class="card-title">
|
||||
ENTREVUE ATYPIQUE AVEC VIRGINIE ROY</h1>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container>
|
||||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||||
src="https://www.youtube.com/embed/dYZZCDVUcuQ?si=g_97RA0w9Vs5hl13"
|
||||
title="Guillaumem" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen></iframe>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
28-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||||
|
||||
Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
|
||||
Autisme Estrie,
|
||||
un organisme de mon coin dans le garage de Luc Poirier Perso.
|
||||
Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
|
||||
Mordus
|
||||
d'immobilier
|
||||
<br> <br>
|
||||
Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
|
||||
maquilleuse
|
||||
Anick Bonhomme.
|
||||
<br> <br>
|
||||
Merci à mon assistant technique Éthienne Lafond-Lessard.
|
||||
À mes ''petits'' sponsors :
|
||||
Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
|
||||
handicapées
|
||||
du Québec.
|
||||
Musique : Lydie Morneau.
|
||||
</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
<div
|
||||
style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let imageSrc = '/images/usersmedia/mathieuCaron/banners/bannerMathieuCaron01.png';
|
||||
let profilePicture = '/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png';
|
||||
let name = 'Mathieu Caron'
|
||||
let title = 'Intervieweur'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #1d1d1b;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #101b49;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #698fe7;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 6px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user