Merged PR 9: Modification des pages afin qu'elle soient plus reactive.
Modification des pages afin qu'elle soient plus reactive.
This commit is contained in:
Pascal Marchesseault
@@ -1,103 +1,108 @@
|
||||
<template>
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<!-- Version pour ordinateur -->
|
||||
<v-container style="z-index: 2000;">
|
||||
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
|
||||
|
||||
<v-card-text justify="end" style="max-width: 22%; margin-top: .2%; margin-bottom: -1.2%;">
|
||||
<v-text-field append-inner-icon="mdi-magnify" density="compact"
|
||||
label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details single-line
|
||||
></v-text-field>
|
||||
</v-card-text>
|
||||
<body style="background-color: #f4f4f4;">
|
||||
|
||||
<v-col cols="2" class="d-flex align-center">
|
||||
<router-link :to="{ name: 'yourprofile' }">
|
||||
<v-row class="d-flex align-center">
|
||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<!-- Version pour ordinateur -->
|
||||
<v-container style="z-index: 2000; margin-bottom: 1.4%">
|
||||
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
|
||||
|
||||
<v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%; margin-bottom: -1.2%;">
|
||||
<v-text-field append-inner-icon="mdi-magnify" density="compact"
|
||||
label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details
|
||||
single-line></v-text-field>
|
||||
</v-card-text>
|
||||
|
||||
<v-col cols="auto" class="d-flex align-center">
|
||||
<router-link :to="{ name: 'yourprofile' }">
|
||||
<v-row class="d-flex align-center">
|
||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
<h1 class="mb-0 text-h5">ANONYME</h1>
|
||||
</v-row>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Version pour mobile -->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container style="margin-top: -20px;">
|
||||
<v-row>
|
||||
|
||||
|
||||
<v-col cols="auto">
|
||||
<!-- Logo -->
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
|
||||
<v-col cols="auto">
|
||||
<!-- Photo de profil -->
|
||||
<router-link :to="{ name: 'yourprofile' }" class="text-green-700">
|
||||
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
<h1 class="mb-0 text-h5">ANONYME</h1>
|
||||
</v-row>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</v-container>
|
||||
<v-container class="text-center" style="margin-top: -30px;">
|
||||
<v-row class="justify-center">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Version pour mobile -->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container style="margin-top: -20px;">
|
||||
<v-row>
|
||||
|
||||
|
||||
<v-col cols="auto">
|
||||
<!-- Logo -->
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
|
||||
<v-col cols="auto">
|
||||
<!-- Photo de profil -->
|
||||
<router-link :to="{ name: 'yourprofile' }" class="text-green-700">
|
||||
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container class="text-center" style="margin-top: -30px;">
|
||||
<v-row class="justify-center">
|
||||
|
||||
<!-- Premier lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Deuxième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Troisième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Premier lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Deuxième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Troisième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
<div v-if="user">
|
||||
<div v-if="user">
|
||||
Hello, {{ user.email }}
|
||||
</div>
|
||||
<v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
|
||||
</div>
|
||||
<v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
|
||||
|
||||
|
||||
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
|
||||
|
||||
</v-row>
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -105,11 +110,13 @@
|
||||
|
||||
|
||||
|
||||
<main class="px-8 py-3 ">
|
||||
<router-view />
|
||||
</main>
|
||||
<main class="px-8 py-3 ">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { useAuthStore } from '@/plugins/store/authStore';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
@@ -1,58 +1,102 @@
|
||||
<template>
|
||||
<v-container style="margin-top: 5%;">
|
||||
<v-row>
|
||||
<v-col cols="9">
|
||||
<img style="border-radius: 20px; max-width: 90%;" src="../../../images/loginpage/loginhutopy.png">
|
||||
</v-col>
|
||||
<v-col style="margin-left: -5%; margin-top: 6%;">
|
||||
<h1 class="text-center display-6" style="font-size: 5rem;">Connexion</h1>
|
||||
<v-app style="background-color: #f4f4f4;">
|
||||
<div class="sm:flex hidden items-center justify-between flex-col"
|
||||
style="background-color: #f4f4f4; margin-top: 3%;">
|
||||
|
||||
<h2 class="text-center display-3" style="font-size: 1.5rem; margin-bottom: 20px;">Comment souhaitez-vous
|
||||
vous connecter à
|
||||
votre compte?</h2>
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"
|
||||
class="text-start"></v-text-field>
|
||||
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
|
||||
label="Mot de passe" class="text-start"></v-text-field>
|
||||
</v-form>
|
||||
<v-snackbar v-model="errorSnackBar">
|
||||
Email ou mot de passe invalide.
|
||||
<template v-slot:actions>
|
||||
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<div class="flex-grow-1"></div>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
|
||||
</router-link>
|
||||
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center">
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<v-container style="background-color: #f4f4f4;">
|
||||
<v-row align="center" justify="center">
|
||||
<!-- Colonne de l'image -->
|
||||
<v-col cols="8" lg="8" style="align-items: center;">
|
||||
<img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
|
||||
src="../../../images/loginpage/loginhutopy.png">
|
||||
</v-col>
|
||||
|
||||
<h2 class="text-center display-3" style="font-size: 1.5rem; margin-top: 6%; margin-bottom: 20px;">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn color="#6b0065"
|
||||
style="height: 60px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||
<!-- Colonne du contenu -->
|
||||
<v-col cols="3" lg="4" md="5" sm="6" xs="6">
|
||||
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
|
||||
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
|
||||
vous connecter à votre compte?</h2>
|
||||
<v-card-text>
|
||||
<v-form class="label-mail-password">
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
|
||||
label="E-mail" class="text-start"></v-text-field>
|
||||
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
|
||||
label="Mot de passe" class="text-start"></v-text-field>
|
||||
</v-form>
|
||||
<v-snackbar v-model="errorSnackBar">
|
||||
Email ou mot de passe invalide.
|
||||
<template v-slot:actions>
|
||||
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<div class="flex-grow-1"></div>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
|
||||
</router-link>
|
||||
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center">
|
||||
<h2 class="text-center display-3 h2-connexion">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn color="#6b0065"
|
||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||
</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</body>
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
<div class="sm:hidden flex flex-col items-center justify-start"
|
||||
style="background-color: #f4f4f4; height: 100vh;">
|
||||
<img style="box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; "
|
||||
src="../../../images/loginpage/loginhutopy.png">
|
||||
|
||||
<h1 class="text-center">Connexion</h1>
|
||||
<h2 class="text-center">Comment souhaitez-vous
|
||||
vous connecter à votre compte?</h2>
|
||||
|
||||
<v-form style="max-width: 400px; width: 350px;">
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"></v-text-field>
|
||||
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
|
||||
label="Mot de passe"></v-text-field>
|
||||
</v-form>
|
||||
|
||||
<v-card-actions>
|
||||
<div class="flex-grow-1"></div>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
|
||||
</router-link>
|
||||
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center">
|
||||
<h2 class="text-center display-3 h2-connexion">
|
||||
Pas encore
|
||||
inscrit?</h2>
|
||||
<router-link :to="{ name: 'contact' }">
|
||||
<v-btn color="#6b0065"
|
||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</v-app>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { useClient } from '@/plugins/clientPlugin';
|
||||
import { useAuthStore } from '@/plugins/store/authStore';
|
||||
import { ref } from 'vue';
|
||||
@@ -80,4 +124,139 @@ async function login() {
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.h1-connexion {
|
||||
font-size: 0.55em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 0.55em;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: -10%;
|
||||
}
|
||||
|
||||
.logincol {
|
||||
cols: 3;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 475px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 476px) and (max-width: 640px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) and (max-width: 768px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.h1-connexion {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1272px) {
|
||||
.h1-connexion {
|
||||
font-size: 3em;
|
||||
margin-top: 15%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: -10%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: -10%;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1537px) and (max-width: 1920px) {
|
||||
.h1-connexion {
|
||||
font-size: 3.0em;
|
||||
margin-top: 18%;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) {
|
||||
.h1-connexion {
|
||||
font-size: 6.2em;
|
||||
}
|
||||
|
||||
.h2-connexion {
|
||||
font-size: 1.7em;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.label-mail-password {
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
.insriptionbutton {
|
||||
font-size: 1.2em
|
||||
}
|
||||
|
||||
.headermarginleft {
|
||||
margin-left: 0%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,9 @@
|
||||
<template>
|
||||
|
||||
|
||||
<!--PC -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
|
||||
<v-container class="d-flex justify-center align-center">
|
||||
<v-container class="d-flex justify-center align-center" sty>
|
||||
<div style="margin-left: 20%; margin-bottom: 3%;">
|
||||
<v-row>
|
||||
|
||||
@@ -28,75 +21,66 @@
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
<main class="top-aligned-column grid grid-cols-3 gap-4">
|
||||
|
||||
<div class="column"></div>
|
||||
<div class="center-column" style="width: 100vw; margin: auto;">
|
||||
|
||||
<div class="grid grid-cols-2 gap-4" style="margin-bottom: 5%;">
|
||||
<div class="rectangular-image h-full flex justify-center items-center">
|
||||
|
||||
<img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
|
||||
style="width: 700px; margin-top: 14%; height: auto; float: right;">
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<h1 style="font-size: 3rem; margin-top: -.5%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
|
||||
développement de </h1>
|
||||
|
||||
|
||||
<p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">Rejoignez l'aventure Hutopy : une
|
||||
invitation à façonner l'avenir de la création.
|
||||
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
|
||||
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
|
||||
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
|
||||
inspirer.
|
||||
Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
|
||||
écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
|
||||
votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
|
||||
idées.
|
||||
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
|
||||
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
|
||||
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
|
||||
l'innovation.
|
||||
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
|
||||
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
|
||||
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
|
||||
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
|
||||
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
|
||||
dans le ciel de notre utopie partagée.
|
||||
|
||||
</p>
|
||||
|
||||
<v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
|
||||
|
||||
<v-text-field label="Courriel ($)"
|
||||
style="color: rgb(107, 0, 101); background-color: #F4F4F4"></v-text-field>
|
||||
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
|
||||
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4" block>Envoyez</v-btn>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center" align="center">
|
||||
<v-col cols="auto">
|
||||
<img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
|
||||
style="max-width: 400px; margin-top: 14%; height: auto; float: right;">
|
||||
</v-col>
|
||||
<v-col style="max-width: 700px;">
|
||||
<h1 style=" font-size: 3rem; margin-bottom: 5%;" class="h1-inscription-beta">Participez au
|
||||
développement</h1>
|
||||
|
||||
|
||||
<v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
|
||||
|
||||
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101); background-color: #F4F4F4"></v-text-field>
|
||||
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
|
||||
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
|
||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||
|
||||
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4" block>Envoyez</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container style="max-width: 1200px;">
|
||||
<p class="para-inscription" style="margin-top: -4%; font-size: 1.3rem;">Rejoignez l'aventure
|
||||
Hutopy : une
|
||||
invitation à façonner l'avenir de la création.
|
||||
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
|
||||
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
|
||||
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
|
||||
inspirer.
|
||||
Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
|
||||
écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
|
||||
votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
|
||||
idées.
|
||||
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
|
||||
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
|
||||
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
|
||||
l'innovation.
|
||||
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
|
||||
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
|
||||
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
|
||||
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
|
||||
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
|
||||
dans le ciel de notre utopie partagée.
|
||||
</p>
|
||||
|
||||
</v-container>
|
||||
|
||||
<!-- Mobile -->
|
||||
|
||||
<v-container style="margin-top: -100px;">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<DefaultLayout></DefaultLayout>
|
||||
|
||||
<!-- PC-->
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style="background-color: #f4f4f4;">
|
||||
|
||||
<!-- Banner + Profile-->
|
||||
<div style="margin-top: -1.6%;">
|
||||
@@ -10,192 +10,186 @@
|
||||
<v-col cols="12">
|
||||
<img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
|
||||
style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
|
||||
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<v-card class="label-paiement-color"
|
||||
style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-container class="pa-0">
|
||||
<v-container class="pa-0" style="margin-left: 1%; margin: 0;">
|
||||
<v-row no-gutters class="justify-center">
|
||||
<!-- Left menu -->
|
||||
<v-col cols="2" class="mx-0">
|
||||
<v-col cols="2" class="mx-0" style="min-width: 300px;">
|
||||
<v-container style="position: sticky; top: 0;">
|
||||
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
|
||||
style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
|
||||
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
|
||||
<div style="margin-left: 10%;"> Accueil</div>
|
||||
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -3%;">mdi-account-plus</v-icon>
|
||||
<div style="margin-left: 6%;">Ajouter des amis</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
|
||||
<div style="margin-left: 10%;">Contenu</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
|
||||
<v-btn v-bind="activatorProps" text="Transition from Top" block size="x-large"
|
||||
style="margin-left: -8%; background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
|
||||
<v-col>
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'home' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 5%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div style="margin-left: 10%;" @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
<v-icon left class="icon-size">mdi-home</v-icon>
|
||||
<div style="margin-left: 10%;"> Accueil</div>
|
||||
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<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-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-account-plus</v-icon>
|
||||
<div>Ajouter des amis</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-card-text class="text-h1 pa-12">
|
||||
<v-row style="align-items: start;">
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="x-large"
|
||||
style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
|
||||
elevation="0">
|
||||
<v-icon left class="icon-size">mdi-newspaper</v-icon>
|
||||
<div style="margin-left: 10%; ">Contenu</div>
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-row>
|
||||
|
||||
<v-row style="align-items: start;">
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
|
||||
<v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
|
||||
style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
</v-btn>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<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: 25pxo; 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: 25pxo; margin-top: .5%; max-height: 450px;">
|
||||
|
||||
|
||||
|
||||
<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 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>
|
||||
<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-col cols="5" class="text-truncate">Good Job</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: 25pxo; 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: 25pxo; 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-card>
|
||||
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- center menu -->
|
||||
|
||||
<v-col cols="7" class="mx-0">
|
||||
|
||||
|
||||
<v-container>
|
||||
<v-container style="min-width: 800px ;">
|
||||
|
||||
<v-col>
|
||||
<v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
|
||||
@@ -286,9 +280,9 @@
|
||||
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="background-color: #f4f4f4; max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
style="background-color: #f4f4f4; max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
|
||||
<div class="card-header"> <!-- Div pour l'en-tête de la carte -->
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
PODCAST #01</h1>
|
||||
@@ -376,9 +370,9 @@
|
||||
</v-card>
|
||||
|
||||
<v-card class="flow-menu m-0"
|
||||
style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
|
||||
style="max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%; ">
|
||||
|
||||
<div class="card-header"> <!-- Div pour l'en-tête de la carte -->
|
||||
<div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
|
||||
<v-col>
|
||||
<h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
|
||||
MA MISSION</h1>
|
||||
@@ -471,7 +465,7 @@
|
||||
|
||||
<!-- tips menu -->
|
||||
<v-card
|
||||
style=" background-color: #f4f4f4; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
|
||||
style="margin-left: 15%; background-color: #f4f4f4; min-width: 300px; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px; position: sticky; top: 0;">
|
||||
|
||||
<v-container class="text-center d-flex align-center justify-center"
|
||||
style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<main style="background-color:#F4F4F4 ;">
|
||||
<div style="background-color: #F4F4F4;">
|
||||
|
||||
<!--PC -->
|
||||
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
|
||||
<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">
|
||||
<div style="margin-left: 20%;">
|
||||
<v-row>
|
||||
|
||||
<img style=" max-width: 60%;" src="../../../images/hutopy.png">
|
||||
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
|
||||
<RouterLink :to="{ name: 'login' }">
|
||||
<v-btn size="large"
|
||||
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
|
||||
@@ -23,268 +26,249 @@
|
||||
</RouterLink>
|
||||
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<v-container style="margin: 0;">
|
||||
<v-row>
|
||||
<v-container style="margin: 0; padding: 0;">
|
||||
<v-row style="justify-content: center;">
|
||||
<img src="../../../images/homepage/bannierehomepage.png"
|
||||
style="max-width: 1600px; width: auto; max-height: 30%; object-fit: cover; border-radius: 20px; ">
|
||||
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Colonnes -->
|
||||
<!-- Colonnes Créer Partager Inspirer-->
|
||||
<v-container>
|
||||
<v-row>
|
||||
<!-- vide de gauche -->
|
||||
<v-col cols="1" class="ml-4 ml-sm-0">
|
||||
<!-- vide de gauche -->
|
||||
</v-col>
|
||||
|
||||
<!-- Colonne Centre -->
|
||||
<v-col cols="9" style="margin-left: 4%;">
|
||||
|
||||
|
||||
|
||||
<!-- Créer Profiter Inspirer -->
|
||||
|
||||
<div class="d-flex justify-center align-center">
|
||||
<div>
|
||||
<div style="margin-top: 40px;">
|
||||
<v-container class="d-flex ">
|
||||
|
||||
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="border-radius: 20px;" class=" mx-auto" max-width="600" v-bind="props">
|
||||
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/creer.png"
|
||||
style="border-radius: 20px; min-width: 500px;"></v-img>
|
||||
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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div style="margin-left: 50px;"></div>
|
||||
<div style="margin-left: 5vw;"></div>
|
||||
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="border-radius: 20px;" class="mx-auto" max-width="600" v-bind="props">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/partager.png"
|
||||
style="border-radius: 20px; min-width: 500px;"></v-img>
|
||||
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="400" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||||
<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; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
||||
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>
|
||||
<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>
|
||||
|
||||
<div style="margin-left: 50px;"> </div>
|
||||
|
||||
|
||||
<div style="margin-left: 5vw;"></div>
|
||||
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card style="border-radius: 20px;" class="mx-auto" max-width="500" v-bind="props">
|
||||
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
|
||||
v-bind="props">
|
||||
<v-img src="../../../images/homepage/inspirer.png"
|
||||
style="border-radius: 20px; min-width: 500px;"></v-img>
|
||||
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="500px" v-bind="props" color="#a30e79">
|
||||
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
|
||||
<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; @media screen and (min-width: 768px) { font-size: 2vw; }">
|
||||
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>
|
||||
<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-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Description D'hutopy -->
|
||||
<v-container style=" margin-left:0% ; margin-top: 4%; max-width: 1700px;">
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-col style="margin-left: 5%;" cols="11" class="d-flex justify-center align-center">
|
||||
<v-img style="max-width: 750px;" src="../../../images/homepage/votrehutopy.png"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="12" md="10" offset-md="1">
|
||||
|
||||
|
||||
<p class="text-center text-justify"
|
||||
style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; 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"
|
||||
style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; max-width: 902px;">
|
||||
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="d-flex justify-center align-center">
|
||||
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)"
|
||||
outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Colonne de droite -->
|
||||
<v-col cols="3">
|
||||
<v-img src="../../../images/homepage/grinding.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlarmy.png"
|
||||
style="border-radius: 30px; min-width: 344px;"></v-img>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="3" style>
|
||||
<v-img src="../../../images/homepage/microphone.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlvr.png"
|
||||
style="border-radius: 30px; min-width: 344px; max-height: 350;"></v-img>
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Fin Description D'hutopy -->
|
||||
|
||||
|
||||
|
||||
<!-- ILS SONT SUR HUTOPY -->
|
||||
<v-container>
|
||||
<v-card-text>
|
||||
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
|
||||
|
||||
<v-container style="margin-top: 25px; margin-bottom: -6%;">
|
||||
|
||||
|
||||
<v-row justify="center" class="profile-images">
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
|
||||
<!-- vide de droite -->
|
||||
<v-col cols="2" class="mr-4 mr-sm-0">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- Description D'hutopy -->
|
||||
|
||||
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="6">
|
||||
<v-col cols="11" class="d-flex justify-center align-center">
|
||||
<v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="auto" md="10">
|
||||
<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="auto" class="d-flex justify-center align-center">
|
||||
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
|
||||
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
|
||||
elevation="0">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
</v-col>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- Colonne de droite -->
|
||||
<v-col cols="3">
|
||||
<v-img src="../../../images/homepage/grinding.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
|
||||
</v-col>
|
||||
<v-col cols="3" style>
|
||||
<v-img src="../../../images/homepage/microphone.png"
|
||||
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
|
||||
<v-img src="../../../images/homepage/girlvr.png"
|
||||
style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!-- ILS SONT SUR HUTOPY -->
|
||||
<v-container style="max-width: 1500px;">
|
||||
<v-card-text>
|
||||
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
|
||||
Ils sont sur Hutopy.</h1>
|
||||
|
||||
|
||||
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
|
||||
|
||||
|
||||
<v-row justify="center" class="profile-images">
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image ">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
<v-col>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
|
||||
|
||||
</router-link>
|
||||
<RouterLink :to="{ name: 'creatorfolio' }">
|
||||
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
|
||||
color="rgb(107, 0, 101)" outlined elevation="10">
|
||||
Inscription
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
|
||||
</v-col>
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Fin Description D'hutopy -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Mobile -->
|
||||
@@ -365,18 +349,18 @@
|
||||
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
|
||||
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
|
||||
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin: 0 20px; width: 120px; height: 120px;" />
|
||||
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
|
||||
style="border-radius: 50%; margin-left: 20px; width: 120px; height: 120px;" />
|
||||
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
@@ -409,7 +393,7 @@
|
||||
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
|
||||
</v-list>
|
||||
<FooterLayout></FooterLayout>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script async setup>
|
||||
@@ -449,7 +433,7 @@ const goToLoginPage = () => {
|
||||
|
||||
<style src="../../cssstyle/homeView.css"></style>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.phototexte {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
@@ -514,7 +498,7 @@ const goToLoginPage = () => {
|
||||
.profile-image {
|
||||
width: auto;
|
||||
/* Largeur des images */
|
||||
height: 300px;
|
||||
|
||||
/* Hauteur des images */
|
||||
border-radius: 35px;
|
||||
/* Coins arrondis */
|
||||
@@ -627,4 +611,50 @@ const goToLoginPage = () => {
|
||||
body {
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: .2em;
|
||||
}
|
||||
|
||||
@media (max-width: 475px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 0.55em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 476px) and (max-width: 640px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) and (max-width: 768px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1536px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1537px) and (max-width: 1920px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) {
|
||||
.votre_hutopy_fontsize {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user