378 lines
13 KiB
Vue
378 lines
13 KiB
Vue
<template>
|
||
|
||
<!-- "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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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%;">
|
||
<v-container style="margin-top: -15px;">
|
||
<v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
|
||
title="Savoir faire"></v-img>
|
||
|
||
<!-- Date -->
|
||
<v-row class="text-right">
|
||
<v-col>
|
||
<h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
|
||
23-04-2024
|
||
</h1>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<p class="text-justify pa-10" style="margin-bottom: -6%; 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; margin-bottom: -20px" class="Comments-font"
|
||
placeholder="Commentaire (Arrive bientôt)"></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%;">
|
||
<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; margin-bottom: -20px" class="card-date">
|
||
23-04-2024
|
||
</h1>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<p class="text-justify pa-10" style="margin-bottom: -6%; 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; margin-bottom: -20px"
|
||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||
</v-container>
|
||
</div>
|
||
</v-card>
|
||
</v-container>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
let imageSrc = '/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png';
|
||
let profilePicture = '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png';
|
||
let name = 'Chloé Beaugrand'
|
||
let title = 'Spécialiste en média'
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.Comments-font {
|
||
font-size: .1rem;
|
||
}
|
||
|
||
.name-info {
|
||
margin-top: -10px;
|
||
margin-left: 15%;
|
||
}
|
||
|
||
.occupation-info {
|
||
margin-left: 15%;
|
||
font-size: large;
|
||
}
|
||
|
||
.profile-container {
|
||
margin-top: -16%;
|
||
}
|
||
|
||
.background-profile-container {
|
||
background-color: #ececec;
|
||
color: white;
|
||
border-top: 3px solid #a30e79;
|
||
border-right: 3px solid #a30e79;
|
||
font-weight: 700;
|
||
font-size: 1.15rem;
|
||
border-radius: 25px;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||
}
|
||
|
||
.background-pink {
|
||
background-color: #231f20;
|
||
color: white;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.socialicons {
|
||
width: 35px;
|
||
max-width: 100px;
|
||
margin-top: 3px;
|
||
margin-left: 40px;
|
||
}
|
||
|
||
.socialicons-mobile {
|
||
width: 35px;
|
||
max-width: 100px;
|
||
margin-top: 27px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.youtube-card {
|
||
margin-left: 2%;
|
||
margin-right: 2%;
|
||
border-radius: 15px;
|
||
background-color: #f4f4f4;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||
}
|
||
|
||
.card-date {
|
||
margin-left: 10px;
|
||
margin-top: -18px;
|
||
margin-bottom: -20px;
|
||
font-size: .8rem;
|
||
}
|
||
|
||
.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-icon-group-mobile {
|
||
background-color: #272526;
|
||
}
|
||
|
||
.mobile-profile-picture-creator {
|
||
border-radius: 100px;
|
||
height: 150px;
|
||
width: 150px;
|
||
border-radius: 50%;
|
||
max-width: 150px;
|
||
border: 4px solid white;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.profile-banner {
|
||
margin-top: 25px;
|
||
min-height: 200px
|
||
}
|
||
|
||
</style> |