1020 lines
29 KiB
Vue
1020 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/Hutopy">
|
|
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
|
alt="Facebook"></v-img>
|
|
</a>
|
|
</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/hutopy.inc/">
|
|
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
|
alt="Instagram"></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>
|
|
|
|
<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://twitter.com/Hutopyinc">
|
|
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></v-img>
|
|
</a>
|
|
</v-col>
|
|
|
|
<v-spacer class="hidden-xs"> </v-spacer>
|
|
|
|
|
|
|
|
</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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
|
|
title="À propos d'Hutopy :">
|
|
|
|
|
|
</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: 1000px;"></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/Hutopy">
|
|
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
|
alt="Description image 2">
|
|
</a>
|
|
<a href="https://www.instagram.com/hutopy.inc/">
|
|
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
|
alt="Description image 2">
|
|
</a>
|
|
|
|
<a href="https://twitter.com/Hutopyinc">
|
|
<img class="socialicons" src="/images/hutopymedia/icons/black/xblack.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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
|
|
title="À propos d'Hutopy :">
|
|
</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 -->
|
|
|
|
<!-- Release v0.1 -->
|
|
<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">
|
|
Déploiement de la version 0.10 d'Hutopy</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/HutopyProfile/pictures/version.png" title="Release v0.1"></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">
|
|
|
|
Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une
|
|
aventure
|
|
visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de
|
|
fraîcheur en
|
|
favorisant des interactions plus constructives entre les individus.
|
|
|
|
Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur.
|
|
Dans
|
|
un futur
|
|
proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites
|
|
via
|
|
l'onglet d'inscription et ont rempli quelques questions.
|
|
|
|
Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La
|
|
première
|
|
consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire
|
|
partie
|
|
de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire
|
|
progresser certaines fonctionnalités.
|
|
|
|
Merci de visiter Hutopy.</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>
|
|
|
|
<!-- "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 creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
|
|
</v-container>
|
|
</v-card>
|
|
</v-container>
|
|
<v-container style="height: 1000px;">
|
|
</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 creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></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/HutopyProfile/banners/banner01.png';
|
|
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
|
|
let name = 'Hutopy'
|
|
let title = 'Page officiel'
|
|
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: #23393b;
|
|
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;
|
|
margin-bottom: -20px;
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.social-container {
|
|
background-color: #6b0065;
|
|
border-top-right-radius: 30px;
|
|
border-bottom-right-radius: 30px;
|
|
font-size: 1.7rem;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.social-container2 {
|
|
background-color: #a30e79;
|
|
border-bottom-right-radius: 30px;
|
|
font-size: 1.4rem;
|
|
font-weight: 500;
|
|
color: white;
|
|
}
|
|
|
|
.social-container-mobile {
|
|
background-color: #a30e79;
|
|
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: #6b0065;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.profile-container {
|
|
margin-top: -150px
|
|
}
|
|
|
|
.profile-banner {
|
|
margin-top: 25px;
|
|
min-height: 450px;
|
|
}
|
|
|
|
.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> |