Cleaning Homeview
This commit is contained in:
PascalMarchesseault
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user