Updating UI - ContactView.vue Modification pour que la page soit dynamique
This commit is contained in:
PascalMarchesseault
@@ -1,203 +1,610 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<!--PC -->
|
<!--PC -->
|
||||||
|
<v-app style="background-color: #F4F4F4;">
|
||||||
|
|
||||||
|
|
||||||
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
|
<!--lg="8" md="10" sm="10" xs="10" -->
|
||||||
<v-container class="d-flex justify-center align-center" sty>
|
<div class="hidden-xs flex-col items-center justify-center">
|
||||||
<div style="margin-left: 20%; margin-bottom: 3%;">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<v-col class="ml-0 text-left ">
|
||||||
|
<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-col>
|
||||||
|
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
|
||||||
|
<v-container class="row-between-logo-text">
|
||||||
<v-row>
|
<v-row>
|
||||||
|
|
||||||
<img style=" max-width: 60%;" src="../../../images/hutopy.png">
|
<v-col>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
|
||||||
|
<v-row>
|
||||||
|
|
||||||
|
|
||||||
|
<v-col>
|
||||||
|
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col class="row-joinus">
|
||||||
|
|
||||||
|
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
||||||
|
|
||||||
|
<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-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
|
||||||
|
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||||
|
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
|
||||||
|
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
||||||
|
<RouterLink :to="{ name: 'home' }">
|
||||||
|
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||||
|
class="mt-4 send-btn" block>
|
||||||
|
Envoyez
|
||||||
|
</v-btn>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-container>
|
||||||
|
<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 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>
|
||||||
|
|
||||||
|
</v-container>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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' }">
|
<RouterLink :to="{ name: 'home' }">
|
||||||
<v-btn size="large"
|
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
|
||||||
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
|
Accueil
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<v-container>
|
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
|
||||||
<v-row justify="center" align="center">
|
<v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||||
<v-col cols="auto">
|
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
|
||||||
<img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
|
label="Pourquoi voulez-vous participer au développement" placeholder="Écrivez votre message ici" rows="3"
|
||||||
style="max-width: 400px; margin-top: 14%; height: auto; float: right;">
|
auto-grow></v-textarea>
|
||||||
</v-col>
|
<v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
|
||||||
<v-col style="max-width: 700px;">
|
label="Avez-vous déjà des comptes sur les réseaux sociaux ?" placeholder="Écrivez votre message ici" rows="3"
|
||||||
<h1 style=" font-size: 3rem; margin-bottom: 5%;" class="h1-inscription-beta">Participez au
|
auto-grow></v-textarea>
|
||||||
développement</h1>
|
<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>
|
||||||
<v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
|
Envoyez
|
||||||
|
</v-btn>
|
||||||
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101); background-color: #F4F4F4"></v-text-field>
|
</RouterLink>
|
||||||
|
|
||||||
<v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
|
|
||||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
|
||||||
|
|
||||||
<v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
|
|
||||||
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
|
|
||||||
|
|
||||||
|
|
||||||
<RouterLink :to="{ name: 'home' }">
|
|
||||||
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
|
||||||
class="mt-4" block>Envoyez</v-btn>
|
|
||||||
</RouterLink>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
|
|
||||||
<v-container style="max-width: 1200px;">
|
|
||||||
<p class="para-inscription" style="margin-top: -4%; font-size: 1.3rem;">Rejoignez l'aventure
|
|
||||||
Hutopy : une
|
|
||||||
invitation à façonner l'avenir de la création.
|
|
||||||
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
|
|
||||||
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
|
|
||||||
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
|
|
||||||
inspirer.
|
|
||||||
Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
|
|
||||||
écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
|
|
||||||
votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
|
|
||||||
idées.
|
|
||||||
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
|
|
||||||
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
|
|
||||||
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
|
|
||||||
l'innovation.
|
|
||||||
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
|
|
||||||
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
|
|
||||||
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
|
|
||||||
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
|
|
||||||
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
|
|
||||||
dans le ciel de notre utopie partagée.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</v-container>
|
|
||||||
|
|
||||||
<!-- Mobile -->
|
|
||||||
|
|
||||||
<v-container style="margin-top: -100px;">
|
|
||||||
|
|
||||||
<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>
|
<p class="h3-text paragraph">Rejoignez l'aventure
|
||||||
<p class="text-justify pa-4" style="font-size: 1em;">
|
Hutopy : une
|
||||||
Rejoignez l'aventure 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 plateforme,
|
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
|
||||||
mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie collective. Ici, votre
|
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
|
||||||
art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et inspirer.
|
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
|
||||||
Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un écosystème
|
inspirer.
|
||||||
florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser votre empreinte,
|
|
||||||
d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes idées.
|
|
||||||
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir votre
|
|
||||||
réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en profession,
|
|
||||||
d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et l'innovation.
|
|
||||||
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
|
|
||||||
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre numéro
|
|
||||||
de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
|
|
||||||
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite. Votre
|
|
||||||
aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile dans le ciel de
|
|
||||||
notre utopie partagée.
|
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
|
<p class="h3-text paragraph">
|
||||||
</div>
|
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.
|
||||||
|
|
||||||
<FormInscriptionBeta></FormInscriptionBeta>
|
|
||||||
|
|
||||||
<v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
|
</p>
|
||||||
block>Envoyez</v-btn>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
</v-container>
|
|
||||||
|
|
||||||
<FooterLayout></FooterLayout>
|
<FooterLayout></FooterLayout>
|
||||||
|
</v-app>
|
||||||
</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 {
|
@media (min-width: 150px) and (max-width: 598px) {
|
||||||
height: 800px;
|
.contact-image {
|
||||||
width: auto;
|
|
||||||
|
|
||||||
/* ajustez cette valeur selon votre besoin */
|
width: auto;
|
||||||
margin-bottom: 45px;
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
border-radius: 12px;
|
clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
|
margin-top: -40%;
|
||||||
/* ombre avec 2px de décalage vertical, 4px de flou et couleur noire transparente */
|
margin-bottom: -30%;
|
||||||
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;
|
.h2-Participez-au-développement {
|
||||||
margin-left: -1.0vw;
|
font-size: 1.8rem;
|
||||||
}
|
margin-top: 3%;
|
||||||
|
margin-bottom: 6%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-top: 16%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
margin-bottom: 10%;
|
||||||
|
margin-top: 3%;
|
||||||
|
margin-left: 3%;
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labelsize {
|
||||||
|
max-width: 95%;
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
.center-column {
|
|
||||||
width: 70vw;
|
|
||||||
/* ajustez cette valeur selon votre besoin */
|
|
||||||
margin: auto;
|
|
||||||
/* centre le contenu horizontalement */
|
|
||||||
}
|
|
||||||
|
|
||||||
.h1-inscription-beta {
|
|
||||||
font-size: 25px;
|
|
||||||
/* Taille de la police de 20 pixels */
|
|
||||||
font-weight: bold;
|
|
||||||
/* Texte en gras */
|
|
||||||
text-align: center;
|
|
||||||
/* Centrer le texte */
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
color: #24393c;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.h1-inscription-betacolor {
|
@media (min-width: 599px) and (max-width: 999px) {
|
||||||
font-size: 65px;
|
|
||||||
/* Taille de la police de 20 pixels */
|
.contact-image {
|
||||||
font-weight: bold;
|
border-radius: 25px;
|
||||||
/* Texte en gras */
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
||||||
text-align: center;
|
max-width: 100%;
|
||||||
/* Centrer le texte */
|
margin-top: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-btn {
|
||||||
|
margin-top: 5%;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 180px;
|
||||||
|
min-width: 175px;
|
||||||
|
margin-left: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
margin-bottom: 25px;
|
|
||||||
color: rgba(163, 14, 121, 0.85);
|
|
||||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.para-inscription {
|
@media (min-width: 1000px) and (max-width: 1279px) {
|
||||||
margin-bottom: 20px;
|
|
||||||
text-align: justify;
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 93%;
|
||||||
|
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: 95%;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@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: 66%;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user