From e2abab96ef36fb1bdf4ea45f3bf635e1d78a2bb3 Mon Sep 17 00:00:00 2001 From: Samah Hussein Youssef Date: Wed, 4 Sep 2024 14:54:23 +0200 Subject: [PATCH] homepage images --- _layouts/default.html | 47 +++++++++++++++++++++-------------- carousel.html | 25 +++++++++++++++++++ css/group.scss | 17 ++++++++++--- css/styles.css | 58 +++++++++++++++++++++++++++++++++++++++++++ index.html | 5 ++++ js/script.js | 26 +++++++++++++++++++ 6 files changed, 155 insertions(+), 23 deletions(-) create mode 100644 carousel.html create mode 100644 css/styles.css create mode 100644 js/script.js diff --git a/_layouts/default.html b/_layouts/default.html index 08ac2ea..1eb8947 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -22,33 +22,42 @@ +

Sensing and Networking Systems Lab

+ - + + + + {% if page.image %} + + + Image Carousel + + + +
+
+
+ Image 1 +
+
+ Image 2 +
+
+ Image 3 +
+
+ + +
+ + + diff --git a/css/group.scss b/css/group.scss index 2723227..7c269d0 100644 --- a/css/group.scss +++ b/css/group.scss @@ -10,8 +10,8 @@ body { } .header { - border-bottom: 1px solid $light-gray; - padding-bottom: 10px; + border-bottom: 0px solid $light-gray; + padding-bottom: 5px; margin-bottom: 20px; text-align: center; } @@ -53,8 +53,8 @@ a > .fa { /* Group logo */ #logo { - width: 120px; - height: 55px; + width: 180px; + height: 80px; margin: 2px 0 8px 0; } @@ -148,3 +148,12 @@ svg { // make the alignment just like img from bootstrap's reboot.scss vertical-align: middle; } + + +.half-width-hr { + width: 100%; /* Set the width to 50% of the page */ + border: none; /* Remove default border styling */ + height: 1px; /* Set the height of the line */ + background-color: $light-gray; /* Set the color of the line */ + margin: 20px auto; /* Center the line horizontally and add margin above/below */ +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..4ec80a9 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,58 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f4f4f4; +} + +.carousel { + position: relative; + width: 150%; + max-width: 1000px; + overflow: hidden; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.carousel-inner { + display: flex; + transition: transform 2s ease-in-out; +} + +.carousel-item { + min-width: 100%; + transition: opacity 1.9s ease-in-out; +} + +.carousel-item img { + width: 100%; + height: 100%; + object-fit: contain; /* Ensures the entire image fits within the carousel item */ + display: block; + background-color: rgb(255, 255, 255); /* Optional: add a background color if there's empty space */ +} + + +.carousel-control { + position: absolute; + top: 50%; + transform: translateY(-50%); + background-color: rgba(0, 0, 0, 0.5); + color: white; + border: none; + padding: 10px; + cursor: pointer; + font-size: 18px; +} + +.carousel-control.prev { + left: 20px; +} + +.carousel-control.next { + right: 20px; +} diff --git a/index.html b/index.html index 6c16685..019577b 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,11 @@ role-tables: --- + + + + +

The Laboratory of Sensing and Networking Systems (SENS) at EPFL an interdisciplinary research group dedicated to diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..de5da01 --- /dev/null +++ b/js/script.js @@ -0,0 +1,26 @@ +let currentIndex = 0; + +function showSlide(index) { + const slides = document.querySelectorAll('.carousel-item'); + if (index >= slides.length) { + currentIndex = 0; + } else if (index < 0) { + currentIndex = slides.length - 1; + } else { + currentIndex = index; + } + + const offset = -currentIndex * 100; + document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`; +} + +function nextSlide() { + showSlide(currentIndex + 1); +} + +function prevSlide() { + showSlide(currentIndex - 1); +} + +// Optional: Automatically move to the next slide every 3 seconds +setInterval(nextSlide, 8000);