Merged PR 10: ContactView UI Updated
This commit is contained in:
Pascal Marchesseault
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 44 KiB |
@@ -1,8 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<v-app>
|
||||||
<RouterView>
|
<RouterView>
|
||||||
|
|
||||||
|
|
||||||
</RouterView>
|
</RouterView>
|
||||||
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,20 +1,39 @@
|
|||||||
|
<!--lg="8" md="10" sm="10" xs="10" -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;">
|
<v-container>
|
||||||
|
|
||||||
|
|
||||||
|
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
|
||||||
|
class="footer-align">
|
||||||
<v-container style="background-color: #f4f4f4">
|
<v-container style="background-color: #f4f4f4">
|
||||||
<v-row justify="center" style="margin-top: 30px;">
|
<v-row justify="center" style="margin-top: 30px;">
|
||||||
<v-row cols="auto" class="d-flex justify-center align-center">
|
<v-col cols="5" lg="5" md="5" sm="12" xs="7">
|
||||||
<img src="../../../images/hutopy.png" style="height: 70px; margin-right: 2%;">
|
<v-row>
|
||||||
<a href="https://www.facebook.com/profile.php?id=61556819217561"><img
|
<v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
|
||||||
src="../../../images/facebookiconblackpink.png" alt="Description image 2"
|
|
||||||
style="width: 50px; height: 50px; margin-right: 40px; "></a>
|
|
||||||
<a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instagramblackpink.png"
|
|
||||||
alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px; "></a>
|
|
||||||
<router-link :to="{ name: 'home' }">
|
|
||||||
<img src="../../../images/xblackpink.png" alt="Description image 1"
|
|
||||||
style="width: 50px; height: 50px; margin-right: 40px; "></router-link>
|
|
||||||
</v-row>
|
</v-row>
|
||||||
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row justify="center">
|
||||||
|
<v-col cols="auto">
|
||||||
|
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||||
|
<img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
|
||||||
|
</a>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="auto">
|
||||||
|
<a href="https://www.instagram.com/hutopy.inc/">
|
||||||
|
<img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
|
||||||
|
</a>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="auto">
|
||||||
|
<router-link :to="{ name: 'home' }">
|
||||||
|
<img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
|
||||||
|
</router-link>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
<v-container class="text-center" style="flex-grow: 1;">
|
<v-container class="text-center" style="flex-grow: 1;">
|
||||||
@@ -28,10 +47,10 @@
|
|||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
|
|
||||||
<v-container class="custom-footer">
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
@@ -52,6 +71,18 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.icons {
|
||||||
|
width: 50px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hutopy-footer-picture {
|
||||||
|
height: 70px;
|
||||||
|
margin-bottom: 3%;
|
||||||
|
min-height: 70px;
|
||||||
|
min-width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.custom-footer {
|
.custom-footer {
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@@ -102,4 +133,26 @@ footer a:not(:last-child) {
|
|||||||
.background {
|
.background {
|
||||||
background-color: rgba(107, 0, 101, 1);
|
background-color: rgba(107, 0, 101, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 150px) and (max-width: 598px) {
|
||||||
|
|
||||||
|
.hutopy-footer-picture {
|
||||||
|
|
||||||
|
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 599px) and (max-width: 999px) {}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) and (max-width: 1279px) {}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) and (max-width: 1600px) {}
|
||||||
|
|
||||||
|
@media (min-width: 1600px) and (max-width: 1919px) {}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {}
|
||||||
|
|
||||||
|
@media (min-width: 2559px) {}
|
||||||
</style>
|
</style>
|
||||||
@@ -6,14 +6,13 @@
|
|||||||
<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%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 769px) and (max-width: 1024px) {
|
|
||||||
.h1-connexion {
|
.btnhome {
|
||||||
|
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
transform: matrix(1, 0, 0, 1, -160, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2-connexion {
|
.login-picture {
|
||||||
font-size: 1em;
|
width: auto;
|
||||||
margin-bottom: 5%;
|
border-radius: 30px;
|
||||||
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.headermarginleft {
|
.inscriptionbtn {
|
||||||
margin-left: 4%;
|
transform: scale(.8);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1025px) and (max-width: 1272px) {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) and (max-width: 1280px) {
|
||||||
.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%;
|
|
||||||
min-width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1537px) and (max-width: 1920px) {
|
|
||||||
.h1-connexion {
|
.inscriptionbtn {
|
||||||
font-size: 3.0em;
|
transform: scale(.6);
|
||||||
margin-top: 18%;
|
margin-top: -5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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,203 +1,614 @@
|
|||||||
<template>
|
<template>
|
||||||
<!--PC -->
|
<!--PC -->
|
||||||
|
<div class="hutopy-backgroud-color">
|
||||||
|
<div class="hidden-xs flex-col items-center page-margin">
|
||||||
|
<v-container>
|
||||||
|
<v-row class="text-center align-center row-between-logo-text home-row">
|
||||||
|
<v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
|
||||||
|
|
||||||
|
<v-col cols="auto">
|
||||||
|
<img class="hutopy-header-image" src="../../../images/hutopy.png">
|
||||||
|
</v-col>
|
||||||
|
|
||||||
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
|
<v-col class="ml-0 text-left ">
|
||||||
<v-container class="d-flex justify-center align-center" sty>
|
|
||||||
<div style="margin-left: 20%; margin-bottom: 3%;">
|
|
||||||
<v-row>
|
|
||||||
|
|
||||||
<img style=" max-width: 60%;" src="../../../images/hutopy.png">
|
|
||||||
|
|
||||||
<RouterLink :to="{ name: 'home' }">
|
<RouterLink :to="{ name: 'home' }">
|
||||||
<v-btn size="large"
|
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
|
||||||
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
|
|
||||||
color="rgb(107, 0, 101)" outlined elevation="0">
|
|
||||||
Accueil
|
|
||||||
</v-btn>
|
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
</div>
|
<v-container class="row-between-logo-text">
|
||||||
|
<v-row>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
|
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
|
||||||
<v-container>
|
<v-row>
|
||||||
<v-row justify="center" align="center">
|
<v-col>
|
||||||
<v-col cols="auto">
|
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
|
||||||
<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>
|
||||||
<v-col style="max-width: 700px;">
|
<v-col class="row-joinus">
|
||||||
<h1 style=" font-size: 3rem; margin-bottom: 5%;" class="h1-inscription-beta">Participez au
|
|
||||||
développement</h1>
|
|
||||||
|
|
||||||
|
<h1 class="h2-Participez-au-développement">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="Nom ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||||
|
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101);"></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"
|
<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>
|
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 ?"
|
<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>
|
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||||
|
|
||||||
|
|
||||||
<RouterLink :to="{ name: 'home' }">
|
<RouterLink :to="{ name: 'home' }">
|
||||||
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||||
class="mt-4" block>Envoyez</v-btn>
|
class="mt-4 send-btn" block>Envoyez </v-btn>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
|
||||||
|
|
||||||
|
<v-row>
|
||||||
<v-container style="max-width: 1200px;">
|
<v-container>
|
||||||
<p class="para-inscription" style="margin-top: -4%; font-size: 1.3rem;">Rejoignez l'aventure
|
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||||
Hutopy : une
|
Hutopy : une
|
||||||
invitation à façonner l'avenir de la création.
|
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
|
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
|
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
|
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
|
||||||
inspirer.
|
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
|
</p>
|
||||||
votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
|
<p class="h3-text paragraph {">
|
||||||
idées.
|
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
|
||||||
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
|
d'élargir
|
||||||
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
|
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
|
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
|
||||||
|
et
|
||||||
l'innovation.
|
l'innovation.
|
||||||
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
|
</p>
|
||||||
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
|
<p class="h3-text h3-last-text paragraph {">
|
||||||
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
|
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.
|
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
|
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
|
||||||
dans le ciel de notre utopie partagée.
|
dans le ciel de notre utopie partagée.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</v-container>
|
</v-container>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
<!-- Mobile -->
|
<v-spacer></v-spacer>
|
||||||
|
</v-row>
|
||||||
<v-container style="margin-top: -100px;">
|
</v-container>
|
||||||
|
|
||||||
<div class="md:hidden flex flex-col items-center justify-center">
|
|
||||||
<DefaultLayout></DefaultLayout>
|
|
||||||
<h1 class="h1-inscription-betacolor" style=" margin-bottom: 35px;">Hutopy</h1>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
|
|
||||||
<img src="../../../images/contactpicturemobile.png" alt="Bannière">
|
|
||||||
</div>
|
</div>
|
||||||
<p class="text-justify pa-4" style="font-size: 1em;">
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
<div class="hidden-sm-and-up flex-col items-center justify-center">
|
||||||
|
|
||||||
|
<img class="hutopy-header-image" src="../../../images/hutopy.png">
|
||||||
|
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="7">
|
||||||
|
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col>
|
||||||
|
<RouterLink :to="{ name: 'home' }">
|
||||||
|
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
|
||||||
|
Accueil
|
||||||
|
</v-btn>
|
||||||
|
</RouterLink>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||||
|
<v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||||
|
<v-textarea class="labelsize" 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 class="labelsize" 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="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
|
||||||
|
class="mt-4 send-btn" block>
|
||||||
|
Envoyez
|
||||||
|
</v-btn>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<p class="h3-text paragraph">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.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
|
<p class="h3-text paragraph">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="h3-text h3-last-text paragraph">
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FormInscriptionBeta></FormInscriptionBeta>
|
|
||||||
|
|
||||||
<v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
|
|
||||||
block>Envoyez</v-btn>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
<FooterLayout></FooterLayout>
|
<FooterLayout></FooterLayout>
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
|
||||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||||
import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.contactpicture {
|
.hutopy-backgroud-color {
|
||||||
height: 800px;
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 150px) and (max-width: 598px) {
|
||||||
|
.contact-image {
|
||||||
|
|
||||||
width: auto;
|
width: auto;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
/* ajustez cette valeur selon votre besoin */
|
clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
|
||||||
margin-bottom: 45px;
|
margin-top: -40%;
|
||||||
border-radius: 12px;
|
margin-bottom: -30%;
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
|
|
||||||
/* ombre avec 2px de décalage vertical, 4px de flou et couleur noire transparente */
|
|
||||||
z-index: 2;
|
|
||||||
/* Met l'image derrière */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mallowbanner {
|
.hutopy-header-image {
|
||||||
|
|
||||||
top: 0;
|
height: 70px;
|
||||||
left: 0;
|
margin-left: 5%;
|
||||||
z-index: -2;
|
margin-top: 5%;
|
||||||
/* Met l'image derrière */
|
|
||||||
margin-top: 5.5vw;
|
|
||||||
/* ajustez cette valeur selon votre besoin */
|
|
||||||
margin-bottom: 4.5vw;
|
|
||||||
margin-left: -1.0vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-column {
|
|
||||||
width: 70vw;
|
.h2-Participez-au-développement {
|
||||||
/* ajustez cette valeur selon votre besoin */
|
font-size: 1.8rem;
|
||||||
margin: auto;
|
margin-top: 3%;
|
||||||
/* centre le contenu horizontalement */
|
margin-bottom: 6%;
|
||||||
|
margin-left: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h1-inscription-beta {
|
.home-btn {
|
||||||
font-size: 25px;
|
margin-left: 20%;
|
||||||
/* Taille de la police de 20 pixels */
|
margin-top: 16%;
|
||||||
font-weight: bold;
|
border-radius: 150px;
|
||||||
/* Texte en gras */
|
}
|
||||||
text-align: center;
|
|
||||||
/* Centrer le texte */
|
.paragraph {
|
||||||
margin-top: 20px;
|
font-size: 1.2rem;
|
||||||
margin-bottom: 5px;
|
text-align: justify;
|
||||||
color: #24393c;
|
|
||||||
|
margin-bottom: 10%;
|
||||||
|
margin-top: 3%;
|
||||||
|
margin-left: 3%;
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labelsize {
|
||||||
|
max-width: 95%;
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.h1-inscription-betacolor {
|
|
||||||
font-size: 65px;
|
|
||||||
/* Taille de la police de 20 pixels */
|
|
||||||
font-weight: bold;
|
|
||||||
/* Texte en gras */
|
|
||||||
text-align: center;
|
|
||||||
/* Centrer le texte */
|
|
||||||
|
|
||||||
margin-bottom: 25px;
|
@media (min-width: 599px) and (max-width: 749px) {
|
||||||
color: rgba(163, 14, 121, 0.85);
|
|
||||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
.contact-image {
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 4%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.para-inscription {
|
.home-btn {
|
||||||
margin-bottom: 20px;
|
margin-top: 5%;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-left: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-Participez-au-développement {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-top: -3%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
margin-bottom: 4%;
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 750px) and (max-width: 999px) {
|
||||||
|
|
||||||
|
.contact-image {
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-top: 5%;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-left: 74%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-Participez-au-développement {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-top: -3%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
margin-bottom: 4%;
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1000px) and (max-width: 1279px) {
|
||||||
|
|
||||||
|
.hutopy-header-image {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 120px;
|
||||||
|
margin-left: -0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-top: 5%;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-left: 22%;
|
||||||
|
margin-top: 37%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-Participez-au-développement {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-top: 3%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.contact-image {
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.row-joinus {
|
||||||
|
margin-right: -4%;
|
||||||
|
margin-left: -1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-align: justify;
|
||||||
|
margin-right: -4%;
|
||||||
|
margin-bottom: 4%;
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||||
|
|
||||||
|
.hutopy-header-image {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 165px;
|
||||||
|
margin-left: -4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-top: 5%;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-left: 50%;
|
||||||
|
margin-top: 45%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.row-between-logo-text {
|
||||||
|
margin-top: 2%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image {
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
margin-top: 0%;
|
||||||
|
margin-left: -13%
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-Participez-au-développement {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-text {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-top: 2%;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h3-last-text {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-joinus {
|
||||||
|
margin-right: -8%;
|
||||||
|
margin-left: -10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
margin-right: -6%;
|
||||||
|
margin-left: -7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||||
|
|
||||||
|
.hutopy-header-image {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 165px;
|
||||||
|
margin-left: -5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-top: 5%;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-left: 75%;
|
||||||
|
margin-top: 40%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.row-between-logo-text {
|
||||||
|
margin-top: 2%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image {
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
margin-top: 0%;
|
||||||
|
margin-left: -13%
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-Participez-au-développement {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-text {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-top: 2%;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-last-text {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-joinus {
|
||||||
|
margin-right: -15%;
|
||||||
|
margin-left: -13%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
margin-right: -16%;
|
||||||
|
margin-left: -9%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
|
||||||
|
.hutopy-header-image {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 160px;
|
||||||
|
margin-left: -8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image {
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 47%;
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-bottom: -15%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
margin-bottom: 4%;
|
||||||
|
margin-top: -1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-between-logo-text {
|
||||||
|
margin-top: 3%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-row {
|
||||||
|
margin-left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-Participez-au-développement {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-text {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-top: 2%;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-last-text {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-joinus {
|
||||||
|
margin-right: -18%;
|
||||||
|
margin-left: -10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
margin-right: -20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-margin {
|
||||||
|
margin-left: -9%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 2559px) {
|
||||||
|
|
||||||
|
.hutopy-header-image {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 180px;
|
||||||
|
margin-left: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image {
|
||||||
|
border-radius: 25px;
|
||||||
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
margin-left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-left: 33%;
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-bottom: -15%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
margin-bottom: 4%;
|
||||||
|
margin-top: -1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-between-logo-text {
|
||||||
|
margin-top: 3%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-row {
|
||||||
|
margin-left: 20%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2-Participez-au-développement {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-text {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-top: 2%;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3-last-text {
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-margin {
|
||||||
|
margin-left: -5.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<v-app style="background-color: #F4F4F4;">
|
||||||
|
|
||||||
|
|
||||||
<div style="background-color: #F4F4F4;">
|
<div style="background-color: #F4F4F4;">
|
||||||
|
|
||||||
<!--PC -->
|
<!--PC -->
|
||||||
@@ -27,9 +30,7 @@
|
|||||||
|
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-row>
|
|
||||||
|
|
||||||
</v-row>
|
|
||||||
</div>
|
</div>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
@@ -71,7 +72,8 @@
|
|||||||
CRÉER</h3>
|
CRÉER</h3>
|
||||||
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
|
<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
|
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é.
|
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
|
||||||
|
réalité.
|
||||||
</p>
|
</p>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-container>
|
</v-container>
|
||||||
@@ -97,8 +99,10 @@
|
|||||||
PROFITER</h3>
|
PROFITER</h3>
|
||||||
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
<p class="text-justify pa-4" style="font-size: 1.2em;">
|
||||||
Plongez dans l'univers Hutopy et
|
Plongez dans l'univers Hutopy et
|
||||||
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
|
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques,
|
||||||
interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens
|
des
|
||||||
|
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
|
||||||
|
sens
|
||||||
et enrichir votre quotidien.</p>
|
et enrichir votre quotidien.</p>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-container>
|
</v-container>
|
||||||
@@ -154,7 +158,8 @@
|
|||||||
<v-row class="justify-center">
|
<v-row class="justify-center">
|
||||||
<v-col cols="6">
|
<v-col cols="6">
|
||||||
<v-col cols="11" class="d-flex justify-center align-center">
|
<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-img style="margin-top: -5%; min-width: 350px;"
|
||||||
|
src="../../../images/homepage/votrehutopy.png"></v-img>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="auto" md="10">
|
<v-col cols="auto" md="10">
|
||||||
<p class="text-center text-justify votre_hutopy_fontsize"
|
<p class="text-center text-justify votre_hutopy_fontsize"
|
||||||
@@ -319,7 +324,8 @@
|
|||||||
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
|
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
|
||||||
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
|
<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
|
<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
|
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
|
||||||
|
une
|
||||||
expérience
|
expérience
|
||||||
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
|
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
|
||||||
|
|
||||||
@@ -330,7 +336,8 @@
|
|||||||
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
|
<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
|
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
|
||||||
partageant votre vision,
|
partageant votre vision,
|
||||||
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les
|
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
|
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
|
||||||
d'inspiration.</p>
|
d'inspiration.</p>
|
||||||
|
|
||||||
@@ -394,6 +401,8 @@
|
|||||||
</v-list>
|
</v-list>
|
||||||
<FooterLayout></FooterLayout>
|
<FooterLayout></FooterLayout>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</v-app>
|
||||||
</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