HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Medilab Bootstrap Template - Index</title>
<meta content="" name="description">
<meta content="" name="keywords">
<base href="https://shreyascyber.com/test/Medilab/">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Medilab
* Updated: Mar 10 2023 with Bootstrap v5.2.3
* Template URL: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Top Bar ======= -->
<div id="topbar" class="d-flex align-items-center fixed-top">
<div class="container d-flex justify-content-between">
<div class="contact-info d-flex align-items-center">
<i class="bi bi-envelope"></i> <a href="mailto:contact@example.com">contact@example.com</a>
<i class="bi bi-phone"></i> +1 5589 55488 55
</div>
<div class="d-none d-lg-flex social-links align-items-center">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
</div>
</div>
</div>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<h1 class="logo me-auto"><a href="index.html">Pharma</a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo me-auto"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#departments">Medicine</a></li>
<li><a class="nav-link scrollto" href="#doctors">Shop</a></li>
<li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="#">Drop Down 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 2</a></li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
</ul>
</li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
<a href="#appointment" class="appointment-btn scrollto"><span class="d-none d-md-inline">Login</span></a>
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<div class="container">
<h1>Welcome to Pharma</h1>
<h2>We offer a variety of services to meet your health needs</h2>
<a href="#about" class="btn-get-started scrollto">Get Started</a>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= Why Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<div class="content">
<h3>Why Choose Pharma?</h3>
<p>
Choose Pharma for unparalleled customer service, where personalized attention and expert advice are always at your fingertips. We offer convenient services like home delivery, automatic prescription refills, and online ordering to make your healthcare experience seamless. Trust in our commitment to quality, as we rigorously ensure the safety and effectiveness of all our products.
</p>
<div class="text-center">
<a href="#" class="more-btn">Learn More <i class="bx bx-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-8 d-flex align-items-stretch">
<div class="icon-boxes d-flex flex-column justify-content-center">
<div class="row">
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box mt-4 mt-xl-0">
<i class="bx bx-receipt"></i>
<h4>Exceptional Service</h4>
<p>Our friendly staff offers personalized care and expert advice to meet your health needs.</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box mt-4 mt-xl-0">
<i class="bx bx-cube-alt"></i>
<h4>Trusted Quality</h4>
<p>We ensure safe and effective products through strict quality control measures.</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box mt-4 mt-xl-0">
<i class="bx bx-images"></i>
<h4>Convenient Options</h4>
<p>Automatic refills, Offline and online ordering for a hassle-free experience.</p>
</div>
</div>
</div>
</div><!-- End .content-->
</div>
</div>
</div>
</section><!-- End Why Us Section -->
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container-fluid">
<div class="row">
<div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center align-items-stretch position-relative">
<a href="https://www.youtube.com/watch?v=c1eWgR5V83k" class="glightbox play-btn mb-4"></a>
</div>
<div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
<h3>Welcome to Pharma</h3>
<p>At Pharma, we are dedicated to providing our community with a wide range of quality healthcare products and services. Our mission is to enhance the well-being of our customers by offering exceptional service, expert advice, and a comprehensive selection of pharmaceutical and health-related products</p>
<div class="icon-box">
<div class="icon"><i class="bx bx-fingerprint"></i></div>
<h4 class="title"><a href="">Prescription Services</a></h4>
<p class="description">Fast and accurate prescription filling, with options for automatic refills and home delivery.</p>
</div>
<div class="icon-box">
<div class="icon"><i class="bx bx-gift"></i></div>
<h4 class="title"><a href="">Immunizations</a></h4>
<p class="description">Convenient and safe vaccination services for flu, shingles, and other preventable diseases</p>
</div>
<div class="icon-box">
<div class="icon"><i class="bx bx-atom"></i></div>
<h4 class="title"><a href="">Health Screenings</a></h4>
<p class="description">Blood pressure checks, cholesterol testing, and diabetes management support.</p>
</div>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Counts Section ======= -->
<section id="counts" class="counts">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="fas fa-user-md"></i>
<span data-purecounter-start="0" data-purecounter-end="45" data-purecounter-duration="1" class="purecounter"></span>
<p>Advisor</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-md-0">
<div class="count-box">
<i class="far fa-hospital"></i>
<span data-purecounter-start="0" data-purecounter-end="85" data-purecounter-duration="1" class="purecounter"></span>
<p>Stores</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="fas fa-flask"></i>
<span data-purecounter-start="0" data-purecounter-end="12" data-purecounter-duration="1" class="purecounter"></span>
<p>Research Labs</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="fas fa-award"></i>
<span data-purecounter-start="0" data-purecounter-end="150" data-purecounter-duration="1" class="purecounter"></span>
<p>Awards</p>
</div>
</div>
</div>
</div>
</section><!-- End Counts Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title">
<h2>Services</h2>
<p>Discover the comprehensive services offered at Pharma to meet all your healthcare needs.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
<div class="icon-box">
<div class="icon"><i class="fas fa-heartbeat"></i></div>
<h4><a href="">Health and Wellness Products</a></h4>
<p>Vitamins, supplements, and natural health products to support your overall well-being.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
<div class="icon-box">
<div class="icon"><i class="fas fa-pills"></i></div>
<h4><a href="">Over-the-Counter Medications</a></h4>
<p>A wide selection of OTC medications to address common health issues</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
<div class="icon-box">
<div class="icon"><i class="fas fa-hospital-user"></i></div>
<h4><a href="">Consultations</a></h4>
<p>Personalized consultations with our pharmacists to discuss your medications and health concerns.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
<div class="icon-box">
<div class="icon"><i class="fas fa-dna"></i></div>
<h4><a href="">Prescription Services</a></h4>
<p>Quick and accurate prescription filling with options for automatic refills and convenient home delivery.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
<div class="icon-box">
<div class="icon"><i class="fas fa-wheelchair"></i></div>
<h4><a href="">Immunizations</a></h4>
<p>Convenient vaccinations for flu, shingles, and other preventable diseases.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
<div class="icon-box">
<div class="icon"><i class="fas fa-notes-medical"></i></div>
<h4><a href="">Insurance Support</a></h4>
<p>Assistance with insurance claims and guidance on coverage for affordable healthcare solutions.</p>
</div>
</div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Departments Section ======= -->
<section id="departments" class="departments">
<div class="container">
<div class="section-title">
<h2>Types of Medicine We Offer</h2>
<p>Explore our comprehensive range of medications tailored to specialized fields in healthcare</p>
</div>
<div class="row gy-4">
<div class="col-lg-3">
<ul class="nav nav-tabs flex-column">
<li class="nav-item">
<a class="nav-link active show" data-bs-toggle="tab" href="#tab-1">Cardiology</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-2">Neurology</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-3">Hepatology</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-4">Pediatrics</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab-5">Eye Care</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="tab-content">
<div class="tab-pane active show" id="tab-1">
<div class="row gy-4">
<div class="col-lg-8 details order-2 order-lg-1">
<h3>Cardiology</h3>
<p class="fst-italic"> Medications in cardiology focus on treating conditions related to the heart and blood vessels</p>
<p>This includes drugs for managing hypertension (high blood pressure), angina (chest pain), arrhythmias (irregular heart rhythms), heart failure, and reducing the risk of heart attacks and strokes. Common medications include beta-blockers, ACE inhibitors, calcium channel blockers, and antiplatelet drugs.</p>
</div>
<div class="col-lg-4 text-center order-1 order-lg-2">
<img src="assets/img/departments-1.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="row gy-4">
<div class="col-lg-8 details order-2 order-lg-1">
<h3>Neurology</h3>
<p class="fst-italic">Neurological medications treat disorders of the nervous system, which includes the brain, spinal cord, and nerves</p>
<p>This category covers treatments for epilepsy (anticonvulsants), Parkinson's disease (dopamine agonists, MAO-B inhibitors), multiple sclerosis (immunomodulators), Alzheimer's disease (cholinesterase inhibitors, NMDA receptor antagonists), and migraine headaches (triptans, beta-blockers)</p>
</div>
<div class="col-lg-4 text-center order-1 order-lg-2">
<img src="assets/img/departments-2.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="row gy-4">
<div class="col-lg-8 details order-2 order-lg-1">
<h3>Hepatology</h3>
<p class="fst-italic">Hepatology medications are used to treat liver diseases such as hepatitis (antivirals), cirrhosis (diuretics, beta-blockers), liver cancer (chemotherapy agents, targeted therapies), and fatty liver disease (lifestyle modifications, insulin sensitizers</p>
<p>These medications aim to manage symptoms, slow disease progression, and improve liver function.</p>
</div>
<div class="col-lg-4 text-center order-1 order-lg-2">
<img src="assets/img/departments-3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="tab-pane" id="tab-4">
<div class="row gy-4">
<div class="col-lg-8 details order-2 order-lg-1">
<h3>Pediatrics</h3>
<p class="fst-italic">Pediatric medications are specially formulated and dosed for children to treat common childhood illnesses and conditions</p>
<p>This includes antibiotics for infections, bronchodilators for asthma, antihistamines for allergies, vaccines for preventive care, and medications for attention deficit hyperactivity disorder (ADHD) and other developmental disorders.</p>
</div>
<div class="col-lg-4 text-center order-1 order-lg-2">
<img src="assets/img/departments-4.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="tab-pane" id="tab-5">
<div class="row gy-4">
<div class="col-lg-8 details order-2 order-lg-1">
<h3>Eye Care</h3>
<p class="fst-italic">Medications in eye care address various conditions affecting the eyes.</p>
<p>This includes treatments for glaucoma (prostaglandin analogs, beta-blockers), dry eyes (artificial tears, cyclosporine), allergies (antihistamines, mast cell stabilizers), infections (antibiotics), and cataracts (anti-inflammatory agents). Eye care medications aim to improve vision, reduce discomfort, and prevent vision loss.</p>
</div>
<div class="col-lg-4 text-center order-1 order-lg-2">
<img src="assets/img/departments-5.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Departments Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col-lg-4">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>A108 Adam Street, New York, NY 535022</p>
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>info@example.com</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>+1 5589 55488 55s</p>
</div>
</div>
</div>
<div class="col-lg-8 mt-5 mt-lg-0">
</div>
</div>
</div>
</section><!-- End Contact Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container d-md-flex py-4">
<div class="me-md-auto text-center text-md-start">
<div class="copyright">
© Copyright <strong><span>Pharma</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
<div class="social-links text-center text-md-right pt-3 pt-md-0">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
</footer><!-- End Footer -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// Get the current URL, removing any fragment
var documentUrl = document.location.href.replace(/#.*$/, '')
// Iterate through all links
var linkEls = document.getElementsByTagName('A')
for (var linkIndex = 0; linkIndex < linkEls.length; linkIndex++) {
var linkEl = linkEls[linkIndex]
// Ignore links that don't begin with #
if (!linkEl.getAttribute('href').match(/^#/)) {
continue;
}
// Convert to an absolute URL
linkEl.setAttribute('href', documentUrl + linkEl.getAttribute('href'))
}
})
</script>
</body>
</html>
Also see: Tab Triggers