edit: ajout images & correction bug typo et responsive
This commit is contained in:
@@ -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{
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user