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="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||
<a href="https://www.facebook.com/arps.company">
|
||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||
alt="Facebook"></v-img>
|
||
</a>
|
||
</v-col>
|
||
|
||
<v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||
<a href="https://www.instagram.com/arps.co/">
|
||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||
alt="Facebook"></v-img>
|
||
</a>
|
||
</v-col>
|
||
|
||
<v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||
<a href="https://www.youtube.com/channel/UCgnT_psydUXohYm5Yz_wFUg">
|
||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/youtube.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>
|
||
|
||
<v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||
<a href="https://www.tiktok.com/@arps.co">
|
||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/tiktokblack.png"
|
||
alt="Facebook"></v-img>
|
||
</a>
|
||
</v-col>
|
||
|
||
<v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||
<a href="https://www.linkedin.com/in/mickael-simard-96079a90/">
|
||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/linkedinblack.png"
|
||
alt="Facebook"></v-img>
|
||
</a>
|
||
</v-col>
|
||
|
||
<!-- Instagram -->
|
||
<v-col cols="2" sm="1" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
|
||
<a href="https://www.arps.ca/">
|
||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/arpsblack.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="border-bottom-left-radius:0px; border-bottom-right-radius: 0px; color: white;" text="
|
||
Une agence créative spécialisée en production audiovisuelle, création de contenu et stratégie marketing située à Saint-Hyacinthe qui accompagne les PME, les entrepreneurs ainsi que les artistes afin d'affiner leur notoriété par le biais d'images à la hauteur de leur travail.
|
||
" title="Qui sommes-nous ?">
|
||
</v-expansion-panel>
|
||
<v-expansion-panel class="background-pink text-justify"
|
||
style="border-top-left-radius: 0px; border-top-right-radius: 0px; color: white;" text="
|
||
Originairement une marque de vêtements fondée en 2012 en Montérégie par Mickael Simard, ARPS s'est fait connaître dans le milieu de la mode urbaine, de la musique et de l'art. Au travers les années, l'entreprise à su développer une expertise au niveau du développement d'un branding efficace. Aujourd’hui, nous sommes là pour raconter VOTRE histoire tout en partageant nos idées.
|
||
|
||
" title="Notre histoire">
|
||
</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>
|
||
</v-col>
|
||
</v-container>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row style="height: 1800px;"></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="10" style="margin-top: 1%; margin-bottom: -2%;">
|
||
<v-row>
|
||
<a href="https://www.facebook.com/arps.company">
|
||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png" alt="Facebook">
|
||
</a>
|
||
<a href="https://www.instagram.com/arps.co/">
|
||
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png" alt="Instagram">
|
||
</a>
|
||
<a href="https://www.youtube.com/channel/UCgnT_psydUXohYm5Yz_wFUg">
|
||
<img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png" alt="Youtube">
|
||
</a>
|
||
<a href="https://www.tiktok.com/@arps.co"> <img class="socialicons"
|
||
src="/images/hutopymedia/icons/black/tiktokblack.png" alt="tiktokblack">
|
||
</a>
|
||
<a href="https://www.linkedin.com/in/mickael-simard-96079a90/"> <img class="socialicons"
|
||
src="/images/hutopymedia/icons/black/linkedinblack.png" alt="linkedin">
|
||
</a>
|
||
<a href="https://www.arps.ca//"> <img class="socialicons"
|
||
src="/images/hutopymedia/icons/black/arpsblack.png" alt="ARPS">
|
||
</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="border-bottom-left-radius:0px; border-bottom-right-radius: 0px; color: white;" text="
|
||
Une agence créative spécialisée en production audiovisuelle, création de contenu et stratégie marketing située à Saint-Hyacinthe qui accompagne les PME, les entrepreneurs ainsi que les artistes afin d'affiner leur notoriété par le biais d'images à la hauteur de leur travail.
|
||
" title="Qui sommes-nous ?">
|
||
</v-expansion-panel>
|
||
<v-expansion-panel class="background-pink text-justify"
|
||
style="border-top-left-radius: 0px; border-top-right-radius: 0px; color: white;" text="
|
||
Originairement une marque de vêtements fondée en 2012 en Montérégie par Mickael Simard, ARPS s'est fait connaître dans le milieu de la mode urbaine, de la musique et de l'art. Au travers les années, l'entreprise à su développer une expertise au niveau du développement d'un branding efficace. Aujourd’hui, nous sommes là pour raconter VOTRE histoire tout en partageant nos idées.
|
||
|
||
" title="Notre histoire">
|
||
</v-expansion-panel>
|
||
</v-col>
|
||
</v-expansion-panels>
|
||
</v-container>
|
||
</v-row>
|
||
</v-container>
|
||
</v-container>
|
||
</v-container>
|
||
|
||
<!-- Création du studio -->
|
||
<v-container>
|
||
<v-card class="flow-menu m-0 youtube-card">
|
||
|
||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||
<v-container style="margin-top: -15px;">
|
||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||
src="https://www.youtube.com/embed/VRMlRv9IrY0?si=cLyduREv81I-NDx5" 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; margin-bottom: -20px" class="card-date">
|
||
27-05-2024
|
||
</h1>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||
ARPS | Podcast EP. 2 - La beauté du filmmaking (Avec Simon Bélanger)
|
||
</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>
|
||
|
||
<!-- Création du studio -->
|
||
<v-container>
|
||
<v-card class="flow-menu m-0 youtube-card">
|
||
|
||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||
<v-container style="margin-top: -15px;">
|
||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||
src="https://www.youtube.com/embed/d9FXGyQgL5A?si=u2oTh_E2wZx9r9Y7" 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; margin-bottom: -20px" class="card-date">
|
||
26-05-2024
|
||
</h1>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||
Regardez les coulisses qui vous montrent notre projet de création de studio de podcast, le premier à
|
||
Saint-Hyacinthe.
|
||
</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>
|
||
|
||
<!-- Demo Reel -->
|
||
<v-container>
|
||
<v-card class="flow-menu m-0 youtube-card">
|
||
|
||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||
<v-container style="margin-top: -15px;">
|
||
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
|
||
src="https://www.youtube.com/embed/XUeikVgYXwc?si=CxfP7MRcQvOMfaIl" 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; margin-bottom: -20px" class="card-date">
|
||
25-05-2024
|
||
</h1>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||
Nous vous présentons notre démo-reel d'ARPS. Comme le disait Albert Einstein : "La créativité est
|
||
l'intelligence qui s'amuse."
|
||
</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="755a5669-5dbb-43d3-bd38-3c3fe5c24a80"></StripePayment>
|
||
</v-container>
|
||
</v-card>
|
||
</v-container>
|
||
<v-container style="height: 1800px;">
|
||
</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="755a5669-5dbb-43d3-bd38-3c3fe5c24a80"></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/ARPS/banners/bannerARPS01.png';
|
||
let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
|
||
let name = 'ARPS'
|
||
let title = 'Agence créative'
|
||
let drawerbottom = ref(false)
|
||
|
||
let navigationItems = [
|
||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||
{ icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
|
||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||
//{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
|
||
];
|
||
</script>
|
||
|
||
<style scoped>
|
||
.invert-color {
|
||
filter: invert(1);
|
||
}
|
||
|
||
|
||
|
||
.Comments-font {
|
||
font-size: .1rem;
|
||
}
|
||
|
||
|
||
.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;
|
||
margin-bottom: -20px;
|
||
font-size: .8rem;
|
||
}
|
||
|
||
.social-container {
|
||
background-color: #a35026;
|
||
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: #a35026;
|
||
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> |