Modifications de plusieurs éléments visuels dans default, footer, stripe et creatorFolio.
This commit is contained in:
PascalMarchesseault
@@ -2,113 +2,155 @@
|
||||
<div style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<!-- Bannière -->
|
||||
<v-row class="fluid" style="margin-top: -25px; position: relative; z-index: 0;">
|
||||
|
||||
<!-- "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" -->
|
||||
<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>
|
||||
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
|
||||
hidden-md-and-down>
|
||||
<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/profile.php?id=61556819217561">
|
||||
<v-img class="socialicons-mobile invert-color" src="../../../images/facebookicon.png"
|
||||
alt="Facebook"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<!-- "profile xs sm md" -->
|
||||
<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/">
|
||||
<v-img class="socialicons-mobile" src="../../../images/instaicon.png" alt="Instagram"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<v-card
|
||||
style="margin-top: 2px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-color: rgba(11, 170, 178, 0); width: 101vw;"
|
||||
class="profile-container-mobile hidden-md-and-up" hidden-md-and-down>
|
||||
<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>
|
||||
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator "></v-img>
|
||||
<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.x.com/">
|
||||
<v-img class="socialicons-mobile invert-color" src="../../../images/xicon.png" alt="X"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<v-row style="z-index: 400;" class="social-container-mobile">
|
||||
<h1 style="z-index: 400;" class="name-info-mobile">{{ name }}</h1>
|
||||
</v-row>
|
||||
<v-row class="social-container2-mobile">
|
||||
<h1 class="occupation-info-mobile">{{ title }}</h1>
|
||||
<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.tiktok.com/">
|
||||
<v-img class="socialicons-mobile invert-color" src="../../../images/tiktok.png" alt="TikTok"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-col class="social-icon-group-mobile">
|
||||
<v-row style="margin-left: 160px; margin-top: 5px; margin-bottom: 5px;">
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img class="socialicons-mobile" src="../../../images/facebookicon.png" alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img class="socialicons-mobile invert-color" src="../../../images/instaicon.png" alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img class="socialicons-mobile " src="../../../images/xicon.png" alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img class="socialicons-mobile " src="../../../images/tiktok.png" alt="Description image 2">
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-row class="social-container-mobile social-container-mobile-spacer">
|
||||
<v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
|
||||
<v-row justify="center name-info-mobile">
|
||||
<v-typography>{{ name }}</v-typography>
|
||||
</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 justify="center name-info-mobile">
|
||||
<v-typography>{{ title }}</v-typography>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-container style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"
|
||||
<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" style="color: white;" :key="i"
|
||||
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>
|
||||
title="À propos : Ma mission est claire :"></v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<!-- "Mobile-End" -->
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- "Creator Core (Menu / Feed / Donation)" -->
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
<!-- "Menu" -->
|
||||
<v-col cols="2" md="3" lg="2" xl="3" xxl="3" class="hidden-sm-and-down" hidden-sm-and-down>
|
||||
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image" style="height: 150px; width: 300px;"
|
||||
class="mx-auto" :elevation="10"></v-img>
|
||||
<v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
||||
<v-col style="margin: 0;">
|
||||
<v-row class="Hutopy-menu-sticky">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
<v-container style=" overflow-y: hidden;">
|
||||
<!-- Nav-Btn -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image"
|
||||
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
|
||||
<v-list dense class="main-background">
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
|
||||
<v-btn text class="d-flex align-start align-center main-background" elevation="0"
|
||||
outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<!-- Tools -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-list dense class="d-flex align-start align-center main-background">
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in tools" :key="index" :to="item.link">
|
||||
<v-btn text class="btn-custom" elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<!-- Log-out -->
|
||||
<v-col cols="12" class="px-0 logout-button">
|
||||
<v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">mdi-logout</v-icon>
|
||||
Déconnexion
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style=" overflow-y: hidden;">
|
||||
<!-- Nav-Btn -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-list dense class="main-background">
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
|
||||
<v-btn text class="d-flex align-start align-center main-background" elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<!-- Tools -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-list dense class="d-flex align-start align-center main-background">
|
||||
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in tools" :key="index" :to="item.link">
|
||||
<v-btn text class="btn-custom" elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<!-- Log-out -->
|
||||
<v-col cols="12" class="px-0 logout-button">
|
||||
<v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">mdi-logout</v-icon>
|
||||
Déconnexion
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-container>
|
||||
|
||||
</v-row>
|
||||
|
||||
<v-row style="height: 1400px;"></v-row>
|
||||
|
||||
<!-- Wallet -->
|
||||
<v-row>
|
||||
@@ -172,7 +214,7 @@
|
||||
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">T#</v-col>
|
||||
class="text-truncate text-center font-weight-bold">#T</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">$</v-col>
|
||||
<v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
|
||||
@@ -198,10 +240,11 @@
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="9" lg="7" xl="6" xxl="6">
|
||||
<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>
|
||||
@@ -258,7 +301,6 @@
|
||||
</v-container>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- "Card youtube" -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
@@ -271,7 +313,7 @@
|
||||
|
||||
<v-col class="text-right">
|
||||
<v-btn class="btn-card-options" flat tile elevation="0">
|
||||
<v-icon style="color: rgb(11, 170, 178); font-size: 24px;">mdi-dots-vertical</v-icon>
|
||||
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -284,12 +326,12 @@
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
|
||||
<v-container>
|
||||
<iframe style="margin-left: 2.1%; width: 96%;" src="https://www.youtube.com/embed/pf95whtA_xs?start=0"
|
||||
title="Guillaumem" frameborder="0"
|
||||
<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>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">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
|
||||
@@ -306,7 +348,60 @@
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%;"
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<h1 class="card-title">
|
||||
PODCAST #01</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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<h1 class="card-date">
|
||||
10-03-2024</h1>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -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>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">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>
|
||||
|
||||
|
||||
<!-- 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;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
@@ -315,43 +410,36 @@
|
||||
</v-col>
|
||||
|
||||
<!-- "Large-Monitor-RightCol" Donation -->
|
||||
<v-col cols="2" md="3" lg="3" xl="3" xxl="3" class="hidden-md-and-down" hidden-md-and-up>
|
||||
<v-container class="sticky-bottom-label" style="max-width: 400px ; bottom: 0; z-index: 1000;">
|
||||
<!-- Donnation -->
|
||||
<v-card style="border-radius: 20px;">
|
||||
<v-container>
|
||||
<v-row class="mb-0"
|
||||
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
|
||||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||||
JE SOUTIENS!
|
||||
</v-card-title>
|
||||
</v-row>
|
||||
<v-spacer style="height: 20px;"></v-spacer>
|
||||
<v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-textarea>
|
||||
<v-text-field style="color: #a30e79;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="3"
|
||||
auto-grow></v-text-field>
|
||||
<v-btn block class="ma-auto" style="width: 200px;">
|
||||
<v-icon left>
|
||||
mdi-gift
|
||||
</v-icon>
|
||||
Donnez
|
||||
</v-btn>
|
||||
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
|
||||
<!-- Donnation -->
|
||||
<v-card style="border-radius: 20px;">
|
||||
<v-container>
|
||||
<v-row class="mb-0"
|
||||
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
|
||||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||||
JE SOUTIENS!
|
||||
</v-card-title>
|
||||
</v-row>
|
||||
|
||||
<StripePayment></StripePayment>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container style="height: 1600px;">
|
||||
</v-container>
|
||||
|
||||
</v-col>
|
||||
<v-spacer>
|
||||
</v-spacer>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
<!-- "Mobile" Donation -->
|
||||
<v-col class="hidden-lg-and-up sticky-bottom-label" hidden-md-and-down
|
||||
<v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
|
||||
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
|
||||
|
||||
<!-- Barre cliquable pour ouvrir le drawer -->
|
||||
@@ -363,23 +451,11 @@
|
||||
</v-col>
|
||||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
<!-- Drawer du bas -->
|
||||
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
|
||||
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
|
||||
<h1 class="text-soutiens">JE SOUTIENS</h1>
|
||||
<v-textarea style="color: white;" label="Votre message" placeholder="Écrivez votre message ici" rows="2"
|
||||
auto-grow></v-textarea>
|
||||
<v-text-field style="color: white;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="2"
|
||||
auto-grow></v-text-field>
|
||||
<v-btn class="mx-auto">
|
||||
<v-icon left class="mr-4">
|
||||
mdi-gift
|
||||
</v-icon>
|
||||
Donnez
|
||||
</v-btn>
|
||||
<StripePayment></StripePayment>
|
||||
</v-container>
|
||||
</v-bottom-sheet>
|
||||
|
||||
@@ -398,6 +474,7 @@
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import StripePayment from '../StripePayment.vue';
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@@ -414,6 +491,7 @@ export default {
|
||||
tiktokLink: 'tiktok.com',
|
||||
drawer: false,
|
||||
drawerbottom: false,
|
||||
|
||||
items: [
|
||||
{ title: 'Item 1' },
|
||||
{ title: 'Item 2' },
|
||||
@@ -436,6 +514,16 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
.Hutopy-menu-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.sticky-bottom-label {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@@ -443,6 +531,7 @@ export default {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sticky-top-label {
|
||||
@@ -457,15 +546,15 @@ export default {
|
||||
.text-soutiens {
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 10px;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
font-size: larger
|
||||
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
@@ -475,8 +564,8 @@ export default {
|
||||
|
||||
.name-info-mobile {
|
||||
|
||||
margin-left: 38%;
|
||||
font-size: larger
|
||||
margin-left: 22px;
|
||||
font-size: 1.3rem
|
||||
}
|
||||
|
||||
.occupation-info-mobile {
|
||||
@@ -590,15 +679,17 @@ export default {
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 40px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {}
|
||||
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
|
||||
|
||||
|
||||
background-color: #f4f4f4;
|
||||
@@ -640,12 +731,19 @@ export default {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-top: -8%;
|
||||
|
||||
z-index: 1000;
|
||||
|
||||
|
||||
margin: auto;
|
||||
/* Centre verticalement */
|
||||
text-align: center;
|
||||
/* Centre horizontalement */
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.social-container2-mobile {
|
||||
background-color: #0baab2;
|
||||
z-index: 1000;
|
||||
@@ -673,7 +771,7 @@ export default {
|
||||
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25px);
|
||||
|
||||
|
||||
border-radius: 100px;
|
||||
height: 150px;
|
||||
@@ -681,10 +779,10 @@ export default {
|
||||
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
margin-left: 3%;
|
||||
|
||||
|
||||
border: 4px solid white;
|
||||
z-index: 200;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
@@ -725,18 +823,38 @@ export default {
|
||||
/* 80% de la hauteur de l'écran */
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 599px) {
|
||||
@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.2) translateY(40%) translateX(7%);
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
|
||||
@@ -745,22 +863,31 @@ export default {
|
||||
margin-top: -112px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
|
||||
.name-info-mobile {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.2) translateY(40%) translateX(7%);
|
||||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
@@ -784,12 +911,19 @@ export default {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 330px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 750px) and (max-width: 960px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.2) translateY(40%) translateX(7%);
|
||||
transform: scale(1.8) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
@@ -813,17 +947,80 @@ export default {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 425px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 959px) and (max-width: 1280px) {
|
||||
@media (min-width: 960px) and (max-width: 1280px) {
|
||||
|
||||
.middle-col {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 5px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
margin-top: -185px;
|
||||
min-width: 480px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 325px;
|
||||
margin-left: -35px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -834,42 +1031,219 @@ export default {
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.2) translateY(25px) translateX(-8px);
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -25%;
|
||||
margin-top: -180px;
|
||||
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 290px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 90px;
|
||||
min-width: 350;
|
||||
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) {
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.3rem;
|
||||
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25px) translateX(-5px);
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -20%;
|
||||
margin-top: -171px;
|
||||
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 355px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.3rem;
|
||||
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -12%;
|
||||
margin-top: -160px;
|
||||
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.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: 2559px) {}
|
||||
</style>
|
||||
@media (min-width: 2560px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user