edit: ajout images & correction bug typo et responsive

v0-appel-projet/src/App.vue

@@ -8,6 +8,7 @@
     <GrainOverlay name="grain" class="overlay"/>
     <workshopPannel v-show="workshopActive" @close="workshopToggle" :class="{alonePannel: workshopIsAlone}"></workshopPannel>
     <aboutPannel v-show="aboutActive" @close="aboutToggle"></aboutPannel>
+    <imagePannel></imagePannel>
     <div id="titleContainer">
       <div id="windowContainer">
         <div id="imgContainer">
@@ -103,7 +104,7 @@
     border-radius: 16.1px;
     border-color: var(--dark-color);
     border-width: thin;
-    margin-bottom: 3.33%;
+    margin-bottom: 5%;
   }
 
   #imgContainer{
@@ -192,6 +193,7 @@
     margin-left: 16.1px;
     margin-right: 16.1px;
     align-self: flex-start;
+    z-index: 34;
   }
 
   #descTextTop{
@@ -213,6 +215,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    z-index: 33;
   }
 
   .btnStyle{
@@ -242,6 +245,10 @@
     animation: float 1s infinite;
   }
 
+  #joinUs:hover{
+    animation: none;
+  }
+
   /*============Format tel*/
   @media(max-width:999px){
     #windowContainer{
@@ -281,7 +288,7 @@
     }
 
     #windowContainer{
-      margin-top: 5vh;
+      margin-top: 16.1vh;
       margin-left: 10%;
       width: 80%;
       height: 80%;

v0-appel-projet/src/components/AboutPannel.vue

@@ -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 l’environnement (il faut utiliser un maximum de matériaux de récupérations) et véganes (pas de vente de produits d’origine animale).
-
         </div>
+        <br>
+        <br>
+        <br>
+        .
       </div>
     </div>
   </div>
@@ -54,6 +57,7 @@
     left: 2.5%;
     z-index: 66;
     cursor: ns-resize;
+    overflow: hidden;
   }
 
   #aboutText{

v0-appel-projet/src/components/ContactPannel.vue

@@ -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>

v0-appel-projet/src/components/ImagePannel.vue

@@ -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>

v0-appel-projet/src/components/WorkshopPannel.vue

@@ -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);

v0-appel-projet/src/main.js

@@ -7,6 +7,7 @@ import App from './App.vue'
 import AboutPannel from './components/AboutPannel.vue'
 import ContactPannel from './components/ContactPannel.vue'
 import WorkshopPannel from './components/WorkshopPannel.vue'
+import ImagePannel from './components/ImagePannel.vue'
 
 
 // création app racine
@@ -16,6 +17,7 @@ const app = createApp(App);
 app.component('aboutPannel', AboutPannel);
 app.component('contactPannel', ContactPannel);
 app.component('workshopPannel', WorkshopPannel);
+app.component('imagePannel', ImagePannel);