Skip to content

Commit 789b5ef

Browse files
axiomcuraaxiomcura
authored
Merge pull request #6 from abrollab/remove-elements
Adds responsive hero slideshow with controls
2 parents e7848d6 + 53b18a9 commit 789b5ef

11 files changed

Lines changed: 583 additions & 101 deletions

File tree

‎about.html‎

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -156,66 +156,6 @@ <h3>Mentorship</h3>
156156
</div>
157157
</section>
158158

159-
<!-- History Timeline -->
160-
<section class="section bg-light">
161-
<div class="container">
162-
<div class="section-header fade-in-up">
163-
<h2 class="section-title">Our Journey</h2>
164-
<p class="section-subtitle">Key milestones in our lab's history</p>
165-
</div>
166-
<div class="timeline">
167-
<div class="timeline-item fade-in-up">
168-
<div class="timeline-marker"></div>
169-
<div class="timeline-content">
170-
<h3>2020</h3>
171-
<h4>Lab Founded</h4>
172-
<p>Abrol Lab was established with a vision to provide undergraduate students with cutting-edge research opportunities.</p>
173-
</div>
174-
</div>
175-
<div class="timeline-item fade-in-up">
176-
<div class="timeline-marker"></div>
177-
<div class="timeline-content">
178-
<h3>2021</h3>
179-
<h4>First Publication</h4>
180-
<p>Our lab published its first major research paper, marking a significant milestone in our journey.</p>
181-
</div>
182-
</div>
183-
<div class="timeline-item fade-in-up">
184-
<div class="timeline-marker"></div>
185-
<div class="timeline-content">
186-
<h3>2022</h3>
187-
<h4>Research Grant Awarded</h4>
188-
<p>Received our first major research grant, enabling expansion of our research capabilities.</p>
189-
</div>
190-
</div>
191-
<div class="timeline-item fade-in-up">
192-
<div class="timeline-marker"></div>
193-
<div class="timeline-content">
194-
<h3>2023</h3>
195-
<h4>Award Recognition</h4>
196-
<p>Lab members received multiple awards for their outstanding research contributions.</p>
197-
</div>
198-
</div>
199-
<div class="timeline-item fade-in-up">
200-
<div class="timeline-marker"></div>
201-
<div class="timeline-content">
202-
<h3>2024</h3>
203-
<h4>International Collaboration</h4>
204-
<p>Established partnerships with research institutions worldwide, expanding our impact.</p>
205-
</div>
206-
</div>
207-
<div class="timeline-item fade-in-up">
208-
<div class="timeline-marker"></div>
209-
<div class="timeline-content">
210-
<h3>2025</h3>
211-
<h4>Continued Growth</h4>
212-
<p>Continuing to push boundaries and train the next generation of researchers.</p>
213-
</div>
214-
</div>
215-
</div>
216-
</div>
217-
</section>
218-
219159
<!-- Footer -->
220160
<footer class="footer">
221161
<div class="container">

‎css/styles.css‎

