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

Cleaning Homeview

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-20 11:58:01 -04:00
parent 1fe1efc694
commit 01fa5472b5
1 changed files with 24 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/main/HomeView.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style="background-color: #F4F4F4;">
<DefaultLayout></DefaultLayout>
<!--PC -->
<!--PC ---------------------------------------------------------------------------------------------->
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons -->
@@ -87,6 +87,7 @@
</v-card>
</v-hover>
</v-col>
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
@@ -111,7 +112,6 @@
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
@@ -121,9 +121,12 @@
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
<v-row justify="center">
<v-col cols="6" md="7" lg="6">
<!-- Subtitle : Votre Hutopy -->
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
<!-- Your Hutopy text-->
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
@@ -133,6 +136,7 @@
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
la créativité.
</p>
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
@@ -152,7 +156,7 @@
</v-col>
</v-col>
<!-- 4 pictures -->
<v-col cols="6" md="5" lg="6">
<v-row justify="center" class="votre-hutopy-img">
<v-col cols="6" sm="12" md="12" lg="6">
@@ -177,18 +181,18 @@
</v-container>
<!-- They are on the Hutopy section -->
<v-row style="margin-top: 40px; margin-bottom: 60px;">
<v-spacer></v-spacer>
<!-- Subtitle :Ils sont sur Hutopy -->
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
<h1 style=" margin-bottom: 70px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
<v-spacer></v-spacer>
<v-col>
<!-- Account links -->
<v-row justify="center" class="profile-images">
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
@@ -205,33 +209,21 @@
<img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
</v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
</v-col>
<v-spacer></v-spacer>
</v-row>
</div>
<!-- Mobile -->
<!-- Mobile ---------------------------------------------------------------------------------------->
<div class="md:hidden flex flex-col items-center justify-center">
<div>
<!--Banner -->
<v-img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"></v-img>
<!-- Créer -->
<v-row style="margin-top: 30px;" align="center">
<v-col cols="6">
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
@@ -246,7 +238,7 @@
</v-col>
</v-row>
<!-- Partager -->
<v-row align="center">
<v-col>
<p style=" margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
@@ -262,6 +254,7 @@
</v-col>
</v-row>
<!-- Inspirer -->
<v-row align="center">
<v-col cols="6">
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
@@ -277,10 +270,11 @@
</v-col>
</v-row>
<!-- Votre Hutopy : Title -->
<v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
<!-- Votre Hutopy : Text -->
<v-row align="center">
<v-col cols="11" style="margin: 4%;">
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
@@ -300,6 +294,8 @@
</p>
</v-col>
</v-row>
<!-- 4 pictures -->
<v-row style="margin-left: 15px; margin-right: 15px;">
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/microphone.png"></v-img>
@@ -317,7 +313,7 @@
</v-col>
</v-row>
<!-- Inscription Btn -->
<v-container align="center">
<RouterLink :to="{ name: 'contact' }">
<v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
@@ -328,11 +324,11 @@
</v-container>
<!-- They are on the Hutopy section -->
<h1
style="margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 3rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
<v-spacer></v-spacer>
<v-col>
<v-row justify="center" class="profile-images">
<v-col cols="8">
@@ -352,21 +348,15 @@
</v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
</div>
</div>
<!-- Back-end tools -->
<v-btn variant="outlined" @click="callBackend()">
Get items
</v-btn>
<v-snackbar v-model="errorNoAccessSnackBar">
Vous n'etes pas connecter !
<template v-slot:actions>
@@ -396,10 +386,8 @@ import { useClient } from "@/plugins/api.js";
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const client = useClient();
let itemList = ref([]);
let errorNoAccessSnackBar = ref(false);
@@ -417,13 +405,8 @@ const goToLoginPage = () => {
router.push('/login');
}
</script>
<style src="../../cssstyle/index.css"></style>
<style src="../../cssstyle/homeView.css"></style>
<style scoped>
.center-vertical {
display: flex;
@@ -445,7 +428,6 @@ const goToLoginPage = () => {
.container-spacer {
margin-bottom: 50px;
/* Augmente l'espace entre les v-containers */
}
.profile-images {
@@ -473,7 +455,6 @@ const goToLoginPage = () => {
width: 100%;
height: 100%;
background-color: rgba(163, 14, 121, 0.80);
/* Voile noir avec une opacité de 0.5 */
display: flex;
text-align: left;
font-size: 1.5rem;
@@ -484,6 +465,7 @@ const goToLoginPage = () => {
.banner-image {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
margin-top: 60px;
}
.image-container:hover .overlay {
@@ -499,17 +481,14 @@ const goToLoginPage = () => {
.custom-container {
position: relative;
max-width: 100vw;
/* Limiter la largeur de la v-container à la largeur de l'écran */
}
.v-card {
max-width: calc(100% - 20px);
/* Limiter la largeur de la v-card à la largeur des trois photos avec un espacement de 10px de chaque côté */
}
.v-card-imagecontainerpos {
margin-top: 55px;
/* Déplace l'image vers le bas de 10 pixels */
border-radius: 8px;
}
@@ -651,11 +630,8 @@ body {
.créer-profiter-inspirer-row {
margin-top: -60px;
}
.banner-homepage {
transform: scale(1.0)
}
@@ -668,7 +644,6 @@ body {
.votre-hutopy-img {
margin-top: 65px;
}
}
@media (min-width: 2561px) {
@@ -696,6 +671,5 @@ body {
.votre-hutopy-img {
margin-top: -10px;
}
}
</style>