jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update - ContactView (mise en page du code + nettoyage ) + App.vue(Ajout de v-app pour corriger le background)

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-27 23:51:06 -04:00
parent b170a0117e
commit 5cd4eb531a
2 changed files with 60 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@@ -1,8 +1,10 @@
<template>
<RouterView>
<v-app>
<RouterView>
</RouterView>
</RouterView>
</v-app>
</template>
<script>

111
src/views/main/ContactView.vue
View File

@@ -1,47 +1,32 @@
<template>
<!--PC -->
<v-app style="background-color: #F4F4F4; ">
<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>
<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>
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
</RouterLink>
</v-col>
</v-row>
</v-container>
<v-container class="row-between-logo-text">
<v-row>
<v-col>
</v-col>
<v-spacer></v-spacer>
<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>
@@ -54,12 +39,9 @@
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>
class="mt-4 send-btn" block>Envoyez </v-btn>
</RouterLink>
</v-col>
</v-row>
@@ -74,7 +56,6 @@
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
@@ -82,12 +63,7 @@
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
@@ -99,30 +75,25 @@
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-spacer></v-spacer>
</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' }">
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
@@ -132,7 +103,6 @@
</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)"
@@ -148,10 +118,6 @@
</v-btn>
</RouterLink>
<p class="h3-text paragraph">Rejoignez l'aventure
Hutopy : une
invitation à façonner l'avenir de la création.
@@ -159,7 +125,6 @@
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">
@@ -169,12 +134,8 @@
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
@@ -186,15 +147,11 @@
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>
<FooterLayout></FooterLayout>
</v-app>
</div>
</template>
@@ -204,6 +161,10 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
<style scoped>
.hutopy-backgroud-color {
background-color: #f4f4f4;
}
@media (min-width: 150px) and (max-width: 598px) {
.contact-image {
@@ -232,6 +193,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.home-btn {
margin-left: 20%;
margin-top: 16%;
border-radius: 150px;
}
.paragraph {
@@ -253,7 +215,8 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
}
@media (min-width: 599px) and (max-width: 999px) {
@media (min-width: 599px) and (max-width: 749px) {
.contact-image {
border-radius: 25px;
@@ -268,7 +231,45 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 150%;
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 {
@@ -424,7 +425,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 93%;
margin-left: 75%;
margin-top: 40%;
@@ -491,7 +492,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.home-btn {
margin-top: 5%;
margin-left: 95%;
margin-left: 47%;
border-radius: 30px;
width: 180px;
min-width: 175px;
@@ -562,7 +563,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.home-btn {
margin-top: 5%;
margin-left: 66%;
margin-left: 33%;
border-radius: 30px;
width: 180px;
min-width: 175px;