Skip to content

Commit

Permalink
gallery view
Browse files Browse the repository at this point in the history
  • Loading branch information
siri committed Oct 18, 2024
1 parent e7b1880 commit 00dcef5
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 1 deletion.
96 changes: 96 additions & 0 deletions gallery.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}

.gallery {
text-align: center;
margin: 20px;
}

h2 {
font-size: 2em;
margin-bottom: 20px;
color: #2c3e50;
animation: fadeIn 1s ease-in;
}

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
padding: 20px;
}

.grid-item {
position: relative; /* Make positioning relative for overlay */
overflow: hidden;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 200px; /* Fixed height for uniformity */
opacity: 0; /* Start hidden for fade-in effect */
animation: fadeIn 1s forwards; /* Add fade-in animation */
}

.grid-item:nth-child(even) {
animation-delay: 0.1s; /* Stagger animations for even items */
}

.grid-item:nth-child(odd) {
animation-delay: 0.2s; /* Stagger animations for odd items */
}

.grid-item img {
width: 100%;
height: 100%; /* Set height to 100% to fill the parent */
object-fit: cover; /* Ensure images cover the area without distortion */
display: block;
transition: transform 0.3s ease; /* Smooth image transition */
}

.grid-item:hover img {
transform: scale(1.1); /* Scale up the image on hover */
}

.grid-item:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

/* Overlay styles */
.grid-item .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* Black overlay with transparency */
color: white; /* Text color */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease; /* Smooth transition for overlay */
}

.grid-item:hover .overlay {
opacity: 1; /* Show overlay on hover */
}

/* Animation keyframes */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
43 changes: 43 additions & 0 deletions gallery.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AmbuFlow Gallery</title>
<link rel="stylesheet" href="gallery.css">
</head>

