1018 lines
29 KiB
Vue
1018 lines
29 KiB
Vue
<template>
|
||
<div style="background-color: #f4f4f4;">
|
||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||
|
||
<!-- "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>
|
||
<!-- "Menu" -->
|
||
<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-mobile">
|
||
<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/hutopymedia/banners/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 v-for="item in navigationItems" :key="item.link">
|
||
<router-link :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>
|
||
|
||
<v-list-item>
|
||
<v-dialog transition="dialog-top-transition" width="auto">
|
||
<!-- <template v-slot:activator="{ props: activatorProps }">
|
||
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
|
||
elevation="0" outlined="false">
|
||
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
||
<p @click="isActive.value = false">Bourse</p>
|
||
</v-btn>
|
||
</template>-->
|
||
|
||
<!-- Wallet Modale -->
|
||
<template v-slot:default="{ isActive }">
|
||
<v-card style="border-radius: 30px;">
|
||
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
||
<v-icon left size="48">mdi-wallet</v-icon>
|
||
<v-toolbar title="PORTEFEUILLE"
|
||
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
|
||
</div>
|
||
<v-card-text class="text-h1 pa-12">
|
||
<v-row>
|
||
<v-col>
|
||
<v-row>
|
||
<v-col cols="7">
|
||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
|
||
</v-col>
|
||
<v-col>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
|
||
<p></p>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>
|
||
<v-col>
|
||
<v-row>
|
||
<v-col cols="8">
|
||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
|
||
</v-col>
|
||
<v-col>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
|
||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
|
||
<p></p>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>
|
||
</v-row>
|
||
</v-card-text>
|
||
|
||
<v-card-actions class="justify-center">
|
||
<v-btn text="Fermer" @click="isActive.value = false"></v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
|
||
<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>
|
||
<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>
|
||
<v-col cols="3" class="text-truncate text-center font-weight-bold"
|
||
style="margin-right: 2%; background-color: #fbccee">Name</v-col>
|
||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||
</v-row>
|
||
</v-card>
|
||
|
||
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
|
||
<v-row>
|
||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||
class="text-truncate">10$</v-col>
|
||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
||
<v-col cols="3" class="text-truncate"
|
||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
||
</v-row>
|
||
</v-card>
|
||
</template>
|
||
</v-dialog>
|
||
</v-list-item>
|
||
</v-list>
|
||
</v-col>
|
||
</v-container>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row style="height: 3000px;"></v-row>
|
||
</v-col>
|
||
</v-col>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- <PostContentMenu style="margin-top: -30px;"></PostContentMenu> Post -->
|
||
<!-- 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%; margin-bottom: -5%;">
|
||
<v-container style="margin-top: -15px;">
|
||
<v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
|
||
title="Guillaumem"></v-img>
|
||
|
||
<!-- Date -->
|
||
<v-row class="text-right">
|
||
<v-col>
|
||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||
23-04-2024
|
||
</h1>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<p class="text-justify pa-10" style="margin-bottom: -3%; 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;"
|
||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></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%; margin-bottom: -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">
|
||
23-04-2024
|
||
</h1>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<p class="text-justify pa-10" style="margin-bottom: -3%; 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;"
|
||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||
</v-container>
|
||
</div>
|
||
</v-card>
|
||
</v-container>
|
||
</v-col>
|
||
|
||
<!-- "Large-Monitor-RightCol" Donation -->
|
||
<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-container style="height: 3000px;">
|
||
</v-container>
|
||
</v-col>
|
||
<v-spacer>
|
||
</v-spacer>
|
||
</v-row>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- "Mobile" Donation -->
|
||
<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 -->
|
||
<v-btn @click="drawerbottom = !drawerbottom" elevation="0"
|
||
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
|
||
JE SOUTIENS
|
||
</v-btn>
|
||
</v-col>
|
||
|
||
<!-- Drawer du bas -->
|
||
<template>
|
||
<div>
|
||
<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>
|
||
<StripePayment></StripePayment>
|
||
</v-container>
|
||
</v-bottom-sheet>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<FooterLayout></FooterLayout>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||
import { ref } from 'vue';
|
||
import StripePayment from '../StripePayment.vue';
|
||
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'
|
||
let drawerbottom = ref(false)
|
||
|
||
let navigationItems = [
|
||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||
{ icon: 'mdi-account-group', text: 'Membres', link: '/userbrowser' },
|
||
//{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
|
||
];
|
||
</script>
|
||
|
||
<style scoped>
|
||
.invert-color {
|
||
filter: invert(1);
|
||
}
|
||
|
||
.Hutopy-menu-sticky-mobile {
|
||
position: sticky;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
margin-top: -40px;
|
||
}
|
||
|
||
.sticky-bottom-label {
|
||
position: sticky;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.sticky-top-label {
|
||
position: sticky;
|
||
bottom: 0;
|
||
right: 10%;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.text-soutiens {
|
||
margin-bottom: 15px;
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
letter-spacing: 7px;
|
||
text-align: center;
|
||
}
|
||
|
||
.name-info {
|
||
margin-top: -10px;
|
||
margin-left: 15%;
|
||
}
|
||
|
||
.occupation-info {
|
||
margin-left: 15%;
|
||
font-size: large;
|
||
}
|
||
|
||
.name-info-mobile {
|
||
margin-left: 22px;
|
||
font-size: 1.3rem
|
||
}
|
||
|
||
.main-background {
|
||
background-color: #f4f4f4;
|
||
}
|
||
|
||
.profile-container {
|
||
margin-top: -16%;
|
||
}
|
||
|
||
.btn-custom {
|
||
width: 100%;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.label-text {
|
||
font-weight: 400;
|
||
margin-left: 3%;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.profile-name {
|
||
margin-top: -15%;
|
||
}
|
||
|
||
.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
|
||
}
|
||
|
||
.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-container2-mobile {
|
||
background-color: #0baab2;
|
||
z-index: 1000;
|
||
font-size: 1.2rem;
|
||
font-weight: 500;
|
||
color: white;
|
||
}
|
||
|
||
.social-icon-group-mobile {
|
||
background-color: #272526;
|
||
}
|
||
|
||
.mini-profile-picture {
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.btn-card-options {
|
||
background-color: #f4f4f4;
|
||
width: 50px;
|
||
margin-left: -12px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
border-radius: 100px;
|
||
height: 150px;
|
||
width: 150px;
|
||
border-radius: 50%;
|
||
max-width: 150px;
|
||
border: 4px solid white;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.mobile-header {
|
||
height: 50px;
|
||
margin-left: -13%;
|
||
margin-top: 6%;
|
||
}
|
||
|
||
.h1-navigation {
|
||
text-align: center;
|
||
font-weight: 600;
|
||
margin-bottom: 10%;
|
||
}
|
||
|
||
.mobile-profile-picture {
|
||
height: 40px;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||
border: 2px solid #a30e79;
|
||
margin-right: 10px
|
||
}
|
||
|
||
.profile-banner {
|
||
margin-top: 25px;
|
||
min-height: 200px
|
||
}
|
||
|
||
.v-navigation-drawer {
|
||
max-height: 100vh;
|
||
}
|
||
|
||
@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%);
|
||
}
|
||
|
||
.profile-container-mobile {
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
margin-top: -112px;
|
||
}
|
||
|
||
.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.5) translateY(25%) translateX(0%);
|
||
}
|
||
|
||
.profile-container {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
}
|
||
|
||
.profile-container-mobile {
|
||
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
margin-top: -110px;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
|
||
.profile-container-mobile {
|
||
width: 110%;
|
||
margin-left: -3%;
|
||
margin-top: -110px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.text-soutiens {
|
||
font-size: 1.2rem;
|
||
letter-spacing: 5px;
|
||
}
|
||
|
||
.profile-container {
|
||
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;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||
.text-soutiens {
|
||
font-size: 1.3rem;
|
||
letter-spacing: 8px;
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||
}
|
||
|
||
.profile-container {
|
||
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.3rem;
|
||
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||
}
|
||
|
||
.profile-container {
|
||
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.3rem;
|
||
}
|
||
|
||
.profile-container {
|
||
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: 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> |