UpdateUI Css Page creator
This commit is contained in:
PascalMarchesseault
@@ -1,115 +1,132 @@
|
||||
<template>
|
||||
<nav class="py-4 px-8 border-b border-gray-200 bg-custom">
|
||||
<nav class="py-8 px-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Version pour ordinateur -->
|
||||
<div class="md:flex hidden items-center justify-between">
|
||||
<div class="menu-left flex items-center">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="/images/Chevron.png" class="img-small mr-2 logo" alt="Logo">
|
||||
<img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<h1 class="textLogo">HUTOPIA</h1>
|
||||
|
||||
</router-link>
|
||||
|
||||
</div>
|
||||
<div class="menu-center flex space-x-12">
|
||||
<div class="menu-center flex items-center justify-center space-x-12">
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||
</svg>
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="menu-right">
|
||||
<router-link :to="{ name: 'yourprofile' }">
|
||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small" alt="Logo">
|
||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
</router-link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Version pour mobile -->
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container style="margin-top: -20px;">
|
||||
<v-row>
|
||||
<v-col cols="auto">
|
||||
<!-- Logo -->
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
|
||||
<v-col cols="auto">
|
||||
<!-- Photo de profil -->
|
||||
<router-link :to="{ name: 'yourprofile' }" class="text-green-700">
|
||||
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container class="text-center" style="margin-top: -30px;">
|
||||
<v-row class="justify-center">
|
||||
<!-- Premier lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Deuxième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
</v-col>
|
||||
<!-- Troisième lien avec icône -->
|
||||
<v-col cols="auto" class="mx-4">
|
||||
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</router-link>
|
||||
|
||||
</v-col>
|
||||
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
|
||||
|
||||
</v-row>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
<main class="px-8 py-6 bg-gray-100">
|
||||
<main class="px-8 py-3 ">
|
||||
<router-view />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS pour ajuster la taille de l'image */
|
||||
.img-small {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.text-custom {
|
||||
color: #000000;
|
||||
/* Couleur de texte spécifique */
|
||||
}
|
||||
|
||||
/* CSS pour le texte du menu-left */
|
||||
.menu-left a {
|
||||
color: #000000;
|
||||
/* Couleur du texte */
|
||||
font-weight: bold;
|
||||
/* Gras */
|
||||
text-decoration: none;
|
||||
/* Pas de soulignement */
|
||||
font-size: 24px;
|
||||
/* Taille de la police en pixels */
|
||||
}
|
||||
|
||||
/* CSS pour le texte des liens du menu-center */
|
||||
.menu-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* Centrer les éléments horizontalement */
|
||||
align-items: center;
|
||||
/* Centrer les éléments verticalement */
|
||||
flex: 1;
|
||||
/* Utiliser tout l'espace disponible */
|
||||
}
|
||||
|
||||
/* CSS pour le texte du menu-right */
|
||||
.menu-right a {
|
||||
color: #e4e4e4;
|
||||
/* Couleur du texte */
|
||||
}
|
||||
|
||||
.bg-custom {
|
||||
background-color: #ffffff;
|
||||
/* Définissez la couleur de fond souhaitée */
|
||||
}
|
||||
|
||||
.textLogo {
|
||||
font-size: 35px;
|
||||
/* Taille de la police en pixels */
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-right: 5px;
|
||||
/* Réduire la marge entre le logo et le texte */
|
||||
|
||||
}</style>
|
||||
|
||||
<style src="../cssstyle/index.css"></style>
|
||||
100
src/layouts/FooterLayout.vue
Normal file
100
src/layouts/FooterLayout.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div style="background-color: rgb(107, 0, 101, 1); min-height: 10vh; display: flex; flex-direction: column;">
|
||||
<v-container style="background-color: rgb(107, 0, 101, 1);">
|
||||
<v-row justify="center" style="margin-top: 30px;">
|
||||
<v-row cols="auto" class="d-flex justify-center">
|
||||
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561"><img src="../../../images/facebookicon.png"
|
||||
alt="Description image 2" style="width: 50px; height: 50px; margin-right: 40px;"></a>
|
||||
<a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instafacebook.png"
|
||||
alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px;"></a>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<img src="../../../images/ChevronBlanc.png" alt="Description image 1"
|
||||
style="width: 50px; height: 50px; margin-right: 40px;">
|
||||
</router-link>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container class="text-center" style="flex-grow: 1;">
|
||||
<v-btn v-for="link in links" :key="link" class="mx-2" color="white" rounded="xl" variant="text">
|
||||
{{ link }}
|
||||
</v-btn>
|
||||
</v-container>
|
||||
|
||||
<v-container class="text-white text-center">
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy</strong>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
links: [
|
||||
'Aide & Contact',
|
||||
'Conditions générales',
|
||||
'Politique des contenus',
|
||||
'Programme Ambassadeurs',
|
||||
'conditions_utilisation',
|
||||
'anti-exploitation',
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-footer {
|
||||
background-color: rgb(107, 0, 101, 1);
|
||||
padding: 10px;
|
||||
/* Ajoute un rembourrage intérieur de 10px autour du contenu du footer */
|
||||
margin: 0;
|
||||
/* Réinitialise les marges à zéro */
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0 !important;
|
||||
/* Annule la marge de v-app */
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* Pour aligner le contenu verticalement */
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
}
|
||||
|
||||
footer a:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
/* Ajoute de l'espace entre les images et les liens */
|
||||
}
|
||||
|
||||
.footertextcolor {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 40px;
|
||||
color: azure;
|
||||
}
|
||||
|
||||
.socialiconspacer {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.custom-color-button {
|
||||
background-color: rgb(255, 0, 0);
|
||||
/* Your custom color */
|
||||
color: white;
|
||||
/* Text color */
|
||||
font-size: 1.5rem;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
}
|
||||
</style>
|
||||
57
src/layouts/FormInscriptionBeta.vue
Normal file
57
src/layouts/FormInscriptionBeta.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<div>
|
||||
<H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-text-field label="First name"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="Last name"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="E-mail"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-textarea label="Pourquoi voulez-vous participer?"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
|
||||
<div>
|
||||
<H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-text-field label="First name"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="Last name"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="E-mail"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-textarea label="Pourquoi voulez-vous participer?"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.h1-inscription-beta-Inscrivez-vous {
|
||||
font-size: 20px;
|
||||
/* Taille de la police de 20 pixels */
|
||||
font-weight: bold;
|
||||
/* Texte en gras */
|
||||
text-align: center;
|
||||
/* Centrer le texte */
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user