673 lines
23 KiB
Vue
673 lines
23 KiB
Vue
<template>
|
||
<div style="background-color: #F4F4F4;">
|
||
<DefaultLayout></DefaultLayout>
|
||
<!--PC ---------------------------------------------------------------------------------------------->
|
||
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
|
||
|
||
<!--Logo & bouttons -->
|
||
<v-container class="d-flex justify-center align-center container-spacer header-container">
|
||
<v-row justify="center" align="center">
|
||
<v-col></v-col>
|
||
<v-col cols="5" xl="4" xxl="4">
|
||
<v-img class="profile-banner" src="/images/hutopymedia/banners/hutopy.png"></v-img>
|
||
</v-col>
|
||
<v-col>
|
||
<v-row>
|
||
<RouterLink :to="{ name: 'contact' }">
|
||
<v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
|
||
Inscription
|
||
</v-btn>
|
||
</RouterLink>
|
||
</v-row>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
|
||
<!--Header -->
|
||
<v-container class="container-spacer">
|
||
<v-row>
|
||
<v-spacer></v-spacer>
|
||
<v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
|
||
<v-img class="profile-banner banner-homepage" src="/images/hutopymedia/homepage/bannierehomepage.png"
|
||
style="border-radius: 20px;"></v-img>
|
||
</v-col>
|
||
<v-spacer></v-spacer>
|
||
</v-row>
|
||
</v-container>
|
||
|
||
<!-- Créer Profiter Inspirer -->
|
||
<v-container class="container-spacer">
|
||
<v-row class="d-flex justify-center creer-profiter-inspirer-row">
|
||
<v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
|
||
<v-row justify="center" align="center" class="créer-profiter-inspirer-row">
|
||
<v-col cols="4" sm="4" md="4">
|
||
<v-hover v-slot="{ isHovering, props }">
|
||
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
|
||
<v-img src="/images/hutopymedia/homepage/creer.png"
|
||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
|
||
<v-container>
|
||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">CRÉER
|
||
</h3>
|
||
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur Hutopy,
|
||
où
|
||
chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
|
||
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||
</v-card>
|
||
</v-container>
|
||
</v-overlay>
|
||
</v-card>
|
||
</v-hover>
|
||
</v-col>
|
||
|
||
<v-col cols="4" sm="4" md="4">
|
||
<v-hover v-slot="{ isHovering, props }">
|
||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
|
||
<v-img src="/images/hutopymedia/homepage/partager.png"
|
||
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
|
||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
|
||
<v-container>
|
||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||
PROFITER
|
||
</h3>
|
||
<p class="text-justify pa-4" style="font-size: 1.2em;">Plongez dans l'univers Hutopy et
|
||
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
|
||
interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et
|
||
enrichir votre quotidien.</p>
|
||
</v-card>
|
||
</v-container>
|
||
</v-overlay>
|
||
</v-card>
|
||
</v-hover>
|
||
</v-col>
|
||
|
||
<v-col cols="4" sm="4" md="4">
|
||
<v-hover v-slot="{ isHovering, props }">
|
||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
|
||
<v-img src="/images/hutopymedia/homepage/inspirer.png"
|
||
style="border-radius: 20px; width: 80vw;"></v-img>
|
||
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
|
||
<v-container>
|
||
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
|
||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||
INSPIRER
|
||
</h3>
|
||
<p class="text-justify pa-4" style="font-size: 1.2em;">Devenez une source d'inspiration sur
|
||
Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez positivement
|
||
la
|
||
communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves dans un
|
||
cercle vertueux de créativité et d'inspiration.</p>
|
||
</v-card>
|
||
</v-container>
|
||
</v-overlay>
|
||
</v-card>
|
||
</v-hover>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
|
||
<!-- Votre Hutopy -->
|
||
<v-container class="container-spacer">
|
||
<v-row justify="center">
|
||
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
|
||
<v-row justify="center">
|
||
<v-col cols="6" md="7" lg="6">
|
||
|
||
<!-- Subtitle : Votre Hutopy -->
|
||
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
|
||
src="/images/hutopymedia/homepage/votrehutopy.png"></v-img>
|
||
|
||
<!-- Your Hutopy text-->
|
||
<p class="text-center text-justify votre_hutopy_fontsize"
|
||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
|
||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
|
||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||
la créativité.
|
||
</p>
|
||
|
||
<p class="text-center text-justify votre_hutopy_fontsize"
|
||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
|
||
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
|
||
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
|
||
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
|
||
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
|
||
prendre vie.
|
||
</p>
|
||
|
||
<v-col cols="12" class="text-center">
|
||
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
|
||
<v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
|
||
elevation="0">
|
||
Inscription
|
||
</v-btn>
|
||
</RouterLink>
|
||
</v-col>
|
||
</v-col>
|
||
|
||
<!-- 4 pictures -->
|
||
<v-col cols="6" md="5" lg="6">
|
||
<v-row justify="center" class="votre-hutopy-img">
|
||
<v-col cols="6" sm="12" md="12" lg="6">
|
||
<v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/grinding.png"
|
||
class="hidden-md-and-down" hidden-and-down></v-img>
|
||
</v-col>
|
||
<v-col cols="6" sm="12" md="12" lg="6">
|
||
<v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/microphone.png"></v-img>
|
||
</v-col>
|
||
<v-col cols="6" sm="12" md="6" lg="6">
|
||
<v-img style="border-radius: 30px;" src="/images/hutopymedia/homepage/girlarmy.png"></v-img>
|
||
</v-col>
|
||
<v-col cols="6" sm="6" md="6" lg="6">
|
||
<v-img style="border-radius: 30px;" class="d-none d-md-block"
|
||
src="/images/hutopymedia/homepage/girlvr.png"></v-img>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
|
||
|
||
<!-- They are on the Hutopy section -->
|
||
<v-row style="margin-top: 20px; margin-bottom: 10px;">
|
||
<v-spacer></v-spacer>
|
||
|
||
<!-- Subtitle :Ils sont sur Hutopy -->
|
||
<v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
|
||
<h1 style=" margin-bottom: 20px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
|
||
Ils sont sur Hutopy.</h1>
|
||
<v-spacer></v-spacer>
|
||
<v-col>
|
||
|
||
<!-- Account links -->
|
||
<v-row justify="center" class="profile-images">
|
||
<v-col>
|
||
<router-link :to="{ name: 'Hutopy' }">
|
||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
|
||
alt="Profile Image" class="profile-image ">
|
||
</router-link>
|
||
</v-col>
|
||
<v-col>
|
||
<router-link :to="{ name: 'guillaumeaime' }">
|
||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||
alt="Profile Image" class="profile-image">
|
||
</router-link>
|
||
</v-col>
|
||
<v-col>
|
||
<router-link :to="{ name: 'chloebeauregard' }">
|
||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||
alt="Profile Image" class="profile-image">
|
||
</router-link>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>
|
||
<v-spacer></v-spacer>
|
||
</v-col>
|
||
<v-spacer></v-spacer>
|
||
</v-row>
|
||
</div>
|
||
|
||
<!-- Mobile ---------------------------------------------------------------------------------------->
|
||
<div class="md:hidden flex flex-col items-center justify-center">
|
||
<div>
|
||
<!--Banner -->
|
||
<img src="/images/hutopymedia/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
|
||
|
||
<!-- Créer -->
|
||
<v-row style="margin-top: 30px;" align="center">
|
||
<v-col cols="6">
|
||
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
|
||
src="/images/hutopymedia/homepage/creer.png"></v-img>
|
||
</v-col>
|
||
<v-col>
|
||
<p style="margin: 20px; text-align: justify;" class="center-vertical">Libérez votre créativité sur Hutopy,
|
||
où chaque idée trouve sa
|
||
place et chaque
|
||
créateur détient la clé
|
||
d'un monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- Partager -->
|
||
<v-row align="center">
|
||
<v-col>
|
||
<p style=" margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
|
||
Hutopy, en partageant
|
||
votre vision, votre
|
||
talent et vos histoires.
|
||
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
|
||
rêves dans un cercle vertueux de créativité et d'inspiration.</p>
|
||
</v-col>
|
||
<v-col cols="6">
|
||
<v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
|
||
src="/images/hutopymedia/homepage/partager.png"></v-img>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- Inspirer -->
|
||
<v-row align="center">
|
||
<v-col cols="6">
|
||
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
|
||
src="/images/hutopymedia/homepage/inspirer.png"></v-img>
|
||
</v-col>
|
||
<v-col>
|
||
<p style="margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
|
||
Hutopy, en partageant
|
||
votre vision, votre
|
||
talent et vos histoires.
|
||
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs
|
||
rêves dans un cercle vertueux de créativité et d'inspiration.</p>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- Votre Hutopy : Title -->
|
||
<v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
|
||
src="/images/hutopymedia/homepage/votrehutopy.png"></v-img>
|
||
|
||
<!-- Votre Hutopy : Text -->
|
||
<v-row align="center">
|
||
<v-col cols="11" style="margin: 4%;">
|
||
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
|
||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
|
||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||
la créativité.
|
||
</p>
|
||
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
|
||
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
|
||
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
|
||
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
|
||
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
|
||
prendre vie.
|
||
</p>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- 4 pictures -->
|
||
<v-row style="margin-left: 15px; margin-right: 15px;">
|
||
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
|
||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/microphone.png"></v-img>
|
||
</v-col>
|
||
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
|
||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/grinding.png"></v-img>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row style="margin-left: 15px; margin-right: 15px;">
|
||
<v-col style="padding-left: 15px; padding-right: 15px;">
|
||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/girlarmy.png"></v-img>
|
||
</v-col>
|
||
<v-col style="padding-left: 15px; padding-right: 15px;">
|
||
<v-img style="border-radius: 30px; width: 100%;" src="/images/hutopymedia/homepage/girlvr.png"></v-img>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<!-- Inscription Btn -->
|
||
<v-container align="center">
|
||
<RouterLink :to="{ name: 'contact' }">
|
||
<v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
|
||
elevation="4">
|
||
Inscription
|
||
</v-btn>
|
||
</RouterLink>
|
||
</v-container>
|
||
|
||
|
||
<!-- They are on the Hutopy section -->
|
||
<h1
|
||
style="margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 3rem; font-weight: bold; color: #24393c">
|
||
Ils sont sur Hutopy.</h1>
|
||
|
||
|
||
|
||
<v-col>
|
||
<v-row justify="center" class="profile-images">
|
||
<v-col cols="8">
|
||
<router-link :to="{ name: 'Hutopy' }">
|
||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
|
||
alt="Profile Image" class="profile-image ">
|
||
</router-link>
|
||
</v-col>
|
||
<v-col cols="8">
|
||
<router-link :to="{ name: 'guillaumeaime' }">
|
||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||
alt="Profile Image" class="profile-image">
|
||
</router-link>
|
||
</v-col>
|
||
<v-col cols="8">
|
||
<router-link :to="{ name: 'chloebeauregard' }">
|
||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||
alt="Profile Image" class="profile-image">
|
||
</router-link>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>
|
||
</div>
|
||
</div>
|
||
|
||
<v-snackbar v-model="errorNoAccessSnackBar">
|
||
Vous n'etes pas connecter !
|
||
<template v-slot:actions>
|
||
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
|
||
Fermer
|
||
</v-btn>
|
||
<v-btn color="green" variant="text" @click="goToLoginPage()">
|
||
Se connecter
|
||
</v-btn>
|
||
</template>
|
||
</v-snackbar>
|
||
|
||
<v-list style="background-color: #F4F4F4;" lines="one">
|
||
<v-list-item v-for=" item in itemList " :key="item" :title="item.firstName"
|
||
:subtitle="item.lastName"></v-list-item>
|
||
</v-list>
|
||
<FooterLayout></FooterLayout>
|
||
</div>
|
||
|
||
|
||
</template>
|
||
|
||
<script async setup>
|
||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||
import { useClient } from "@/plugins/api.js";
|
||
import { ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter()
|
||
const client = useClient();
|
||
let itemList = ref([]);
|
||
let errorNoAccessSnackBar = ref(false);
|
||
|
||
async function callBackend() {
|
||
try {
|
||
const response = await client.get('/api/JoinUs?PageNumber=1&PageSize=10');
|
||
itemList.value = response.data.items;
|
||
|
||
} catch (error) {
|
||
errorNoAccessSnackBar.value = true;
|
||
}
|
||
}
|
||
|
||
const goToLoginPage = () => {
|
||
router.push('/login');
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.center-vertical {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.layer1-backgroundmobile {
|
||
background-color: rgba(163, 14, 121, 0.1);
|
||
border-radius: 20px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.layer2-backgroundmobile {
|
||
border-radius: 20px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.container-spacer {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.profile-images {
|
||
gap: 15px;
|
||
transform: scale(.92);
|
||
}
|
||
|
||
.profile-image {
|
||
width: auto;
|
||
border-radius: 35px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.image {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.overlay {
|
||
position: absolute;
|
||
border-radius: 8px;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(163, 14, 121, 0.80);
|
||
display: flex;
|
||
text-align: left;
|
||
font-size: 1.5rem;
|
||
align-items: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease-in-out;
|
||
}
|
||
|
||
.banner-image {
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.image-container:hover .overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.overlay p {
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.custom-container {
|
||
position: relative;
|
||
max-width: 100vw;
|
||
}
|
||
|
||
.v-card {
|
||
max-width: calc(100% - 20px);
|
||
}
|
||
|
||
.v-card-imagecontainerpos {
|
||
margin-top: 55px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
body {
|
||
background-color: #F4F4F4;
|
||
}
|
||
|
||
|
||
|
||
@media (max-width: 600px) {
|
||
.votre_hutopy_fontsize {
|
||
font-size: 0.55em;
|
||
}
|
||
}
|
||
|
||
|
||
@media (min-width: 601px) and (max-width: 889px) {
|
||
.votre_hutopy_fontsize {
|
||
font-size: 1.06em;
|
||
}
|
||
|
||
.créer-profiter-inspirer-row {
|
||
margin-left: -120px;
|
||
margin-top: -120px
|
||
}
|
||
|
||
.card-size {
|
||
transform: scale(.7);
|
||
}
|
||
|
||
.banner-homepage {
|
||
transform: scale(1.19)
|
||
}
|
||
|
||
.votre-hutopy-img {
|
||
margin-top: -30px;
|
||
}
|
||
|
||
.header-container {
|
||
margin-top: 30px;
|
||
}
|
||
}
|
||
|
||
|
||
@media (min-width: 890px) and (max-width: 960px) {
|
||
|
||
.header-container {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.votre_hutopy_fontsize {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.card-size {
|
||
transform: scale(.75);
|
||
}
|
||
|
||
.créer-profiter-inspirer-row {
|
||
margin-left: -80px;
|
||
margin-top: -130px
|
||
}
|
||
|
||
.banner-homepage {
|
||
transform: scale(1.07)
|
||
}
|
||
|
||
.votre-hutopy-img {
|
||
margin-top: -40px;
|
||
}
|
||
}
|
||
|
||
|
||
@media (min-width: 961px) and (max-width: 1280px) {
|
||
.votre_hutopy_fontsize {
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.banner-homepage {
|
||
transform: scale(1.06)
|
||
}
|
||
|
||
.card-size {
|
||
transform: scale(.90);
|
||
}
|
||
|
||
.créer-profiter-inspirer-row {
|
||
margin-left: -55px;
|
||
margin-top: -90px
|
||
}
|
||
|
||
.in-between-image {
|
||
margin-left: -100px;
|
||
}
|
||
|
||
.profile-images {
|
||
gap: 15px;
|
||
transform: scale(.72);
|
||
}
|
||
|
||
.votre-hutopy-img {
|
||
margin-top: -30px;
|
||
}
|
||
}
|
||
|
||
|
||
@media (min-width: 1281px) and (max-width: 1920px) {
|
||
.votre_hutopy_fontsize {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.card-size {
|
||
transform: scale(1);
|
||
}
|
||
|
||
.banner-homepage {
|
||
transform: scale(1.03)
|
||
}
|
||
|
||
.créer-profiter-inspirer-row {
|
||
margin-left: -25px;
|
||
margin-top: -70px
|
||
}
|
||
|
||
.profile-images {
|
||
gap: 15px;
|
||
transform: scale(.64);
|
||
}
|
||
|
||
.votre-hutopy-img {
|
||
margin-top: 65px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||
.votre_hutopy_fontsize {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.créer-profiter-inspirer-row {
|
||
margin-top: -60px;
|
||
}
|
||
|
||
.banner-homepage {
|
||
transform: scale(1.0)
|
||
}
|
||
|
||
.profile-images {
|
||
gap: 15px;
|
||
transform: scale(.90);
|
||
}
|
||
|
||
.votre-hutopy-img {
|
||
margin-top: 65px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 2561px) {
|
||
.votre_hutopy_fontsize {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.créer-profiter-inspirer-row {
|
||
margin-top: -50px;
|
||
}
|
||
|
||
.card-size {
|
||
transform: scale(.98);
|
||
}
|
||
|
||
.banner-homepage {
|
||
transform: scale(.98)
|
||
}
|
||
|
||
.profile-images {
|
||
gap: 15px;
|
||
transform: scale(.978);
|
||
}
|
||
|
||
.votre-hutopy-img {
|
||
margin-top: -10px;
|
||
}
|
||
}
|
||
</style>
|