modelec/modelec.club
1
0
Fork 0
mirror of https://github.com/modelec/modelec.club.git synced 2026-01-18 16:37:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add carousel for partenaires

Browse Source
This commit is contained in:
Félix MARQUET
2024-09-03 09:47:47 +02:00
parent fbe3318eb0
commit e70e1af157
6 changed files with 99 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/partners/bde.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
assets/partners/isen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/partners/mercurycloud.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

22
index.html
View File

@@ -7,6 +7,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
<div id="content">
@@ -33,6 +34,27 @@
Nous voulons réitérer notre participation à la coupe de France de robotique en 2025. Nous voulons également organiser des ateliers de soudure, de programmation et de modélisme. Cette année, nous aimerions également organiser des événements autour de ces thèmes comme des visites de Fablab, des initiations,…
</p>
</div>
<div class="card">
<h1 class="card-title">Nos partenaires</h1>
<p class="card-text">
<div class="slideshow-container">
<div class="slide fade">
<img src="assets/partners/mercurycloud.png" alt="Logo Mercury Cloud" class="partner-logo"></a>
<a href="https://mercurycloud.fr"><p class="partner-name">Mercury Cloud</p></a>
</div>
<div class="slide fade">
<img src="assets/partners/isen.png" alt="Logo ISEN Nantes" class="partner-logo"></a>
<a href="https://www.isen-ouest.fr"><p class="partner-name">ISEN Nantes</p></a>
</div>
<div class="slide fade">
<img src="assets/partners/BDE.jpg" alt="Logo BDE ISEN Nantes" class="partner-logo"></a>
<a href="https://www.instagram.com/odyssey_bde/"><p class="partner-name">Odyssey BDE ISEN Nantes</p></a>
</div>
<button class="prev" onclick="plusSlides(-1)">&#10094;</button>
<button class="next" onclick="plusSlides(1)">&#10095;</button>
</div>
</div>
<div class="card-large-width">
<h1 class="card-title">Notre robot</h1>
<p class="card-text">

22
script.js Normal file
View File

@@ -0,0 +1,22 @@
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "flex";
setTimeout(showSlides, 2000);
}

55
style.css
View File

@@ -113,4 +113,59 @@ body{
margin: 0;
padding: 0;
background-color: #f1f1fb;
}
.partner-logo{
max-width: 100px;
margin: 0 auto;
}
.slideshow-container{
max-width: 100%;
position: relative;
margin: 0 auto;
}
.slide{
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
padding: 0;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 50%;
user-select: none;
background-color: #666666;
}
.next {
right: 0;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}