UpdateUI Css Page creator
This commit is contained in:
PascalMarchesseault
@@ -1,28 +1,141 @@
|
||||
<template>
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<main class="top-aligned-column">
|
||||
|
||||
<!--PC -->
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<main class="top-aligned-column grid grid-cols-3 gap-4">
|
||||
|
||||
<div class="column"></div>
|
||||
<div class="center-column" style="width: 70vw; margin: auto;">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rectangular-image h-full flex justify-center items-center">
|
||||
<img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="h1-inscription-betacolor">Hutopy</h1>
|
||||
<h1 class="h1-inscription-beta">Participez au développement de </h1>
|
||||
|
||||
<p class="para-inscription">
|
||||
Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
|
||||
nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
|
||||
passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
|
||||
rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
|
||||
utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
|
||||
</p>
|
||||
<FormInscriptionBeta></FormInscriptionBeta>
|
||||
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
||||
class="mt-4" block>Envoyez</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mobile -->
|
||||
|
||||
<v-container style="margin-top: -100px;">
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
|
||||
<h1 class="h1-inscription-beta">Participez au développement de </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="text-justify pa-4" style="font-size: 1em;">
|
||||
Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
|
||||
nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
|
||||
passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
|
||||
rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
|
||||
utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
|
||||
</p>
|
||||
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
|
||||
</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 class="column">
|
||||
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
<div class="center-column column">
|
||||
<p>Contact2</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<FooterLayout></FooterLayout>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
|
||||
|
||||
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.contactpicture {
|
||||
margin-top: 15px;
|
||||
/* ajustez cette valeur selon votre besoin */
|
||||
margin-bottom: 45px;
|
||||
border-radius: 12px;
|
||||
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 {
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
/* 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;
|
||||
/* 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;
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
}
|
||||
|
||||
.para-inscription {
|
||||
margin-bottom: 20px;
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user