656 lines
18 KiB
Vue
656 lines
18 KiB
Vue
<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> |