Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create DivineMercy #240

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create DivineMercy #240

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
291 changes: 291 additions & 0 deletions DivineMercy
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,291 @@
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laboratory Office</title>
<style>
body {
font-family: system-ui;
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1.6;
background-color: #f8f9fa;
color: #333;
}

header {
background-color: #28a745;
color: white;
padding: 1rem 2rem;
text-align: center;
position: relative;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

header .logo {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
max-height: 100px;
}

nav {
display: flex;
justify-content: center;
gap: 1.5rem;
background-color: #ffffff;
padding: 0.5rem 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav a {
text-decoration: none;
color: #28a745;
font-weight: bold;
padding: 0.5rem 1rem;
transition: background-color 0.3s, color 0.3s;
}

nav a:hover {
background-color: #28a745;
color: white;
border-radius: 5px;
}

section {
padding: 2rem;
margin: 1rem auto;
max-width: 1200px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hero {
background-color: #dfffe2;
text-align: center;
padding: 3rem 1rem;
border-radius: 8px;
}

.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #155724;
}

.about, .services, .contact {
margin-bottom: 2rem;
}

h2 {
color: #155724;
margin-bottom: 1rem;
text-align: center;
}

ul {
list-style: none;
padding: 0;
}

ul li {
margin: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}

ul li::before {
content: '\2713';
position: absolute;
left: 0;
color: #28a745;
font-weight: bold;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
font-size: 0.9rem;
}

form {
max-width: 500px;
margin: auto;
background: #f9f9f9;
padding: 2rem;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

form label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}

form input, form select, form button {
width: 100%;
margin-bottom: 1rem;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}

form button {
background-color: #28a745;
color: white;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}

form button:hover {
background-color: #218838;
}

.service-images {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}

.service-images img {
max-width: 300px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<header>
<img src="C:\Users\LENOVO\Desktop\divine mercy logo.png" alt="Laboratory Logo" class="logo">
<h1>DIVINE MERCY MEDICAL AND DIAGNOSTIC LABORATORY</h1>
</header>

<nav>
<a href="#about">ABOUT US</a>
<a href="#services">SERVICES</a>
<a href="#contact">CONTACT</a>
<a href="appointment.html">BOOK APPOINTMENT</a>
</nav>

<section class="hero">
<h1>Your Health, Our Priority</h1>
<p>We provide 24-hour medical laboratory and diagnostic services for your health needs.</p>
</section>

<section id="about" class="about">
<h2>ABOUT US</h2>
<p>Our laboratory office is dedicated to offering high-quality diagnostic services to support your health and well-being. We strive to provide accurate, reliable, and timely results that empower you to make informed decisions about your health. Our team of experienced professionals is committed to using advanced technology and best practices to ensure the highest standards of precision and care. Whether it's routine screenings, specialized testing, or preventive diagnostics, we are here to partner with you on your journey to better health. Your trust is our priority, and we continuously work to enhance our services, ensuring that your needs are met with professionalism and compassion.</p>
</section>

<section id="services" class="services">
<h2>OUR SERVICES</h2>
<ul>
<li>Full Blood Count</li>
<li>Pre-Marriage Test (Blood Group, Genotype & Compatibility)</li>
<li>Traveling Medical Fitness Report</li>
<li>Admission Medical Tests (For Students)</li>
<li>Microscopy, Culture & Sensitivity (MCS for Ear Swab, Throat Swab, Urethral Swab, ECS, Urine, Stool)</li>
<li>Malaria/Typhoid</li>
<li>Hepatitis (HBV, HCV, HAV)</li>
<li>Urinalysis, Semen Analysis & Culture</li>
</ul>
<div class="service-images">
<img src="C:\Users\LENOVO\Desktop\DIVINE MERCY OPEN.jpg" alt="Laboratory Services">
<img src="C:\Users\LENOVO\Desktop\275570856_357957936339374_4272013363487761495_n.jpg" alt="Laboratory Services">
<img src="C:\Users\LENOVO\Desktop\469191555_1011358357673492_8414091173044361975_n.jpg" alt="Diagnostic Equipment">
<img src="C:\Users\LENOVO\Desktop\469365072_1011358037673524_5194631402716384149_n.jpg" alt="Blood Testing">
<img src="C:\Users\LENOVO\Desktop\467302291_998212072321454_3010111086581339694_n.jpg" alt="Blood Testing">
<img src="C:\Users\LENOVO\Desktop\275614252_357956006339567_23522605877959706_n.jpg" alt="Diagnostic Equipment">
<img src="C:\Users\LENOVO\Desktop\275624148_357957039672797_4779382127346414689_n.jpg" alt="Blood Testing">
<img src="C:\Users\LENOVO\Desktop\300708677_462586449217355_7451880611661557171_n.jpg" alt="Blood Testing">

</div>
</section>

<section id="contact" class="contact">
<h2>CONTACT US</h2>
<p><strong>Address:</strong> NO 5, ISALE AGBARA STREET, ITAOLOKAN AREA, OSOGBO, OSUN STATE, NIGERIA</p>
<p><strong>Phone:</strong> 07064424840, 07037322940</p>
</section>

<footer>
<p>&copy; 2025 Divine Mercy Diagnostic and Laboratory Office. All rights reserved.</p>
</footer>


<!-- Appointment Booking Page -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const appointmentPage = `
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Appointment</title>
<style>${document.querySelector('style').textContent}</style>
</head>
<body>
<header>
<h1>Book an Appointment</h1>
</header>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" required>

<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="Your Phone Number" required>

<label for="appointment-type">Appointment Type</label>
<select id="appointment-type" name="appointment-type" required>
<option value="full-blood-count">Full Blood Count</option>
<option value="pre-marriage-test">Pre-Marriage Test</option>
<option value="traveling-medical-report">Traveling Medical Fitness Report</option>
<option value="admission-test">Admission Medical Test</option>
<option value="mcs">Microscopy, Culture & Sensitivity</option>
<option value="malaria-typhoid">Malaria/Typhoid</option>
<option value="hepatitis">Hepatitis</option>
<option value="urinalysis">Urinalysis/Semen Analysis</option>
</select>

<label for="date">Preferred Date</label>
<input type="date" id="date" name="date" required>

<button type="submit">Submit</button>
</form>
<footer>
<p>&copy; 2025 Laboratory Office. All rights reserved.</p>
</footer>
</body>
</html>`;

const blob = new Blob([appointmentPage], { type: 'text/html' });
const appointmentLink = document.querySelector('a[href="appointment.html"]');
appointmentLink.href = URL.createObjectURL(blob);
});
</script>
</body>
</html>