Structure de base en place - Ce soir et vendredi soir, je vais nettoyer mes css.
This commit is contained in:
PascalMarchesseault
41
src/layouts/CardDonate.vue
Normal file
41
src/layouts/CardDonate.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<v-container class=" footer-donate-container">
|
||||
|
||||
<h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
|
||||
|
||||
|
||||
<v-text-field label="Montant"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
|
||||
<v-text-field label="Message"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
|
||||
<v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
|
||||
size="x-large" block>Faire un don</v-btn>
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.footer-donate-container {
|
||||
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
}
|
||||
</style>
|
||||
164
src/layouts/CreatorHeader.vue
Normal file
164
src/layouts/CreatorHeader.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="md:flex hidden items-center justify-between">
|
||||
<v-container>
|
||||
|
||||
|
||||
<div class="banner-container">
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
|
||||
style="margin-bottom: -80px;">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="banner-container ">
|
||||
<img src="../../../images/guillaume.png" class="profile-picture">
|
||||
<img src="../../../images/checkprofile.png" class="check-profile" style="margin-top: 5px;">
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px; text-align: center;">
|
||||
<v-container class="label-creator">
|
||||
<v-row justify="center">
|
||||
|
||||
<v-card style="width: 470px; margin-top: 10px;">
|
||||
<v-card-title class="card-background label-creator-texte-color">Guillaume
|
||||
Mousseau</v-card-title>
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-card style="width: 470px; margin-top: 10px;">
|
||||
<v-card-title class="card-background label-creator-texte-color">Créateur de
|
||||
contenus</v-card-title>
|
||||
</v-card>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="md:hidden flex flex-col items-center justify-center">
|
||||
<div style="margin-top: -100px;">
|
||||
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator" style="margin-top: 10;">
|
||||
|
||||
|
||||
|
||||
<div class="banner-container ">
|
||||
<img src="../../../images/guillaume.png" class="profile-picture-mobile">
|
||||
<img src="../../../images/checkprofile.png" class="check-profile-mobile" style="margin-top: 5px;">
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 150px; text-align: right;">
|
||||
<v-container class="label-creator" style="width: 105%;">
|
||||
<v-row justify="center">
|
||||
|
||||
<v-card style="width: 350px; margin-top: 5%; margin-left: 10%;">
|
||||
<v-card-title class="card-background2 label-creator-texte-color">Guillaume
|
||||
Mousseau</v-card-title>
|
||||
</v-card>
|
||||
|
||||
|
||||
|
||||
<v-card style="width: 350px; margin-top: 1%; margin-left: 10%;">
|
||||
<v-card-title class="card-background label-creator-texte-color">Créateur de
|
||||
contenus</v-card-title>
|
||||
</v-card>
|
||||
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style>
|
||||
.banner-creator {
|
||||
align-items: center;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.smooth-picture {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: -20px;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(163, 14, 121, 0.5);
|
||||
}
|
||||
|
||||
.profile-picture-mobile {
|
||||
border-radius: 50%;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
margin-top: 420px;
|
||||
margin-left: -230px;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(163, 14, 121, 0.5);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.check-profile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
margin-top: -90px;
|
||||
margin-left: 160px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.check-profile-mobile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
margin-top: -90px;
|
||||
margin-left: -80px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.label-creator-texte-color {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-creator {
|
||||
margin-right: 43px;
|
||||
margin-top: -160px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
/* Valeur inférieure pour placer derrière */
|
||||
}
|
||||
|
||||
|
||||
.card-background2 {
|
||||
background-color: rgba(163, 14, 121, 1);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-background {
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -9,38 +9,42 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="menu-center flex items-center justify-center space-x-12">
|
||||
|
||||
<router-link :to="{ name: 'home' }" class="text-green-700">
|
||||
<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>
|
||||
<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 :to="{ name: 'contact' }" class="text-green-700">
|
||||
<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>
|
||||
<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 :to="{ name: 'creatorfolio' }" class="text-green-700">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</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 profilePicture"
|
||||
alt="Logo">
|
||||
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,6 +54,8 @@
|
||||
<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' }">
|
||||
@@ -60,7 +66,7 @@
|
||||
<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"
|
||||
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
||||
alt="Logo">
|
||||
</router-link>
|
||||
</v-col>
|
||||
@@ -69,6 +75,7 @@
|
||||
|
||||
<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">
|
||||
@@ -98,8 +105,13 @@
|
||||
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>
|
||||
|
||||
@@ -26,6 +26,10 @@
|
||||
{{ new Date().getFullYear() }} — <strong>Hutopy</strong>
|
||||
</v-container>
|
||||
|
||||
|
||||
<v-container class="custom-footer">
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -39,7 +43,7 @@ export default {
|
||||
'Conditions générales',
|
||||
'Politique des contenus',
|
||||
'Programme Ambassadeurs',
|
||||
'conditions_utilisation',
|
||||
'conditions utilisation',
|
||||
'anti-exploitation',
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="md:flex hidden items-center justify-between flex-col">
|
||||
<div class="md:flex hidden justify-between flex-col">
|
||||
<div>
|
||||
<H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
|
||||
<h1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -15,26 +15,25 @@
|
||||
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 class="md:hidden flex flex-col justify-center">
|
||||
<div>
|
||||
<h1 class="h1-inscription-beta-Inscrivez-vous">Inscrivez-vous</h1>
|
||||
</div>
|
||||
<div style="margin-left: -45%; margin-right: -45%;">
|
||||
<v-text-field label="First name" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="Last name" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-text-field label="E-mail" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
|
||||
<v-textarea label="Pourquoi voulez-vous participer?" class="w-full"
|
||||
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
36
src/layouts/SimpleVideoCard.vue
Normal file
36
src/layouts/SimpleVideoCard.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<v-card class="vcard-descriptions-mobile" style="margin-top: 30px;">
|
||||
|
||||
<h1 class="h1profilemobile">Podcast #01</h1>
|
||||
|
||||
|
||||
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
|
||||
<iframe width="420" height="315" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
|
||||
</iframe>
|
||||
|
||||
<p class="text-justify pa-4" style="font-size: 1.2em">
|
||||
Voici mon nouveau podcast!
|
||||
|
||||
</p>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.vcard-descriptions-mobile {
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6);
|
||||
|
||||
}
|
||||
|
||||
.h1profilemobile {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.card-date {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user