gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finalisation home page

Browse Source
This commit is contained in:
Julie
2026-02-06 20:20:01 +01:00
parent 91c1b03a2f
commit d9ac2b4cc5
45 changed files with 1892 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
app/components/BannierePros.vue Normal file
View File

@@ -0,0 +1,266 @@
<!-- Utilisé pour : -->
<!-- Index.vue / Encart PROS bas de page -->
<template>
<div class="banniere_pros_wp">
<div class="studio_img">
<DsMedia src="/contenus/studio_img_1.webp" alt="Image du studio pro" ratio="16-9" />
</div>
<div class="banniere_pros--description studio_description">
<div>
<img src="/img/logos/logo_le_studio_noir.png" alt="Logo du studio pro" width="200">
</div>
<DsHeading as="h5" tone="default" class="banniere_pros--description--titre">
On enregistre au studio !
</DsHeading>
<DsText as="p" tone="default" :clamp="3">
Un grand studio modulaire ouvert à tous les professionnels aux portes de Paris
</DsText>
</div>
<div class="parc_img">
<DsMedia src="/contenus/studio_img_2.webp" alt="Image du studio pro" ratio="16-9" />
</div>
<div class="banniere_pros--description parc_description">
<div>
<img src="/img/logos/logo_le_parc_noir.png" alt="Logo du parc instrumental pro" width="150">
</div>
<DsHeading as="h5" tone="default" class="banniere_pros--description--titre">
+ de 3 000 instruments en location
</DsHeading>
<DsText as="p" tone="default" :clamp="3">
Location d’instruments de musique pour les professionnels et les amateurs
</DsText>
</div>
</div>
</template>
<script setup>
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
</script>
<style lang="scss">
.banniere_pros_wp {
display: grid;
}
@media (max-width: 599px) {
.banniere_pros_wp {
padding-left: 10px;
}
}
@media (min-width: 500px) {
.banniere_pros_wp {
row-gap: 50px;
}
}
@media (max-width: 399px) {
.banniere_pros_wp {
grid-template-columns: 30px 240px;
grid-template-rows: 130px 60px 130px 42px 111px 70px 140px;
//justify-content: center;
.ds-media--16-9 {
aspect-ratio: 4 / 3;
}
}
}
@media (min-width: 400px) {
.banniere_pros_wp {
grid-template-columns: 80px 290px;
grid-template-rows: 150px 60px 130px 42px 170px 70px 140px;
//justify-content: center;
.ds-media--16-9 {
aspect-ratio: 4 / 3;
}
}
}
@media (min-width: 500px) {
.banniere_pros_wp {
grid-template-columns: 150px 270px 40px 40px;
grid-template-rows: auto;
//justify-content: center;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
@media (min-width: 600px) {
.banniere_pros_wp {
grid-template-columns: 220px 250px 40px 40px;
grid-template-rows: auto;
//justify-content: center;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
@media (min-width: 700px) {
.banniere_pros_wp {
grid-template-columns: 220px 250px 40px 40px;
grid-template-rows: auto;
//justify-content: center;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
@media (min-width: 800px) {
.banniere_pros_wp {
grid-template-columns: 100px 190px 20px 40px 110px 140px 160px;
grid-template-rows: auto;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 4 / 3;
}
}
}
@media (min-width: 900px) {
.banniere_pros_wp {
grid-template-columns: 130px 190px 40px 30px 160px 130px 169px;
grid-template-rows: auto;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 4 / 3;
}
}
}
@media (min-width: 1000px) {
.banniere_pros_wp {
grid-template-columns: 160px 200px 90px 50px 160px 150px 150px;
grid-template-rows: auto;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
@media (min-width: 1100px) {
.banniere_pros_wp {
grid-template-columns: 200px 200px 100px 50px 200px 150px 150px;
grid-template-rows: auto;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
@media (min-width: 1200px) {
.banniere_pros_wp {
grid-template-columns: 230px 200px 100px 50px 230px 150px 150px;
grid-template-rows: auto;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
@media (min-width: 1300px) {
.banniere_pros_wp {
grid-template-columns: 270px 200px 100px 50px 270px 150px 150px;
grid-template-rows: auto;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
@media (min-width: 1400px) {
.banniere_pros_wp {
grid-template-columns: 320px 200px 100px 50px 320px 150px 150px;
grid-template-rows: auto;
align-items: center;
.ds-media--16-9 {
aspect-ratio: 16 / 9;
}
}
}
/* IMAGES */
.studio_img {
grid-column: 1 / 3;
grid-row: 1;
z-index: 1;
}
@media (max-width: 499px) {
.studio_img {
grid-column: 1 / 3;
grid-row: 1/2;
z-index: 1;
}
}
.parc_img {
grid-column: 4 / 7;
grid-row: 1;
z-index: 1;
}
@media (max-width: 799px) {
.parc_img {
grid-column: 1 / 3;
grid-row: 2;
z-index: 1;
}
}
@media (max-width: 499px) {
.parc_img {
grid-column: 1 / 3;
grid-row: 5/6;
z-index: 1;
}
}
/* DESCRIPTIONS (au-dessus des images) */
.studio_description {
grid-column: 2 / 5;
grid-row: 1;
z-index: 2;
}
@media (max-width: 499px) {
.studio_description {
grid-column: 2;
grid-row: 2/4;
z-index: 2;
}
}
.parc_description {
grid-column: 6 / 8;
grid-row: 1;
z-index: 2;
}
@media (max-width: 799px) {
.parc_description {
grid-column: 2 / 5;
grid-row: 2;
z-index: 2;
}
}
@media (max-width: 499px) {
.parc_description {
grid-column: 2;
grid-row: 6/8;
z-index: 2;
}
}
.banniere_pros--description {
background-color: var(--c-background-blanc-casse);
padding: 17px;
max-height: 170px;
&--titre {
font-size: 18px;
}
}
</style>