From 78b9acd428e1446081c1d70329f4e251f6fc5506 Mon Sep 17 00:00:00 2001
From: GI-Health <caasign@gmail.com>
Date: Tue, 10 Dec 2024 22:50:49 +0300
Subject: [PATCH] Add files via upload
---
index.html | 402 +++++++++++++++++++++++++++++++----------------------
style.css | 78 +++++++----
2 files changed, 286 insertions(+), 194 deletions(-)
diff --git a/index.html b/index.html
index 83f24ea..0df4716 100644
--- a/index.html
+++ b/index.html
@@ -1,169 +1,233 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>OSH and Wellness Consultants</title>
- <link rel="icon" type="image/png" href="logoH.png">
- <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
- <header>
- <img src="logoH.png" alt="Logo">
- <div class="header-content">
- <h1>Horizons Occupational Health</h1>
- <p>Comprehensive Occupational Health and Wellness Solutions</p>
- </div>
- </header>
- <div class="container">
- <section>
- <h2>What We Do</h2>
- <div class="services">
-
- <div class="service-item" onclick="toggleContent('service2')">
- Occupational Health Services <span>→</span>
- </div>
- <div id="service2" class="service-content">
- <ul>
- <li>Pre-employment, periodic, and exit medical examinations</li>
- <li>Workplace risk assessments and audits</li>
- <li>Ergonomics assessments and recommendations</li>
- <li>Health and safety training and compliance</li>
- <li>Management of occupational injuries and illnesses</li>
- </ul>
- </div>
-
- <div class="service-item" onclick="toggleContent('service3')">
- Employee Health and Wellness Programs <span>→</span>
- </div>
- <div id="service3" class="service-content">
- <ul>
- <li>Periodic voluntary medical health screenings for cancer and chronic diseases</li>
- <li>Health promotion sessions on lifestyle diseases and prevention</li>
- <li>Diet and nutrition education</li>
- <li>General fitness programs</li>
- <li>Establish an Employee Assistance Program (EAP) for mental health and addiction issues</li>
- <li>Organize periodic group wellness challenges</li>
- <li>Smoking cessation programs</li>
- <li>Women's health programs, including maternity support</li>
- <li>Men's health programs, focusing on specific male health issues</li>
- <li>Mental health awareness and stress management programs</li>
- <li>Substance abuse education and support</li>
- </ul>
- </div>
-
- <div class="service-item" onclick="toggleContent('service1')">
- Establishment of Workplace Clinics <span>→</span>
- </div>
- <div id="service1" class="service-content">
- <ul>
- <li>Health Operations Management</li>
- <li>General outpatient medical treatment</li>
- <li>Emergency response and first aid services</li>
- <li>General and Travel Vaccinations</li>
- <li>Health and wellness programs</li>
- <li>Health education and promotion</li>
- </ul>
- </div>
-
- <div class="service-item" onclick="toggleContent('service4')">
- General H&S Consultancy <span>→</span>
- </div>
- <div id="service4" class="service-content">
- <ul>
- <li>Health and safety policy development</li>
- <li>Workplace wellness program design</li>
- <li>Training and development for health and safety personnel</li>
- <li>Health risk assessments and management plans</li>
- <li>Regulatory compliance consulting</li>
- </ul>
- </div>
-
- </div>
- </section>
- </div>
-
- <div class="container">
- <h2>Meet the team...</h2>
- <div class="profile-section">
-
- <div class="profile-image">
- <img src="ign.png" alt="Dr. Gichuki">
- </div>
- <section>
- <h3>Dr. Gichuki I.</h3>
- <div class="contact-info">
- <p>Email: <a href="mailto:gichukiin@gmail.com">gichukiin@gmail.com</a></p>
- <p>Phone: <a href="tel:+254738476324">+254 738 476324</a></p>
- </div>
- <h4>Healthcare Leader and Manager, Designated Health Practitioner (DHP), Occupational Health Doctor <span id="gichuki-link" class="more-link" onclick="toggleMoreContent('gichuki')">more...</span></h4>
- <div id="gichuki" class="more-content">
- <p>Dr. Gichuki is a dedicated doctor with a vast experience in Occupational Safety and Health, managing workplace health risks, ensuring regulatory compliance, and conducting employee assessments across diverse industries. His client-centred approach and commitment to organizational well-being has contributed to healthier populations and safer work environments. </p>
-
- <h4>Occupational Health & Medicine</h4>
- <ul>
- <li><p>Establishment of workplace medical clinics</p></li>
- <li><p>Management of occupational injuries and illnesses</p></li>
- <li><p>Statutory occupational medical examinations</p></li>
- <li><p>Surveillance for occupational illnesses</p></li>
- <li><p>Workplace ergonomics risk assessments</p></li>
- <li><p>Pre-employment and Interval Occupational Medical Examinations</p></li>
- <li><p>Advisor at workplace Health & Safety Committees</p></li>
- </ul>
- <h4>Healthcare Leadership</h4>
- <ul>
- <li><p>Clinical services oversight</p></li>
- <li><p>Financial management, budgeting and Procurement</p></li>
- <li><p>Personnel recruitment, capacity development and supervision</p></li>
- <li><p>Development of health Quality improvement systems</p></li>
- </ul>
- </div>
- </section>
-
- <div class="profile-image">
- <img src="bnm.png" alt="Beth M.">
- </div>
- <section>
- <h3>Beth M.</h3>
- <div class="contact-info">
- <p>Email: <a href="mailto:bethnmwangi17@gmail.com">bethnmwangi17@gmail.com</a></p>
- <p>Phone: <a href="tel:+254723993876">+254 723 993876</a></p>
- </div>
- <h4>Wellness Coordinator, Healthcare Administrator, Workplace Health Promoter <span id="beth-link" class="more-link" onclick="toggleMoreContent('beth')">more...</span></h4>
- <div id="beth" class="more-content">
- <p>Beth is a compassionate Wellness Coordinator with 15 years of experience helping individuals, families and communities to learn, thrive and achieve their health goals. She has extensive experience with improving health awareness and engagement through health program development and outreach strategies.</p>
- <h4>Wellness Coordination</h4>
- <ul>
- <li><p>Workplace Wellness Program Development</p></li>
- <li><p>Coordination and implementation of Health promotion campaigns.</p></li>
- <li><p>Organization and conducting of health Education for diverse organizations.</p></li>
- <li><p>Wellness Programs Monitoring and Evaluation</p></li>
- <li><p>Occupational Health and Safety Advocacy</p></li>
- <li><p>Health and Safety Training and compliance</p></li>
-
- </ul>
- <h4>Healthcare Administration</h4>
- <ul>
- <li><p>Emergency Response and Preparedness</p></li>
- <li><p>Client Experience and Service Excellence.</p></li>
- <li><p>Incident Investigation and Root Cause Analysis</p></li>
- <li><p>Health and Safety Audits and Inspections</p></li>
- <li><p>Client medical education and counseling.</p></li>
- </ul>
- </div>
- </section>
- </div>
-</div>
- <footer>
- <p>© 2024 Horizons Occupational Health Consultants</p>
- <div class="social-icons">
- <img src="facebook_icon.png" alt="Facebook">
- <img src="linkedin_icon.png" alt="LinkedIn">
- <img src="twitter_icon.png" alt="Twitter(X)">
- </div>
- </footer>
-
- <script src="script.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Horizons Occupational Health offers workplace health and employee wellness solutions, including workplace medical clinics, employee wellness programs, DHP medical exams, and health and safety consultancy for diverse industries in Kenya.">
+ <title>Occupational Health and Wellness Consultants | Horizons</title>
+ <link alt="Horizons Occupational Health icon" href="horizons-occupational-health-icon.png" rel="icon" type="image/png" />
+ <link href="style.css" rel="stylesheet" />
+<meta name="google-site-verification" content="iK7VppEGKD7lQOlWkghIZUcA_BgRL0z7UCWwVyVW3bQ" />
+</head>
+<body>
+<div class="overlay"></div>
+<header>
+ <picture>
+ <source srcset="assets/horizons-occupational-health-logo.webp" type="image/webp">
+ <img src= "assets/horizons-occupational-health-logo.png" alt="Horizons Occupational Health Logo">
+ </picture>
+<div class="header-content">
+<h1>Horizons Occupational Health</h1>
+
+<h4>For all your Occupational Health and Wellness Solutions</h4>
+</div>
+</header>
+
+<div class="container">
+<section id="what-we-do">
+<h2>What We Do</h2>
+
+<h4>We provide a wide range of occupational health and wellness services, tailored to meet your business and employee needs.</h4>
+
+<div class="services">
+<div class="service-item" onclick="toggleContent('service2')">Occupational Health Services <span>→</span></div>
+
+<div class="service-content" id="service2">
+<ul>
+ <li>Pre-employment, periodic, and exit medical examinations</li>
+ <li>Workplace risk assessments and audits</li>
+ <li>Ergonomics assessments and recommendations</li>
+ <li>Health and safety training and compliance</li>
+ <li>Management of occupational injuries and illnesses</li>
+</ul>
+</div>
+
+<div class="service-item" onclick="toggleContent('service3')">Employee Health and Wellness Programs <span>→</span></div>
+
+<div class="service-content" id="service3">
+<ul>
+ <li>Periodic voluntary medical health screenings for cancer and chronic diseases</li>
+ <li>Health promotion sessions on lifestyle diseases and prevention</li>
+ <li>Diet and nutrition education</li>
+ <li>General fitness programs</li>
+ <li>Establish an Employee Assistance Program (EAP) for mental health and addiction issues</li>
+ <li>Organize periodic group wellness challenges</li>
+ <li>Smoking cessation programs</li>
+ <li>Women's health programs, including maternity support</li>
+ <li>Men's health programs, focusing on specific male health issues</li>
+ <li>Mental health awareness and stress management programs</li>
+ <li>Substance abuse education and support</li>
+</ul>
+</div>
+
+<div class="service-item" onclick="toggleContent('service1')">Establishment of Workplace Clinics <span>→</span></div>
+
+<div class="service-content" id="service1">
+<ul>
+ <li>Health Operations Management</li>
+ <li>General outpatient medical treatment</li>
+ <li>Emergency response and first aid services</li>
+ <li>General and Travel Vaccinations</li>
+ <li>Health and wellness programs</li>
+ <li>Health education and promotion</li>
+</ul>
+</div>
+
+<div class="service-item" onclick="toggleContent('service4')">General H&S Consultancy <span>→</span></div>
+
+<div class="service-content" id="service4">
+<ul>
+ <li>Health and safety policy development</li>
+ <li>Workplace wellness program design</li>
+ <li>Training and development for health and safety personnel</li>
+ <li>Health risk assessments and management plans</li>
+ <li>Regulatory compliance consulting</li>
+</ul>
+</div>
+</div>
+</section>
+</div>
+
+<div class="container">
+<h2>Meet the team...</h2>
+
+<div class="profile-section">
+<div class="profile-image">
+ <picture>
+ <source srcset="assets/ign.webp" type="image/webp">
+ <img src="assets/ign.png" alt="Dr. Gichuki">
+ </picture>
+</div>
+
+<section id="our-team">
+<h3>Dr. Gichuki I.</h3>
+
+<div class="contact-info">
+<p>Email: <a href="mailto:gichuki@horizonshealthcare.co.ke">gichuki@HorizonsHealthcare.co.ke</a></p>
+
+<p>Phone: <a href="tel:+254738476324">+254 738 476324</a></p>
+</div>
+
+<h4>Healthcare Leader and Manager, Designated Health Practitioner (DHP), Occupational Health Doctor <span class="more-link" id="gichuki-link" onclick="toggleMoreContent('gichuki')">more...</span></h4>
+
+<div class="more-content" id="gichuki">
+<p>Dr. Gichuki is a dedicated doctor with a vast experience in Occupational Safety and Health, managing workplace health risks, ensuring regulatory compliance, and conducting employee assessments across diverse industries. His client-centred approach and commitment to organizational well-being has contributed to healthier populations and safer work environments.</p>
+
+<h4>Occupational Health & Medicine</h4>
+
+<ul>
+ <li>
+ <p>Establishment of workplace medical clinics</p>
+ </li>
+ <li>
+ <p>Management of occupational injuries and illnesses</p>
+ </li>
+ <li>
+ <p>Statutory occupational medical examinations</p>
+ </li>
+ <li>
+ <p>Surveillance for occupational illnesses</p>
+ </li>
+ <li>
+ <p>Workplace ergonomics risk assessments</p>
+ </li>
+ <li>
+ <p>Pre-employment and Interval Occupational Medical Examinations</p>
+ </li>
+ <li>
+ <p>Advisor at workplace Health & Safety Committees</p>
+ </li>
+</ul>
+
+<h4>Healthcare Leadership</h4>
+
+<ul>
+ <li>
+ <p>Clinical services oversight</p>
+ </li>
+ <li>
+ <p>Financial management, budgeting and Procurement</p>
+ </li>
+ <li>
+ <p>Personnel recruitment, capacity development and supervision</p>
+ </li>
+ <li>
+ <p>Development of health Quality improvement systems</p>
+ </li>
+</ul>
+</div>
+</section>
+
+<div class="profile-image">
+ <picture>
+ <source srcset="assets/bnm.webp" type="image/webp">
+ <img src="assets/bnm.png" alt="Beth M.">
+ </picture>
+</div>
+
+<section>
+<h3>Beth M.</h3>
+
+<div class="contact-info">
+<p>Email: <a href="mailto:beth@HorizonsHealthcare.co.ke">beth@HorizonsHealthcare.co.ke</a></p>
+
+<p>Phone: <a href="tel:+254723993876">+254 723 993876</a></p>
+</div>
+
+<h4>Wellness Coordinator, Healthcare Administrator, Workplace Health Promoter <span class="more-link" id="beth-link" onclick="toggleMoreContent('beth')">more...</span></h4>
+
+<div class="more-content" id="beth">
+<p>Beth is a compassionate Wellness Coordinator with 15 years of experience helping individuals, families and communities to learn, thrive and achieve their health goals. She has extensive experience with improving health awareness and engagement through health program development and outreach strategies.</p>
+
+<h4>Wellness Coordination</h4>
+
+<ul>
+ <li>
+ <p>Workplace Wellness Program Development</p>
+ </li>
+ <li>
+ <p>Coordination and implementation of Health promotion campaigns.</p>
+ </li>
+ <li>
+ <p>Organization and conducting of health Education for diverse organizations.</p>
+ </li>
+ <li>
+ <p>Wellness Programs Monitoring and Evaluation</p>
+ </li>
+ <li>
+ <p>Occupational Health and Safety Advocacy</p>
+ </li>
+ <li>
+ <p>Health and Safety Training and compliance</p>
+ </li>
+</ul>
+
+<h4>Healthcare Administration</h4>
+
+<ul>
+ <li>
+ <p>Emergency Response and Preparedness</p>
+ </li>
+ <li>
+ <p>Client Experience and Service Excellence.</p>
+ </li>
+ <li>
+ <p>Incident Investigation and Root Cause Analysis</p>
+ </li>
+ <li>
+ <p>Health and Safety Audits and Inspections</p>
+ </li>
+ <li>
+ <p>Client medical education and counseling.</p>
+ </li>
+</ul>
+</div>
+</section>
+</div>
+</div>
+
+<footer>© 2024 Horizons Occupational Health
+<div class="social-icons"><img alt="Facebook" src="assets/facebook_icon.png" /> <img alt="LinkedIn" src="assets/linkedin_icon.png" /> <img alt="Twitter(X)" src="assets/twitter_icon.png" /></div>
+</footer>
+<script src="script.js"></script>
+
+<p></p>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 5d7ab4d..7a9d417 100644
--- a/style.css
+++ b/style.css
@@ -1,10 +1,12 @@
+
:root {
- --primary-color: #0057ad; /* Light blue */
- --secondary-color: #000; /* Black */
+ --primary-color: #00539c; /* Light blue #0057ad */
+ --secondary-color: #00264d; /* Dark blue */
--accent-color: #CCE7FF; /* Light sky blue */
+ --text-color0: #f9f9f9; /* Ghost white */
--text-color: #333; /* Dark grey */
- --background-color: #f9f9f9; /* Light grey */
+ --background-color: #CDC6C6; /* Light grey */
}
/* Import Google Font */
@@ -14,14 +16,15 @@
font-family: 'Roboto', Arial, sans-serif;
margin: 0;
padding: 0;
- background-color: var(--background-color);
+ background-color: #f9f9f9;
display: flex;
flex-direction: column;
min-height: 100vh;
+ position: relative;
}
header {
- background: linear-gradient(45deg, var(--primary-color),var(--secondary-color)); /* Adds a gradient */
- color: white;
+ background: linear-gradient(45deg,var(--secondary-color), var(--primary-color)); /* Adds a gradient */
+ color: var(--text-color0);
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
@@ -30,8 +33,6 @@
position: relative; /* Ensure the logo can be positioned absolutely */
}
-
-
.header-content {
display: inline-block;
text-align: center;
@@ -41,6 +42,10 @@
font-size: 1.5em; /* Larger font for desktop */
margin: 0;
}
+
+ header h4{
+ color: var(--text-color0);
+ }
header p {
font-size: 0.9em;
@@ -56,9 +61,9 @@
.container {
width: 90%;
margin: 20px auto;
- background: #c6bdbd;
+ background: var(--background-color);
padding: 20px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
flex: 1;
}
@@ -73,6 +78,8 @@
}
.profile-image {
text-align: center;
+ position: relative; /*Make the container a positioned element */
+ z-index: 1;
}
.profile-image img {
border-radius: 50%;
@@ -80,26 +87,39 @@
height: 80px;
object-fit: cover;
margin-top: 10px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ }
+ .overlay {
+ position: absolute; /* Position it over the image */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0); /* Add a transparent black overlay */
+ /*border-radius: 50%; Match an image's rounded corners */
+ z-index: 1;
}
h2 {
- color: #00539C;
+ color: var(--secondary-color);
text-align: center;
font-size: 1.2em;
margin: 0;
}
h3 {
- color: #00539C;
text-align: center;
font-size: 1em;
margin: 0;
+ color: var(--secondary-color);
}
h4 {
font-size: 0.8em;
margin: 0;
+ color: var(--text-color);
+ text-align: center;
}
p {
font-size: 0.8em;
+ color: var(--text-color)
}
.contact-info {
background-color: #e6e6e6;
@@ -107,6 +127,8 @@
border-radius: 8px;
/*margin-bottom: 20px;*/
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ position: relative;
}
.contact-info p {
margin: 5px 0;
@@ -116,9 +138,10 @@
display: flex;
flex-direction: column;
gap: 10px;
+ padding: 15px;
}
.service-item {
- background-color: #00539C;
+ background-color: var(--primary-color);
color: white;
padding: 15px;
border-radius: 8px;
@@ -129,11 +152,12 @@
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ z-index: 2;
}
.service-item:hover {
transform: translateY(-5px); /* Slight lift effect */
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
- background-color: #003366;
+ background-color: var(--secondary-color);
}
.service-content {
display: none;
@@ -145,7 +169,7 @@
}
footer {
background: linear-gradient(45deg, var(--primary-color),var(--secondary-color)); /* Adds a gradient */
- color: white;
+ color: var(--text-color0);
text-align: center;
padding: 10px;
font-size: 0.9em;
@@ -171,6 +195,8 @@
color: #00539C;
cursor: pointer;
text-decoration: underline;
+ z-index: 2;
+ position: relative;
}
.more-content {
display: none;
@@ -184,14 +210,19 @@
header img {
height: 100px; /* Smaller size for narrow screens */
left: 20px;
+ top: 30px;
}
header h1 {
font-size: 2.5em;
margin: 15px;
}
+ header h3 {
+ font-size: 1.2em;
+ margin: 0;
+ }
h2 {
font-size: 2em;
- padding-bottom: 10px
+ padding-bottom: 10px;
margin: 0;
}
h3 {
@@ -206,7 +237,7 @@
font-size: 1em;
}
.container {
- flex-direction: row;
+ /*flex-direction: row;*/
width: 90%;
}
.profile-section {
@@ -217,14 +248,11 @@
width: 45%;
}
.profile-image {
- margin-left: 20px;
- margin: 20;
+ margin: 20px;
}
.profile-image img {
- border-radius: 50%;
- width: 120px;
- height: 120px;
- object-fit: cover;
- }
+ width: 120px;
+ height: 120px;
+ }