sens-lab
/
website
mirror of https://github.com/arman-maghsoudnia/sens-test.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

homepage images

Browse Source
master
Samah Hussein Youssef 2 months ago
parent fd4a8164c4
commit e2abab96ef
6 changed files with 155 additions and 23 deletions
Show Stats Download Patch File Download Diff File

47
_layouts/default.html
Unescape Escape View File

@ -22,33 +22,42 @@
<img src="{{ site.base }}/img/SENS-logo-nobg.png"
srcset="{{ site.base }}/img/SENS-logo-nobg.png 2x"
alt="Awesome" id="logo">
<p style="font-size: 15px;">Sensing and Networking Systems Lab</p>
</a>
<ul class="nav nav-pills justify-content-center">
<div class="container">
<ul class="nav nav-pills justify-content-center">
{% assign shorturl = page.url | replace:'.html','' | replace:'index','' %}
{% for item in site.navigation %}
{% assign shorturl = page.url | replace:'.html','' | replace:'index','' %}
{% for item in site.navigation %}
{% assign itemshorturl = item.link | replace:'.html','' %}
{% assign itemshorturl = item.link | replace:'.html','' %}
{% assign maybe-active = '' %}
{% if item.title == 'Research' and page.layout == 'project' %}
{% assign maybe-active = 'active' %}
{% endif %}
{% if itemshorturl == shorturl or is-research %}
{% assign maybe-active = 'active' %}
{% endif %}
{% assign maybe-active = '' %}
{% if item.title == 'Research' and page.layout == 'project' %}
{% assign maybe-active = 'active' %}
{% endif %}
{% if itemshorturl == shorturl or is-research %}
{% assign maybe-active = 'active' %}
{% endif %}
<li class="nav-item">
<a class="nav-link {{ maybe-active }}"
href="{{ site.base }}{{ item.link }}">
{{ item.title }}
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ maybe-active }}"
href="{{ site.base }}{{ item.link }}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
<hr class="half-width-hr">
{% endfor %}
</ul>
</div>
</div>
{% if page.image %}
<img src="{{ page.image }}"

25
carousel.html
Unescape Escape View File

@ -0,0 +1,25 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Carousel</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/activty/greenScreen-4.png" alt="Image 1">
</div>
<div class="carousel-item">
<img src="img/activty/20240730_153345.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="img/activty/20240318_195731.jpg" alt="Image 3">
</div>
</div>
<button class="carousel-control prev" onclick="prevSlide()">&#10094;</button>
<button class="carousel-control next" onclick="nextSlide()">&#10095;</button>
</div>
<script src="js/script.js"></script>
</body>

17
css/group.scss
Unescape Escape View File

@ -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 */
}

58
css/styles.css
Unescape Escape View File

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

5
index.html
Unescape Escape View File

@ -26,6 +26,11 @@ role-tables:
---
<iframe src="carousel.html" style="width:100%; height:600px; border:none;"></iframe>
<div class="jumbotron">
<p>
The <b>Laboratory of Sensing and Networking Systems (SENS)</b> at <b>EPFL</b> an interdisciplinary research group dedicated to

26
js/script.js
Unescape Escape View File

@ -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);
Write Preview
Loading…
Cancel
Save