<body>
<section class="gallery">
<h2>Ambulance Gallery</h2>
<div class="grid-container">
<div class="grid-item"><img src="https://image.freepik.com/free-photo/doctor-with-stethoscope-hand-hospital-background-medical-medicine-concept_34200-278.jpg" alt="Ambulance 1"></div>
<div class="grid-item"><img src="https://cdn.cpdonline.co.uk/wp-content/uploads/2022/09/13092522/Becoming-a-hospital-doctor.jpg" alt="Ambulance 2"></div>
<div class="grid-item"><img src="https://thumbs.dreamstime.com/z/hospital-doctor-related-infographic-flat-design-style-hospital-doctor-related-infographic-flat-style-164478350.jpg" alt="Ambulance 3"></div>
<div class="grid-item"><img src="https://coda.newjobs.com/api/imagesproxy/ms/cms/content30/images/hospitalist.jpg" alt="Ambulance 4"></div>
<div class="grid-item"><img src="https://img.pikbest.com/png-images/qiantu/medical-hospital-related-cartoon-icons_2688583.png!bwr800" alt="Ambulance 5"></div>
<div class="grid-item"><img src="https://trainingtale.org/wp-content/uploads/2023/02/28694785_doctor_2-scaled.webp" alt="Ambulance 6"></div>
<div class="grid-item"><img src="https://www.rescusaveslives.com/wp-content/uploads/2022/02/shutterstock_1159851319.jpg" alt="Ambulance 7"></div>
<div class="grid-item"><img src="https://d1zxene68j3keg.cloudfront.net/sites/default/files/Resouces/images/call%20an%20Ambulance.jpg" alt="Ambulance 8"></div>
<div class="grid-item"><img src="https://www.news.lk/media/k2/items/cache/4eb935fa2448cab6dc3a8c7fe74715dd_XL.jpg" alt="Ambulance 9"></div>
<div class="grid-item"><img src="https://eliteamb.com/wp-content/uploads/2023/03/Ambulance.jpg" alt="Ambulance 10"></div>
<div class="grid-item"><img src="https://static.vecteezy.com/system/resources/previews/000/537/055/original/hand-holding-medical-icon-symbol-vector-healthcare-concept.jpg" alt="Ambulance 11"></div>
<div class="grid-item"><img src="https://www.carecor.com/wp-content/uploads/2020/08/iStock-508106088-scaled.jpg" alt="Ambulance 12"></div>
<div class="grid-item"><img src="https://static.vecteezy.com/system/resources/previews/000/667/738/original/people-consulting-the-doctor-online-hospital-health-care-concept.jpg" alt="Ambulance 13"></div>
<div class="grid-item"><img src="https://criticalcareontario.ca/wp-content/uploads/2020/10/critical-care-response-teams_hero.jpg" alt="Ambulance 14"></div>
<div class="grid-item"><img src="https://cloudfront.cloudinary.com/healthmanagement-org/image/upload/f_auto,fl_lossy/v1449514503/cw/00107296_cw_image.jpg" alt="Ambulance 15"></div>
<div class="grid-item"><img src="https://www.londonambulance.nhs.uk/wp-content/uploads/2020/11/HART-paramedic.jpg" alt="Ambulance 16"></div>
<div class="grid-item"><img src="https://i.ytimg.com/vi/tQ52hz9L4qI/maxresdefault.jpg" alt="Ambulance 17"></div>
<div class="grid-item"><img src="https://firstaid.id/wp-content/uploads/2021/08/article_emergency_preparedness.jpg" alt="Ambulance 18"></div>
<div class="grid-item"><img src="https://www.touchette.org/media-library/photos/full/284-1517858528.jpg" alt="Ambulance 19"></div>
<div class="grid-item"><img src="https://www.researchgate.net/profile/David-Rintell-4/publication/311820406/figure/fig1/AS:573786515017728@1513812773448/Multidisciplinary-patient-centered-team-approach-promotes-communication-and-optimal-care.png" alt="Ambulance 20"></div>
<div class="grid-item"><img src="https://i.pinimg.com/736x/71/30/f1/7130f1aad3845175683234c483826646--nursing-crib-icu-nursing.jpg" alt="Ambulance 21"></div>
<div class="grid-item"><img src="https://www.mcw.edu/-/media/MCW/Content-Hub/Story-Photos/Interprofessionalism_Clinical_IPEPatientAtCenter.jpg?la=en" alt="Ambulance 22"></div>
<div class="grid-item"><img src="https://pristacorp.com/wp-content/uploads/2017/11/shutterstock_693442927.jpg" alt="Ambulance 23"></div>
<div class="grid-item"><img src="https://images.squarespace-cdn.com/content/v1/5a6918de51a584fa71ff2f64/1522948419046-YH6E2NU2IQ3XLM892975/Rapid+Response+Team.jpg" alt="Ambulance 24"></div>
</div>
</section>
</body>

</html>
3 changes: 2 additions & 1 deletion homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -574,10 +574,11 @@ <h2>Contact Us</h2>
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
<ul class="quick-links-list" style="list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-around;">
<li style="flex: 1 1 150px; margin: 10px 0;"><a href="about.html" style="color: #000000; text-decoration: none;">About Us</a></li>
<li style="flex: 1 1 150px; margin: 10px 0;"><a href="sitemap.html" style="color: #000000; text-decoration: none;">Gallery View</a></li>
<li style="flex: 1 1 150px; margin: 10px 0;"><a href="contact.html" style="color: #000000; text-decoration: none;">Contact Us</a></li>
<li style="flex: 1 1 150px; margin: 10px 0;"><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy Policy</a></li>
<li style="flex: 1 1 150px; margin: 10px 0;"><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of Service</a></li>
<li style="flex: 1 1 150px; margin: 10px 0;"><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
<li style="flex: 1 1 150px; margin: 10px 0;"><a href="gallery.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
</ul>

</div>
Expand Down

0 comments on commit 00dcef5

Please sign in to comment.