templ per komponen, scroll horizontal

This commit is contained in:
sindhu
2024-04-26 17:01:41 +07:00
parent 99d7fd5159
commit b9108efb25
6 changed files with 1458 additions and 204 deletions

View File

@@ -102,6 +102,11 @@ License: You must have a valid license purchased only from themeforest(the above
type="text/css"
/>
<style>
div.scrollmenu {
overflow: auto;
white-space: nowrap;
}
body {
background-color: white;
/* padding-right: 100px;
@@ -308,64 +313,69 @@ License: You must have a valid license purchased only from themeforest(the above
<!-- Navbar End -->
<!-- jumbotron START -->
<!-- <div class="jumbotron jumbotron-lp d-none d-lg-block"> -->
<div class="jumbotron bg-primary">
<div class="container">
<div class="row">
<div class="col-md-8 d-flex flex-column">
<div class="mb-3">
<h1 class="title-jumbotron text-white">
Invest in Your Well-being with Our Comprehensive Medical
Check-Up
</h1>
<p class="sub-title-jumbotron text-white">
Elevate your health journey with our thorough medical
assessments, empowering you to take proactive steps towards a
healthier, happier life.
</p>
<button type="button" class="btn btn-lg btn-pill bg-white">
<span class="title-get-started">Get Started</span>
</button>
<!-- Large(>=992px) and XL (>=1200px) START -->
<div class="d-none d-lg-block d-xl-block">
<div class="jumbotron bg-primary">
<div class="container">
<div class="row">
<div class="col-md-8 d-flex flex-column">
<div class="mb-3">
<h1 class="title-jumbotron text-white">
Invest in Your Well-being with Our Comprehensive Medical
Check-Up
</h1>
<p class="sub-title-jumbotron text-white">
Elevate your health journey with our thorough medical
assessments, empowering you to take proactive steps towards
a healthier, happier life.
</p>
<button type="button" class="btn btn-lg btn-pill bg-white">
<span class="title-get-started">Get Started</span>
</button>
</div>
<div class="mt-auto"></div>
</div>
<div class="mt-auto"></div>
</div>
<div class="col-md-4 d-flex justify-content-md-end">
<div
style="
flex: 2;
margin: 10px;
display: flex;
align-items: center;
"
>
<img
src="../assets/asset-corporate-portal/media/landingpage/jumbotron_left.png"
class="img-fluid"
alt="Your Brand"
style="width: 100%; height: 100%"
/>
<div class="col-md-4 d-flex justify-content-md-end">
<div
style="
flex: 2;
margin: 10px;
display: flex;
align-items: center;
"
>
<img
src="../assets/asset-corporate-portal/media/landingpage/jumbotron_left.png"
class="img-fluid"
alt="Your Brand"
style="width: 100%; height: 100%"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Large(>=992px) and XL (>=1200px) END -->
<!-- jumbotron END -->
<!-- Our Medical Service START -->
<div class="container">
<div class="row">
<div class="col-md-12 text-left">
<h2 class="title-section text-black">Our Medical Services</h2>
<p class="sub-title-section text-black">
Discover excellence in healthcare at Our Medical Services. From
diagnosis to treatment, our dedicated team provides personalized
care for your well-being.
</p>
<!-- Large(>=992px) and XL (>=1200px) START -->
<div class="d-none d-lg-block d-xl-block">
<div class="container">
<div class="row">
<div class="col-md-12 text-left">
<h2 class="title-section text-black">Our Medical Services</h2>
<p class="sub-title-section text-black">
Discover excellence in healthcare at Our Medical Services. From
diagnosis to treatment, our dedicated team provides personalized
care for your well-being.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block custom-card-lp mr-5" style="min-width: 200px;">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
@@ -375,8 +385,7 @@ License: You must have a valid license purchased only from themeforest(the above
</div>
<h5 class="card-title title-fs-20">In House Clinic</h5>
<p class="card-text sub-title-fs-12">
Maintaining health in the workplace by carrying out
promotional, preventive, curative and rehabilitative programs.
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
@@ -387,10 +396,7 @@ License: You must have a valid license purchased only from themeforest(the above
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="card card-block custom-card-lp mr-5" style="min-width: 300px;">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
@@ -401,7 +407,8 @@ License: You must have a valid license purchased only from themeforest(the above
<h5 class="card-title title-fs-20">Laboratorium Test</h5>
<p class="card-text sub-title-fs-12">
Maintaining health in the workplace by carrying out
promotional, preventive, curative and rehabilitative programs.
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
@@ -412,10 +419,7 @@ License: You must have a valid license purchased only from themeforest(the above
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="card card-block custom-card-lp mr-5" style="min-width: 300px;">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
@@ -426,7 +430,8 @@ License: You must have a valid license purchased only from themeforest(the above
<h5 class="card-title title-fs-20">Medical Check Up</h5>
<p class="card-text sub-title-fs-12">
Maintaining health in the workplace by carrying out
promotional, preventive, curative and rehabilitative programs.
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
@@ -438,182 +443,342 @@ License: You must have a valid license purchased only from themeforest(the above
</div>
</div>
</div>
<!-- <div class="container">
<div class="">
<div class="row">
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
class="iconify text-primary w-20 h-20"
data-icon="uil:clinic-medical"
></span>
</div>
<h5 class="card-title title-fs-20">In House Clinic</h5>
<p class="card-text sub-title-fs-12">
Maintaining health in the workplace by carrying out
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
<span
class="iconify text-primary w-20 h-20"
data-icon="eva:arrow-forward-outline"
></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="row"> -->
<!-- <div class="col-md-4">
<div class="card custom-card-lp">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
class="iconify text-primary w-20 h-20"
data-icon="uil:clinic-medical"
></span>
</div>
<h5 class="card-title title-fs-20">In House Clinic</h5>
<p class="card-text sub-title-fs-12">
Maintaining health in the workplace by carrying out
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
<span
class="iconify text-primary w-20 h-20"
data-icon="eva:arrow-forward-outline"
></span>
</a>
</div>
</div>
</div> -->
<!-- <div class="col-md-4">
<div class="card custom-card-lp">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
class="iconify text-primary w-20 h-20"
data-icon="healthicons:clinical-a-outline"
></span>
</div>
<h5 class="card-title title-fs-20">Laboratorium Test</h5>
<p class="card-text sub-title-fs-12">
Maintaining health in the workplace by carrying out
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
<span
class="iconify text-primary w-20 h-20"
data-icon="eva:arrow-forward-outline"
></span>
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card custom-card-lp">
<div class="card-body">
<div class="icon-container bg-primary-transparent">
<span
class="iconify text-primary w-20 h-20"
data-icon="jam:medical"
></span>
</div>
<h5 class="card-title title-fs-20">Medical Check Up</h5>
<p class="card-text sub-title-fs-12">
Maintaining health in the workplace by carrying out
promotional, preventive, curative and rehabilitative
programs.
</p>
<a href="#" class="link-learn-more text-primary"
>Learn More
<span
class="iconify text-primary w-20 h-20"
data-icon="eva:arrow-forward-outline"
></span>
</a>
</div>
</div>
</div> -->
<!-- </div> -->
</div>
</div>
<!-- Large(>=992px) and XL (>=1200px) END -->
<!-- Our Medical Service END -->
<!-- Why Westerindo START belum fix di ukuran < 1400 -->
<div class="container mt-5">
<div class="row">
<div class="col-md-12 col-lg-12 text-left">
<h2 class="title-section text-black">Why Westerindo</h2>
<p class="sub-title-section text-black">
With a dedicated team of professionals were committed to
providing medical attention tailored to your needs, ensuring a
journey to optimal health and vitality.
</p>
<!-- Large(>=992px) and XL (>=1200px) START -->
<div class="d-none d-lg-block d-xl-block">
<div class="container mt-5">
<div class="row">
<div class="col-md-12 col-lg-12 text-left">
<h2 class="title-section text-black">Why Westerindo</h2>
<p class="sub-title-section text-black">
With a dedicated team of professionals were committed to
providing medical attention tailored to your needs, ensuring a
journey to optimal health and vitality.
</p>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<img
src="../assets/asset-corporate-portal/media/landingpage/why_westerindo_right.png"
alt="Your Brand"
class="align-top w-100 h-100 pt-4 pb-4"
/>
</div>
<div class="col-md-6 d-flex flex-column">
<!-- 1 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify text-primary media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">ISO Certificate</h4>
<p class="sub-title-fs-12 text-black ml-4">
Westerindo Clinical Laboratory has obtained ISO 15189:2009
(ISO 15189:2007) Accreditation from the National
Accreditation Committee (KAN) and the Health Laboratory
Accreditation Commission (KALK).
</p>
<div class="row mt-5">
<div class="col-md-6">
<img
src="../assets/asset-corporate-portal/media/landingpage/why_westerindo_right.png"
alt="Your Brand"
class="align-top w-100 h-100 pt-4 pb-4"
/>
</div>
<div class="col-md-6 d-flex flex-column">
<!-- 1 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify text-primary media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">ISO Certificate</h4>
<p class="sub-title-fs-12 text-black ml-4">
Westerindo Clinical Laboratory has obtained ISO 15189:2009
(ISO 15189:2007) Accreditation from the National
Accreditation Committee (KAN) and the Health Laboratory
Accreditation Commission (KALK).
</p>
</div>
</div>
</div>
</div>
<!-- 2 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify text-primary media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">Modern Technology</h4>
<p class="sub-title-fs-12 text-black ml-4">
Laboratory Information System (LIS) is an information system
in which laboratory equipment and diagnostic support have
been integrated automatically so that examination results
can be immediately filled in in employee data. This
eliminates the possibility of human error.
</p>
<!-- 2 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify text-primary media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">
Modern Technology
</h4>
<p class="sub-title-fs-12 text-black ml-4">
Laboratory Information System (LIS) is an information
system in which laboratory equipment and diagnostic
support have been integrated automatically so that
examination results can be immediately filled in in
employee data. This eliminates the possibility of human
error.
</p>
</div>
</div>
</div>
</div>
<!-- 3 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">
Good Quality Facilities
</h4>
<p class="sub-title-fs-12 text-black ml-4">
The laboratory and medical support equipment used at the
Westerindo Clinical Laboratory is international scale for
precise, fast and accurate results. Lab and medical
equipment certificates are periodically renewed according to
standards.
</p>
<!-- 3 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">
Good Quality Facilities
</h4>
<p class="sub-title-fs-12 text-black ml-4">
The laboratory and medical support equipment used at the
Westerindo Clinical Laboratory is international scale for
precise, fast and accurate results. Lab and medical
equipment certificates are periodically renewed according
to standards.
</p>
</div>
</div>
</div>
</div>
<!-- 4 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">
Professional Service
</h4>
<p class="sub-title-fs-12 text-black ml-4">
Westerindo Clinical Laboratory is committed to providing
professional and excellent service. Therefore, all staff and
doctors at the Westerindo Clinical Laboratory have
competency certification according to their field.
</p>
<!-- 4 -->
<div class="row flex-grow-1">
<div class="media">
<div class="media-left">
<span
class="iconify media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">
Professional Service
</h4>
<p class="sub-title-fs-12 text-black ml-4">
Westerindo Clinical Laboratory is committed to providing
professional and excellent service. Therefore, all staff
and doctors at the Westerindo Clinical Laboratory have
competency certification according to their field.
</p>
</div>
</div>
</div>
</div>
<!-- 5 -->
<div class="row">
<div class="media">
<div class="media-left">
<span
class="iconify media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">Experienced</h4>
<p class="sub-title-fs-12 text-black ml-4">
Westerindo Clinical Laboratory is very experienced in
carrying out Medical Check Ups both onsite and insite, in
all corners of Indonesia. Serving various kinds of
companies, from oil and gas companies, automotive,
manufacturing, offices, and others.
</p>
<!-- 5 -->
<div class="row">
<div class="media">
<div class="media-left">
<span
class="iconify media-left-icon"
data-icon="mingcute:certificate-line"
></span>
</div>
<div class="media-body">
<h4 class="title-fs-20 text-black ml-4">Experienced</h4>
<p class="sub-title-fs-12 text-black ml-4">
Westerindo Clinical Laboratory is very experienced in
carrying out Medical Check Ups both onsite and insite, in
all corners of Indonesia. Serving various kinds of
companies, from oil and gas companies, automotive,
manufacturing, offices, and others.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Large(>=992px) and XL (>=1200px) START -->
<!-- Why Westerindo END -->
<!-- Promotion START -->
<div class="container mt-4">
<div class="row">
<div class="col-md-12 text-left">
<h2 class="title-section text-black">Promotions</h2>
<p class="sub-title-section text-black">
Seize This Opportunity to Enhance Your Health
</p>
<!-- Large(>=992px) and XL (>=1200px) START -->
<div class="d-none d-lg-block d-xl-block">
<div class="container mt-4">
<div class="row">
<div class="col-md-12 text-left">
<h2 class="title-section text-black">Promotions</h2>
<p class="sub-title-section text-black">
Seize This Opportunity to Enhance Your Health
</p>
</div>
</div>
</div>
<div class="row mt-4 mb-2">
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_2.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_3.png"
class="img-fluid"
alt="Your Brand"
/>
<div class="scrollmenu">
<div class="mt-4 mb-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_3.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid mr-2"
alt="Your Brand"
/>
<!-- <div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_1.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_2.png"
class="img-fluid"
alt="Your Brand"
/>
</div>
<div class="col-md-4 mt-2">
<img
src="../assets/asset-corporate-portal/media/landingpage/promotion_3.png"
class="img-fluid"
alt="Your Brand"
/>
</div> -->
</div>
</div>
</div>
</div>
<!-- Large(>=992px) and XL (>=1200px) END -->
<!-- Promotion END -->
</div>