edit: ajout images & correction bug typo et responsive

This commit is contained in:
2026-03-11 03:34:34 +01:00
parent e92655ac93
commit 9b8b63cdc6
14 changed files with 137 additions and 6 deletions
@@ -38,8 +38,11 @@
Pour cette raison, nous imposons notamment <b id="accentAbout">le port du masque FFP2 pour toutes les activités se déroulant à l'intérieur.</b>
<br>
On veut aussi que nos soirées soient respectueuses de lenvironnement (il faut utiliser un maximum de matériaux de récupérations) et véganes (pas de vente de produits dorigine animale).
</div>
<br>
<br>
<br>
.
</div>
</div>
</div>
@@ -54,6 +57,7 @@
left: 2.5%;
z-index: 66;
cursor: ns-resize;
overflow: hidden;
}
#aboutText{
@@ -12,19 +12,19 @@
</div>
<div class="windowContent" id="contactContent">
<div id="contactCardContainer">
<a href="#" class="contactLink">
<a href="https://www.instagram.com/urazoria_aa/" target="_blank" class="contactLink">
<div class="contactCard">
<div id="contactName">Urazoria</div>
<div id="contactField">Perf Drag</div>
</div>
</a>
<a href="#" class="contactLink">
<a href="mailto:me@epickiwi.fr" target="_blank" class="contactLink">
<div class="contactCard">
<div id="contactName">Kiwi</div>
<div id="contactField">Perf Nerds</div>
</div>
</a>
<a href="#" class="contactLink">
<a href="https://signal.me/#eu/76w7wcHZpW1HtunwdjbIJZWpTGVMCqobn_qAzhGBrSRd8cGtdq9NZJondaOHJ9iM" target="_blank" class="contactLink">
<div class="contactCard">
<div id="contactName">Vega</div>
<div id="contactField">Scéno</div>
@@ -0,0 +1,113 @@
<template>
<div id="imgContainer">
<img src="../assets/photos/group.png" class="imgStyle" id="img001">
<img src="../assets/photos/ura-bleu.png" class="imgStyle" id="img002">
<img src="../assets/photos/ura-rouge.png" class="imgStyle" id="img003">
<img src="../assets/photos/ura-vert.png" class="imgStyle" id="img004">
</div>
</template>
<style scoped>
#imgContainer{
position: fixed;
width:100vw;
height: 100vh;
background-color: transparent;
z-index: 29;
}
.imgStyle{
position: fixed;
width: 333px;
height: auto;
border-radius: 16.1px;
}
#img001{
top:16.1%;
left:33.3%;
width:250px;
z-index: 31;
}
#img002{
top:20%;
left:-5%;
z-index: 32;
width:200px;
}
#img003{
top:1.61%;
left:13.12%;
width:150px;
z-index: 30;
}
#img004{
top:-3.33%;
left:60%;
width:150px;
}
/*=======================Format PC étroit*/
@media(min-width: 600px){
#img001{
top:16.1%;
left:33.3%;
width:300px;
z-index: 31;
}
#img002{
top:20%;
left:0%;
z-index: 32;
width:333px;
}
#img003{
top:1.61%;
left:13.12%;
width:200px;
z-index: 30;
}
#img004{
top:-3.33%;
left:60%;
width:200px;
}
}
/*=======================Format PC large*/
@media(min-width: 1000px){
#img001{
top:16.1%;
left:50%;
width:333px;
z-index: 31;
}
#img002{
top:13.12%;
left:20%;
z-index: 32;
width:400px;
}
#img003{
top:-3.33%;
left:33.3%;
width:200px;
z-index: 30;
}
#img004{
top:-3.33%;
left:60%;
width:200px;
}
}
</style>
<script>
export default {
name : 'ImagePannel',
mounted(){
console.log("Image pannel is loaded!");
}
};
</script>
@@ -41,6 +41,10 @@
<p>
<strong id="accentWS">Venez, quelque soit votre intérêt spécifique.</strong>
</p>
<br>
<br>
<br>
.
</div>
</div>
</div>
@@ -64,6 +68,7 @@
left: 2.5%;
z-index: 66;
cursor: ns-resize;
overflow: hidden;
}
a{
color: var(--accent-color);