Lines changed: 150 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -200,19 +200,122 @@ a:hover {
200200
=========================== */
201201

202202
.hero {
203-
min-height: 100vh;
203+
min-height: 70vh; /* Reduced from 100vh to 70vh */
204204
display: flex;
205205
flex-direction: column;
206206
justify-content: center;
207207
align-items: center;
208208
text-align: center;
209-
padding: 8rem 2rem 4rem;
210-
background: linear-gradient(135deg, #5D866C 0%, #4a6d57 100%);
211-
color: white;
209+
padding: 6rem 2rem 3rem; /* Reduced padding */
212210
position: relative;
213211
overflow: hidden;
214212
}
215213

214+
/* Hero Slideshow */
215+
.hero-slideshow {
216+
position: absolute;
217+
top: 0;
218+
left: 0;
219+
width: 100%;
220+
height: 100%;
221+
z-index: 0;
222+
}
223+
224+
.hero-slide {
225+
position: absolute;
226+
top: 0;
227+
left: 0;
228+
width: 100%;
229+
height: 100%;
230+
background-size: cover;
231+
background-position: center;
232+
background-repeat: no-repeat;
233+
opacity: 0;
234+
transition: opacity 1.5s ease-in-out;
235+
}
236+
237+
.hero-slide.active {
238+
opacity: 1;
239+
}
240+
241+
/* Hero Overlay */
242+
.hero-overlay {
243+
position: absolute;
244+
top: 0;
245+
left: 0;
246+
width: 100%;
247+
height: 100%;
248+
background: rgba(0, 0, 0, 0.3); /* Dark subtle overlay for text readability */
249+
z-index: 1;
250+
}
251+
252+
/* Slideshow Controls */
253+
.slideshow-controls {
254+
position: absolute;
255+
top: 50%;
256+
left: 0;
257+
right: 0;
258+
transform: translateY(-50%);
259+
display: flex;
260+
justify-content: space-between;
261+
padding: 0 2rem;
262+
z-index: 3;
263+
}
264+
265+
.slide-btn {
266+
background: rgba(255, 255, 255, 0.2);
267+
border: 2px solid rgba(255, 255, 255, 0.5);
268+
color: white;
269+
width: 50px;
270+
height: 50px;
271+
border-radius: 50%;
272+
font-size: 2rem;
273+
cursor: pointer;
274+
transition: var(--transition);
275+
display: flex;
276+
align-items: center;
277+
justify-content: center;
278+
backdrop-filter: blur(5px);
279+
}
280+
281+
.slide-btn:hover {
282+
background: rgba(255, 255, 255, 0.4);
283+
border-color: white;
284+
transform: scale(1.1);
285+
}
286+
287+
/* Slideshow Indicators */
288+
.slideshow-indicators {
289+
position: absolute;
290+
bottom: 6rem;
291+
left: 50%;
292+
transform: translateX(-50%);
293+
display: flex;
294+
gap: 1rem;
295+
z-index: 3;
296+
}
297+
298+
.indicator {
299+
width: 12px;
300+
height: 12px;
301+
border-radius: 50%;
302+
background: rgba(255, 255, 255, 0.4);
303+
border: 2px solid white;
304+
cursor: pointer;
305+
transition: var(--transition);
306+
}
307+
308+
.indicator:hover {
309+
background: rgba(255, 255, 255, 0.6);
310+
transform: scale(1.2);
311+
}
312+
313+
.indicator.active {
314+
background: white;
315+
width: 40px;
316+
border-radius: 6px;
317+
}
318+
216319
.hero::before {
217320
content: '';
218321
position: absolute;
@@ -221,13 +324,14 @@ a:hover {
221324
right: 0;
222325
bottom: 0;
223326
background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><path d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/></g></g></svg>');
224-
opacity: 0.3;
225-
z-index: 0;
327+
opacity: 0.1;
328+
z-index: 2;
329+
pointer-events: none;
226330
}
227331

228332
.hero-content {
229333
position: relative;
230-
z-index: 2;
334+
z-index: 3;
231335
max-width: 900px;
232336
}
233337

@@ -237,7 +341,8 @@ a:hover {
237341
margin-bottom: 1.5rem;
238342
line-height: 1.1;
239343
position: relative;
240-
z-index: 2;
344+
z-index: 3;
345+
color: white;
241346
}
242347

243348
.hero-subtitle {
@@ -246,7 +351,8 @@ a:hover {
246351
opacity: 0.95;
247352
font-weight: 300;
248353
position: relative;
249-
z-index: 2;
354+
z-index: 3;
355+
color: white;
250356
}
251357

252358
.hero-buttons {
@@ -255,7 +361,7 @@ a:hover {
255361
justify-content: center;
256362
flex-wrap: wrap;
257363
position: relative;
258-
z-index: 2;
364+
z-index: 3;
259365
}
260366

261367
.hero-scroll {
@@ -270,7 +376,7 @@ a:hover {
270376
color: white;
271377
opacity: 0.8;
272378
animation: bounce 2s infinite;
273-
z-index: 2;
379+
z-index: 3;
274380
}
275381

276382
.scroll-indicator {
@@ -1341,6 +1447,20 @@ a:hover {
13411447
flex-direction: column;
13421448
}
13431449

1450+
.slideshow-controls {
1451+
padding: 0 1rem;
1452+
}
1453+
1454+
.slide-btn {
1455+
width: 40px;
1456+
height: 40px;
1457+
font-size: 1.5rem;
1458+
}
1459+
1460+
.slideshow-indicators {
1461+
bottom: 5rem;
1462+
}
1463+
13441464
.welcome-content,
13451465
.content-grid,
13461466
.contact-grid,
@@ -1400,6 +1520,25 @@ a:hover {
14001520
font-size: 2rem;
14011521
}
14021522

1523+
.slide-btn {
1524+
width: 35px;
1525+
height: 35px;
1526+
font-size: 1.25rem;
1527+
}
1528+
1529+
.slideshow-indicators {
1530+
gap: 0.5rem;
1531+
}
1532+
1533+
.indicator {
1534+
width: 10px;
1535+
height: 10px;
1536+
}
1537+
1538+
.indicator.active {
1539+
width: 30px;
1540+
}
1541+
14031542
.stats-grid {
14041543
grid-template-columns: 1fr;
14051544
gap: 2rem;

0 commit comments

Comments
 (0)