Updated - LoginView 100% reactif
This commit is contained in:
PascalMarchesseault
@@ -4,16 +4,15 @@
|
|||||||
style="background-color: #f4f4f4; margin-top: 3%;">
|
style="background-color: #f4f4f4; margin-top: 3%;">
|
||||||
|
|
||||||
<body style="background-color: #f4f4f4;">
|
<body style="background-color: #f4f4f4;">
|
||||||
<v-container style="background-color: #f4f4f4;">
|
<v-container style=" background-color: #f4f4f4;">
|
||||||
<v-row align="center" justify="center">
|
<v-row align="center" justify="center">
|
||||||
<!-- Colonne de l'image -->
|
<!-- Header -->
|
||||||
<v-col cols="8" lg="8" style="align-items: center;">
|
<v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
|
||||||
<img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
|
<img class="login-picture" src="../../../images/loginpage/loginhutopy.png">
|
||||||
src="../../../images/loginpage/loginhutopy.png">
|
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<!-- Colonne du contenu -->
|
<!-- Connexion-objects -->
|
||||||
<v-col cols="3" lg="4" md="5" sm="6" xs="6">
|
<v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
|
||||||
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
|
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
|
||||||
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
|
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
|
||||||
vous connecter à votre compte?</h2>
|
vous connecter à votre compte?</h2>
|
||||||
@@ -34,16 +33,16 @@
|
|||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<div class="flex-grow-1"></div>
|
<div class="flex-grow-1"></div>
|
||||||
<router-link :to="{ name: 'home' }">
|
<router-link :to="{ name: 'home' }">
|
||||||
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
|
<v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
|
||||||
</router-link>
|
</router-link>
|
||||||
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 class="text-center display-3 h2-connexion">
|
<h2 class="text-center display-3 h2pasinscrit">
|
||||||
Pas encore
|
Pas encore
|
||||||
inscrit?</h2>
|
inscrit?</h2>
|
||||||
<router-link :to="{ name: 'contact' }">
|
<router-link :to="{ name: 'contact' }">
|
||||||
<v-btn color="#6b0065"
|
<v-btn color="#6b0065" class="inscriptionbtn"
|
||||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
@@ -58,11 +57,11 @@
|
|||||||
|
|
||||||
<div class="sm:hidden flex flex-col items-center justify-start"
|
<div class="sm:hidden flex flex-col items-center justify-start"
|
||||||
style="background-color: #f4f4f4; height: 100vh;">
|
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; "
|
<img style="margin-top: 10%; width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
|
||||||
src="../../../images/loginpage/loginhutopy.png">
|
src="../../../images/loginpage/loginhutopy.png">
|
||||||
|
|
||||||
<h1 class="text-center">Connexion</h1>
|
<h1 class="h1-connexion">Connexion</h1>
|
||||||
<h2 class="text-center">Comment souhaitez-vous
|
<h2 class="h2-connexion">Comment souhaitez-vous
|
||||||
vous connecter à votre compte?</h2>
|
vous connecter à votre compte?</h2>
|
||||||
|
|
||||||
<v-form style="max-width: 400px; width: 350px;">
|
<v-form style="max-width: 400px; width: 350px;">
|
||||||
@@ -79,11 +78,11 @@
|
|||||||
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 class="text-center display-3 h2-connexion">
|
<h2 class="h2pasinscrit">
|
||||||
Pas encore
|
Pas encore
|
||||||
inscrit?</h2>
|
inscrit?</h2>
|
||||||
<router-link :to="{ name: 'contact' }">
|
<router-link :to="{ name: 'contact' }">
|
||||||
<v-btn color="#6b0065"
|
<v-btn color="#6b0065" class="inscriptionbtn"
|
||||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
@@ -111,6 +110,7 @@ let errorSnackBar = ref(false);
|
|||||||
|
|
||||||
const goHome = () => {
|
const goHome = () => {
|
||||||
router.push('/');
|
router.push('/');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -126,7 +126,7 @@ async function login() {
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.h1-connexion {
|
.h1-connexion {
|
||||||
font-size: 0.55em;
|
font-size: 0.55em;
|
||||||
}
|
}
|
||||||
@@ -139,99 +139,273 @@ async function login() {
|
|||||||
margin-bottom: -10%;
|
margin-bottom: -10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logincol {
|
|
||||||
cols: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 475px) {
|
@media (min-width: 300px) {
|
||||||
.h1-connexion {
|
.h1-connexion {
|
||||||
font-size: 1em;
|
font-size: 2em;
|
||||||
}
|
margin-bottom: 5%;
|
||||||
}
|
|
||||||
|
|
||||||
@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 {
|
.h2-connexion {
|
||||||
font-size: 1em;
|
font-size: 1.1em;
|
||||||
margin-bottom: 5%;
|
margin-bottom: 5%;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2pasinscrit {
|
||||||
|
margin-bottom: 6%;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inscriptionbtn {
|
||||||
|
transform: scale(.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 450px) and (max-width: 670px) {
|
||||||
|
.h1-connexion {
|
||||||
|
font-size: 2em;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-connexion {
|
||||||
|
font-size: 1.1em;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2pasinscrit {
|
||||||
|
margin-bottom: 6%;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inscriptionbtn {
|
||||||
|
transform: scale(.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-picture {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 641px) and (max-width: 770px) {
|
||||||
|
.h1-connexion {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-connexion {
|
||||||
|
font-size: 1.1em;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.h2pasinscrit {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headermarginleft {
|
.headermarginleft {
|
||||||
margin-left: 4%;
|
margin-left: 4%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.label-mail-password {
|
||||||
|
margin-bottom: -3%;
|
||||||
|
width: 425px;
|
||||||
|
margin-left: 6%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btnhome {
|
||||||
|
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
transform: matrix(1, 0, 0, 1, -160, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-picture {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.inscriptionbtn {
|
||||||
|
transform: scale(.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 769px) and (max-width: 1024px) {
|
@media (min-width: 769px) and (max-width: 1280px) {
|
||||||
.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 {
|
.h1-connexion {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
margin-top: 15%;
|
}
|
||||||
margin-bottom: 1%;
|
|
||||||
|
.h2-connexion {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2pasinscrit {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
font-size: 1.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-mail-password {
|
||||||
|
margin-bottom: -3%;
|
||||||
|
width: 550px;
|
||||||
|
margin-left: 9%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.headermarginleft {
|
||||||
|
margin-left: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inscriptionbtn {
|
||||||
|
transform: scale(.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-picture {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnhome {
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1279px) and (max-width: 1920px) {
|
||||||
|
.h1-connexion {
|
||||||
|
font-size: 2em;
|
||||||
|
margin-top: 4%;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2-connexion {
|
.h2-connexion {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
margin-bottom: 5%;
|
margin-bottom: 5%;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2pasinscrit {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.h2-pasinscrit {
|
||||||
|
margin-bottom: -10%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-mail-password {
|
.label-mail-password {
|
||||||
margin-bottom: -10%;
|
margin-bottom: -10%;
|
||||||
|
margin-top: -4%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.headermarginleft {
|
|
||||||
margin-left: -10%;
|
.inscriptionbtn {
|
||||||
min-width: 700px;
|
transform: scale(.6);
|
||||||
|
margin-top: -5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@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 {
|
.headermarginleft {
|
||||||
margin-left: 0%;
|
margin-left: 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-picture {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
margin-left: -5%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1921px) {
|
@media (min-width: 1921px) {
|
||||||
|
.h1-connexion {
|
||||||
|
font-size: 4.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-connexion {
|
||||||
|
font-size: 1.3em;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
margin-left: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2pasinscrit {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
font-size: 1.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.label-mail-password {
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-bottom: 0%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.insriptionbutton {
|
||||||
|
font-size: 1.2em;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.headermarginleft {
|
||||||
|
margin-left: 0%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.connexion-container {
|
||||||
|
margin-left: -7%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.login-picture {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
margin-left: -10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 2500px) and (max-width: 4000px) {
|
||||||
.h1-connexion {
|
.h1-connexion {
|
||||||
font-size: 6.2em;
|
font-size: 6.2em;
|
||||||
}
|
}
|
||||||
@@ -241,8 +415,15 @@ async function login() {
|
|||||||
margin-bottom: 5%;
|
margin-bottom: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h2pasinscrit {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
font-size: 1.7em;
|
||||||
|
}
|
||||||
|
|
||||||
.label-mail-password {
|
.label-mail-password {
|
||||||
margin-bottom: 0%;
|
margin-bottom: 0%;
|
||||||
|
margin-left: 10%;
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.insriptionbutton {
|
.insriptionbutton {
|
||||||
@@ -250,12 +431,25 @@ async function login() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.headermarginleft {
|
.headermarginleft {
|
||||||
margin-left: 0%;
|
margin-left: 1%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.inscriptionbtn {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.connexion-container {
|
||||||
|
margin-left: -3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-picture {
|
||||||
|
width: auto;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
margin-left: -5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,399 +1,408 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="background-color: #F4F4F4;">
|
<v-app style="background-color: #F4F4F4;">
|
||||||
|
|
||||||
<!--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">
|
|
||||||
<div style="margin-left: 20%;">
|
|
||||||
<v-row>
|
|
||||||
|
|
||||||
<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;"
|
|
||||||
light elevation="0">
|
|
||||||
Connexion
|
|
||||||
</v-btn>
|
|
||||||
</RouterLink>
|
|
||||||
<RouterLink :to="{ name: 'contact' }">
|
|
||||||
<v-btn size="large"
|
|
||||||
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
|
|
||||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
|
||||||
Inscription
|
|
||||||
</v-btn>
|
|
||||||
</RouterLink>
|
|
||||||
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
|
|
||||||
</v-row>
|
|
||||||
</div>
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<v-container style="margin: 0; padding: 0;">
|
|
||||||
<v-row style="justify-content: center;">
|
|
||||||
<img src="../../../images/homepage/bannierehomepage.png"
|
|
||||||
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 Créer Partager Inspirer-->
|
<div style="background-color: #F4F4F4;">
|
||||||
<v-container>
|
|
||||||
<v-row>
|
|
||||||
<!-- vide de gauche -->
|
|
||||||
<v-col cols="1" class="ml-4 ml-sm-0">
|
|
||||||
</v-col>
|
|
||||||
<!-- Colonne Centre -->
|
|
||||||
<v-col cols="9" style="margin-left: 4%;">
|
|
||||||
|
|
||||||
<!-- Créer Profiter Inspirer -->
|
<!--PC -->
|
||||||
|
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
|
||||||
|
|
||||||
<div class="d-flex justify-center align-center">
|
<!--Logo & bouttons -->
|
||||||
<div>
|
<v-container class="d-flex justify-center align-center">
|
||||||
<div style="margin-top: 40px;">
|
<div style="margin-left: 20%;">
|
||||||
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
|
<v-row>
|
||||||
<v-hover v-slot="{ isHovering, 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="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>
|
|
||||||
|
|
||||||
<div style="margin-left: 5vw;"></div>
|
|
||||||
|
|
||||||
<v-hover v-slot="{ isHovering, 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="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; @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>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
</v-overlay>
|
|
||||||
</v-card>
|
|
||||||
</v-hover>
|
|
||||||
|
|
||||||
<div style="margin-left: 5vw;"></div>
|
|
||||||
|
|
||||||
<v-hover v-slot="{ isHovering, 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; 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; @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>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
</v-overlay>
|
|
||||||
</v-card>
|
|
||||||
</v-hover>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
||||||
|
<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;"
|
||||||
|
light elevation="0">
|
||||||
|
Connexion
|
||||||
|
</v-btn>
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink :to="{ name: 'contact' }">
|
||||||
|
<v-btn size="large"
|
||||||
|
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
|
||||||
|
color="rgb(107, 0, 101)" outlined elevation="0">
|
||||||
|
Inscription
|
||||||
|
</v-btn>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
|
|
||||||
</v-container>
|
</div>
|
||||||
</v-card-text>
|
</v-container>
|
||||||
</v-container>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Fin Description D'hutopy -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile -->
|
|
||||||
<div class="md:hidden flex flex-col items-center justify-center">
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<DefaultLayout></DefaultLayout>
|
|
||||||
|
|
||||||
<img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<v-card-text>
|
<v-container style="margin: 0; padding: 0;">
|
||||||
<div>
|
<v-row style="justify-content: center;">
|
||||||
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
|
<img src="../../../images/homepage/bannierehomepage.png"
|
||||||
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
|
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
|
||||||
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
|
</v-row>
|
||||||
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
|
</v-container>
|
||||||
par son engagement envers une expérience numérique enrichissante, offrant une interface
|
|
||||||
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
|
|
||||||
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
|
|
||||||
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
|
|
||||||
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
|
|
||||||
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
|
|
||||||
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
|
|
||||||
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
|
|
||||||
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
|
|
||||||
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
|
|
||||||
<router-link :to="{ name: 'contact' }">
|
|
||||||
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
|
|
||||||
CONNECTEZ-VOUS
|
|
||||||
</v-btn>
|
|
||||||
</router-link>
|
|
||||||
|
|
||||||
</v-card-text>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
|
||||||
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
|
|
||||||
<p class="text-justify pa-4" style="font-size: 1em;">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-container>
|
|
||||||
|
|
||||||
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
|
|
||||||
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
|
|
||||||
<p class="text-justify pa-4" style="font-size: 1em;">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-container>
|
|
||||||
|
|
||||||
|
|
||||||
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
|
||||||
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
|
|
||||||
<p class="text-justify pa-4" style="font-size: 1em;">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-container>
|
|
||||||
|
|
||||||
|
<!-- Colonnes Créer Partager Inspirer-->
|
||||||
<v-container>
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<!-- vide de gauche -->
|
||||||
|
<v-col cols="1" class="ml-4 ml-sm-0">
|
||||||
|
</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 justify-center align-center" style="width: 128vh;">
|
||||||
|
<v-hover v-slot="{ isHovering, 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="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>
|
||||||
|
|
||||||
|
<div style="margin-left: 5vw;"></div>
|
||||||
|
|
||||||
|
<v-hover v-slot="{ isHovering, 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="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; @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>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</v-overlay>
|
||||||
|
</v-card>
|
||||||
|
</v-hover>
|
||||||
|
|
||||||
|
<div style="margin-left: 5vw;"></div>
|
||||||
|
|
||||||
|
<v-hover v-slot="{ isHovering, 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; 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; @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>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</v-overlay>
|
||||||
|
</v-card>
|
||||||
|
</v-hover>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</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>
|
<v-card-text>
|
||||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
|
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
|
||||||
</div>
|
Ils sont sur Hutopy.</h1>
|
||||||
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
|
|
||||||
</h1>
|
|
||||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-center"
|
|
||||||
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: 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: 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: auto;" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
<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-card-text>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Fin Description D'hutopy -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile -->
|
||||||
|
<div class="md:hidden flex flex-col items-center justify-center">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<DefaultLayout></DefaultLayout>
|
||||||
|
|
||||||
|
<img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<v-card-text>
|
||||||
|
<div>
|
||||||
|
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
|
||||||
|
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
|
||||||
|
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
|
||||||
|
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
|
||||||
|
par son engagement envers une expérience numérique enrichissante, offrant une interface
|
||||||
|
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
|
||||||
|
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
|
||||||
|
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
|
||||||
|
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
|
||||||
|
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
|
||||||
|
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
|
||||||
|
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
|
||||||
|
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
|
||||||
|
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
|
||||||
|
<router-link :to="{ name: 'contact' }">
|
||||||
|
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
|
||||||
|
CONNECTEZ-VOUS
|
||||||
|
</v-btn>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
</v-card-text>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||||
|
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
|
||||||
|
<p class="text-justify pa-4" style="font-size: 1em;">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-container>
|
||||||
|
|
||||||
|
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
|
||||||
|
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
|
||||||
|
<p class="text-justify pa-4" style="font-size: 1em;">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-container>
|
||||||
|
|
||||||
|
|
||||||
|
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
|
||||||
|
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
|
||||||
|
<p class="text-justify pa-4" style="font-size: 1em;">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-container>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-card-text>
|
||||||
|
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
|
||||||
|
</div>
|
||||||
|
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
|
||||||
|
</h1>
|
||||||
|
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-center"
|
||||||
|
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: 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: 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: auto;" />
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</v-card-text>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-btn variant="outlined" @click="callBackend()">
|
||||||
|
Get items
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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.id" :subtitle="item.title"></v-list-item>
|
||||||
|
</v-list>
|
||||||
|
<FooterLayout></FooterLayout>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<v-btn variant="outlined" @click="callBackend()">
|
</v-app>
|
||||||
Get items
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<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.id" :subtitle="item.title"></v-list-item>
|
|
||||||
</v-list>
|
|
||||||
<FooterLayout></FooterLayout>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script async setup>
|
<script async setup>
|
||||||
@@ -644,6 +653,8 @@ body {
|
|||||||
.votre_hutopy_fontsize {
|
.votre_hutopy_fontsize {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1537px) and (max-width: 1920px) {
|
@media (min-width: 1537px) and (max-width: 1920px) {
|
||||||
|
|||||||
Reference in New Issue
Block a user