Merged PR 72: CreatorBrowser Updated
CreatorBrowser Updated - ajout du menu de navigation
This commit is contained in:
Pascal Marchesseault
@@ -1,65 +1,253 @@
|
||||
<template>
|
||||
<div style="background-color: #f4f4f4;">
|
||||
<DefaultLayout />
|
||||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||||
|
||||
<v-container fluid style="margin-top: 100px; font-size: 3rem;">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" class="text-center">
|
||||
<v-row justify="center">
|
||||
<!-- Colonne de gauche -->
|
||||
<v-col class="text-left d-flex justify-center "> <!-- Ajout de align-center -->
|
||||
<router-link to="/" class="d-flex justify-center">
|
||||
<!-- Retrait de la classe align-center -->
|
||||
<v-btn color="#a30e79" style="border-radius:10px">Accueil</v-btn>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<!-- "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>
|
||||
|
||||
<div class="headline font-weight-bold">CRÉATEURS</div>
|
||||
<!-- "PurpleLine" -->
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
<!-- "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-container>
|
||||
|
||||
<v-container fluid style="margin-bottom: 80px;">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="8" md="8">
|
||||
<v-container class="mt-10">
|
||||
<v-row justify="center">
|
||||
<router-link v-for="(profile, index) in profiles" :key="index" :to="profile.routerLink"
|
||||
class="text-decoration-none">
|
||||
<v-col>
|
||||
<v-card class="mb-4 card-equal-width" style="max-width: 250px; height: 325px;">
|
||||
<v-img :src="profile.imageUrl" height="200px" width="300px"
|
||||
style="margin-top: 10px;"></v-img>
|
||||
<v-card-title style="font-weight: 600;" class="text-center">{{ profile.name
|
||||
}}</v-card-title>
|
||||
<v-card-text class="text-center">{{ profile.description }}</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</router-link>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
<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>
|
||||
<FooterLayout />
|
||||
|
||||
<!-- 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="3" xl="3" xxl="2" 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: 400px;"></v-row>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- creators -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
|
||||
<v-container fluid style="margin-bottom: -40px; font-size: 3rem;">
|
||||
<v-row justify="center" class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" class="text-left d-flex justify-center ">
|
||||
<div class="headline font-weight-bold">CRÉATEURS</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col cols="12">
|
||||
<v-container class="mt-10">
|
||||
<v-row justify="center">
|
||||
<router-link v-for="(profile, index) in profiles" :key="index"
|
||||
:to="profile.routerLink" class="text-decoration-none">
|
||||
<v-col>
|
||||
<v-card class="mb-4 card-equal-width"
|
||||
style="max-width: 250px; height: 300px;">
|
||||
<v-img :src="profile.imageUrl" height="200px" width="300px"
|
||||
style="margin-top: 10px;"></v-img>
|
||||
<v-card-title style="font-weight: 600;" class="text-center">{{
|
||||
profile.name
|
||||
}}</v-card-title>
|
||||
<v-card-text class="text-center">{{ profile.description }}</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</router-link>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
<!-- "Large-Monitor-RightCol" Donation -->
|
||||
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" 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: 400px;">
|
||||
</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>
|
||||
|
||||
<style>
|
||||
.card-equal-width {
|
||||
max-width: 300px;
|
||||
/* Ajustez cette valeur selon vos besoins */
|
||||
}
|
||||
</style>
|
||||
|
||||
<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: 'Créateurs', link: '/userbrowser' },
|
||||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||||
];
|
||||
|
||||
const profiles = ref([
|
||||
{
|
||||
@@ -110,11 +298,586 @@ const profiles = ref([
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-decoration-none {
|
||||
text-decoration: none;
|
||||
.invert-color {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.card-equal-width {
|
||||
width: 220px;
|
||||
|
||||
.Hutopy-menu-sticky-mobile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: -40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user