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

Modifié contactview version mobile, le defualtLayout afin d'ajouter le menu mobile sur toutes les pages, index j'ai modifier quand non change de page pour remonter dans le haut de la page. Contact view j'avais un petit bug avec l'image et j,ai ajouté un effet sur la photo

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-29 14:03:02 -04:00
parent 5cd4eb531a
commit e339b5ff67
4 changed files with 203 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
<template>
<DefaultLayout></DefaultLayout>
<!--PC -->
<div class="hutopy-backgroud-color">
<div class="hidden-xs flex-col items-center page-margin">
@@ -6,9 +7,9 @@
<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>
<img class="hutopy-header-image" src="../../../images/hutopy.png">
<v-col class="ml-0 text-left ">
<RouterLink :to="{ name: 'home' }">
@@ -24,6 +25,7 @@
<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>
@@ -85,22 +87,14 @@
</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-spacer style="margin-bottom: 25px;"></v-spacer>
<v-img src="../../../images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
style="clip-path: polygon(0 20%, 100% 0, 100% 60%, 0 100%);"></v-img>
<v-row>
<v-col cols="7">
<v-col cols="12">
<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>
@@ -156,6 +150,7 @@
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
</script>
@@ -184,10 +179,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.h2-Participez-au-développement {
font-size: 1.8rem;
margin-top: 3%;
font-size: 1.4rem;
margin-top: 10%;
margin-bottom: 6%;
margin-left: 5%;
font-weight: 600;
}
.home-btn {
@@ -223,20 +219,22 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
max-width: 100%;
margin-top: 4%;
height: 103%;
}
.home-btn {
margin-top: 5%;
margin-top: 20%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 70%;
width: 140px;
min-width: 140px;
margin-left: 55%;
}
.h2-Participez-au-développement {
font-size: 2rem;
margin-top: -3%;
font-size: 1.6rem;
margin-top: 10%;
margin-bottom: 6%;
}
@@ -250,6 +248,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
}
.hutopy-header-image {
margin-top: 6%;
width: 400px;
margin-left: 2%;
}
}
@@ -264,17 +267,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
}
.home-btn {
margin-top: 5%;
margin-top: 35%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 74%;
width: auto;
min-width: 160px;
max-width: 180px;
margin-left: 40%;
}
.h2-Participez-au-développement {
font-size: 2rem;
margin-top: -3%;
margin-top: 10%;
margin-bottom: 6%;
}
@@ -287,7 +293,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
margin-top: 3%;
}
.hutopy-header-image {
margin-top: 6%;
width: 500px;
margin-left: 1%;
}
}
@@ -296,7 +306,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 120px;
margin-left: -0%;
margin-left: 1%;
}
@@ -306,7 +316,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 22%;
margin-left: 30%;
margin-top: 37%;
@@ -350,7 +360,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 165px;
margin-left: -4%;
margin-left: -2.8%;
}
.home-btn {
@@ -359,7 +369,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 50%;
margin-left: 53%;
margin-top: 45%;
@@ -416,7 +426,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 165px;
margin-left: -5%;
margin-left: -3%;
}
.home-btn {
@@ -425,7 +435,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 75%;
margin-left: 82%;
margin-top: 40%;
@@ -481,7 +491,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 160px;
margin-left: -8%;
margin-left: -4.6%;
}
.contact-image {
@@ -492,7 +502,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.home-btn {
margin-top: 5%;
margin-left: 47%;
margin-left: 53%;
border-radius: 30px;
width: 180px;
min-width: 175px;
@@ -551,7 +561,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 180px;
margin-left: 7%;
margin-left: 3.5%;
}
.contact-image {
@@ -563,7 +573,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.home-btn {
margin-top: 5%;
margin-left: 33%;
margin-left: 30%;
border-radius: 30px;
width: 180px;
min-width: 175px;