index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hospital</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="splide.min.css">
    <link rel="stylesheet" href="responsive.css">
</head>
<body>  
    <section class="first-section">
        <div class="container">
            <nav class="nav">
                <img class="logo-img" src="logo.png" alt="">
                <ul class="nav-menu" id="nav-menu">
                    <li><a class="text-color-black text-medium fs-200" href="">About</a></li>
                    <li><a class="text-color-black text-medium fs-200" href="">Doctors</a></li>
                    <li><a class="text-color-black text-medium fs-200" href="">Pricing</a></li>
                    <li><a class="text-color-black text-medium fs-200" href="">Contact</a></li>
                </ul>
                <div class="btn-nav">
                    <button class="btn btn-login btn-blue background-color-blue text-color-white text-medium fs-100">Log in</button>
                    <button class="btn btn-signup text-color-blue background-color-white text-medium fs-100">Sign up</button>
                </div>

                <div class="btn-close" id="btn-close">
                    <img src="icon-close.svg" alt="">
                </div>
                <div class="btn-toggle" id="btn-toggle">
                    <img src="icon-hamburger.svg" alt="">
                </div>
            </nav>
            <div class="first-section-img-text">
                <div class="first-text">
                    <h1 class="text-color-black text-bold fs-800">WE CARE ABOUT YOUR HEALTH</h1>
                    <p class="text-color-black text-regular fs-200">Streamline your appointments effortlessly with our user-friendly frontend
                        Your well-being, our priority.</p>
                    <button class="btn btn-blue background-color-blue text-color-white text-medium fs-200">Read more</button>
                </div>
                <div class="imgdoc">
                    <img  src="maindoc.png" alt="">
                </div>
                
            </div>          
        </div>
    </section>
        
    <section class="background-color-white">
        <div class="container">
            <div class="second-section">
                <div class="second-section-text">
                    <h2 class="text-color-black text-bold fs-600">Who are we ?</h2>
                    <p class="text-color-black text-regular fs-100">Welcome to Our Medical Center, where care meets compassion. Our hospital is dedicated to providing exceptional healthcare services to our community. With a team of highly skilled medical professionals and cutting-edge technology, we are committed to ensuring your well-being.</p>
                    <div class="Numbers-data">
                        <img src="star.png" alt="">
                        <div>
                            <h3 class="text-color-black text-bold fs-300">+17.000</h3>
                            <p class="text-color-black text-regular fs-200">5 stars review</p>
                        </div>
                    </div>
                    <div class="Numbers-data">
                        <img src="hospital.png" alt="">
                        <h3 class="text-color-black text-bold fs-300">+100.000 sq ft</h3>
                    </div>
                    <div class="Numbers-data">
                        <img src="patient.png" alt="">
                        <h3 class="text-color-black text-bold fs-300">+12.000 Patient Anually </h3>
                    </div>
                </div>
                <div class="femaleimg">
                    <img  src="femaledoc.png" alt="">
                </div>
                
            </div>
        </div>
    </section>
    
    <section class="background-color-blue">
        <div class="container">
            <div class="third-section"> 
                <h2 class="text-bold text-color-white fs-600">Our Staff</h2>
                <div class="doctors">
                    <div class="splide" id="splide1" role="group" aria-label="Splide Basic HTML Example">
                        <div class="splide__track">
                              <ul class="splide__list">
                                  <li class="splide__slide custom"> 
                                        <div class="doctors-info">
                                            <div class="img-text">
                                                <img src="drhouse.png" alt="">
                                                <h3 class="text-color-black text-bold fs-400">Dr. House</h3>
                                                <h4 class="text-color-blue text-bold fs-200">Pathologist</h4>
                                                <p class="text-color-black text-regular fs-100">Unconventional diagnostic genius, House tackles medical puzzles .</p>
                                            </div>
                                            <div class="info">
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+20</h4>
                                                    <p class="text-bold text-color-blue fs-100">Experience</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+700</h4>
                                                    <p class="text-bold text-color-blue fs-100">Patients</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">24/7</h4>
                                                    <p class="text-bold text-color-blue fs-100">Support</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="splide__slide custom"> 
                                        <div class="doctors-info">
                                            <div class="img-text">
                                                <img src="drforeman.png" alt="">
                                                <h3 class="text-color-black text-bold fs-400">Dr. Foreman</h3>
                                                <h4 class="text-color-blue text-bold fs-200">Neurologist</h4>
                                                <p class="text-color-black text-regular fs-100">Empathetic ophthalmologist Wilson balances medical expertise with heartfelt compassion.</p>
                                            </div>
                                            <div class="info">
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+30</h4>
                                                    <p class="text-bold text-color-blue fs-100">Experience</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+1000</h4>
                                                    <p class="text-bold text-color-blue fs-100">Patients</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">24/7</h4>
                                                    <p class="text-bold text-color-blue fs-100">Support</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="splide__slide custom"> 
                                        <div class="doctors-info">
                                            <div class="img-text">
                                                <img src="drwillson.png" alt="">
                                                <h3 class="text-color-black text-bold fs-400">Dr. willson</h3>
                                                <h4  class="text-color-blue text-bold fs-200">Ophthalmologist</h4>
                                                <p class="text-color-black text-regular fs-100" >Neurology expert Who navigates complexities with clinical precision and ethical compass.</p>
                                            </div>
                                            <div class="info">
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+7</h4>
                                                    <p class="text-bold text-color-blue fs-100">Experience</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+250</h4>
                                                    <p class="text-bold text-color-blue fs-100">Patients</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">24/7</h4>
                                                    <p class="text-bold text-color-blue fs-100" >Support</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="splide__slide custom">
                                        <div class="doctors-info">
                                            <div class="img-text">
                                                <img src="drhouse.png" alt="">
                                                <h3 class="text-color-black text-bold fs-400">Dr. House</h3>
                                                <h4 class="text-color-blue text-bold fs-200">Pathologist</h4>
                                                <p class="text-color-black text-regular fs-100">Unconventional diagnostic genius, House tackles medical puzzles .</p>
                                            </div>
                                            <div class="info">
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+20</h4>
                                                    <p class="text-bold text-color-blue fs-100">Experience</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+700</h4>
                                                    <p class="text-bold text-color-blue fs-100">Patients</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">24/7</h4>
                                                    <p class="text-bold text-color-blue fs-100">Support</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="splide__slide custom">
                                        <div class="doctors-info">
                                            <div class="img-text">
                                                <img src="drforeman.png" alt="">
                                                <h3 class="text-color-black text-bold fs-400">Dr. Foreman</h3>
                                                <h4 class="text-color-blue text-bold fs-200">Neurologist</h4>
                                                <p class="text-color-black text-regular fs-100">Empathetic ophthalmologist Wilson balances medical expertise with heartfelt compassion.</p>
                                            </div>
                                            <div class="info">
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+30</h4>
                                                    <p class="text-bold text-color-blue fs-100">Experience</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+1000</h4>
                                                    <p class="text-bold text-color-blue fs-100">Patients</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">24/7</h4>
                                                    <p class="text-bold text-color-blue fs-100">Support</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="splide__slide custom">
                                        <div class="doctors-info">
                                            <div class="img-text">
                                                <img src="drwillson.png" alt="">
                                                <h3 class="text-color-black text-bold fs-400">Dr. willson</h3>
                                                <h4  class="text-color-blue text-bold fs-200">Ophthalmologist</h4>
                                                <p class="text-color-black text-regular fs-100" >Neurology expert Who navigates complexities with clinical precision and ethical compass.</p>
                                            </div>
                                            <div class="info">
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+7</h4>
                                                    <p class="text-bold text-color-blue fs-100">Experience</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">+250</h4>
                                                    <p class="text-bold text-color-blue fs-100">Patients</p>
                                                </div>
                                                <div>
                                                    <h4 class="text-medium text-color-black fs-200">24/7</h4>
                                                    <p class="text-bold text-color-blue fs-100" >Support</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                              </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="fourth-section-background">
        <div class="container">
            <div class="fourth-section">
                <h2 class="text-bold text-color-white fs-600 align-center">Pricing</h2>
                <div class="price-types">
                    <div class="splide" id="splide2" role="group" aria-label="Splide Basic HTML Example">
                        <div class="splide__track">
                              <ul class="splide__list ">
                                  <li class="splide__slide custom blureffect-parent ">
                                        
                                    <div class="price-info blureffect-child">
                                        <div>
                                            <h3 class="text-bold text-color-black fs-300">Standard</h3>
                                            <p class="text-regular text-color-black fs-100">First special packet</p>
                                        </div>
                                        <hr>
                                        <h3 class="text-medium text-color-black fs-300">150$/Day</h3>
                                        <div class="services">
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Shared room</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">General Physician</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Basic Blood Tests, X-ray</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Standard Medications</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Regular Check-ins</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Standard Hospital Meals</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Basic Customer Support</p>
                                            </div>
                                        </div>
                                        <button class="btn-price background-color-blue text-color-white text-bold fs-100">Book an appointment</button>
                                        </div>
                                    </li>
                                  <li class="splide__slide custom blureffect-parent">
                                    <div class="price-info blureffect-child">
                                        <div>
                                            <h3 class="text-bold text-color-black fs-300">Medium</h3>
                                            <p class="text-regular text-color-black fs-100">Second special packet</p>
                                        </div>
                                        <hr>
                                        <h3 class="text-medium text-color-black fs-300">300$/Day</h3>
                                        <div class="services">
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Private Room</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Specialist Doctor</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Blood Panel, X-ray, Ultrasound</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Personalized Medications, Minor Procedures</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Dedicated Nursing Support</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Nutritious Meals, Dietary Preferences</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Priority Customer Support</p>
                                            </div>
                                        </div>
                                        <button class="btn-price background-color-blue text-color-white text-bold fs-100">Book an appointment</button>
                                    </div>
                                  </li>
                                  <li class="splide__slide custom blureffect-parent">
                                    <div class="price-info blureffect-child">
                                        <div>
                                            <h3 class="text-bold text-color-black fs-300">Premium</h3>
                                            <p class="text-regular text-color-black fs-100">Third special packet</p>
                                        </div>
                                        <hr>
                                        <h3 class="text-medium text-color-black fs-300">600$/Day</h3>
                                        <div class="services">
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Suite with Amenities</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Top-tier Specialist Doctor</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Extensive Diagnostic Panel including MRI, CT Scan</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Advanced Therapies,Surgical Options</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">24/7 Personalized Nursing Care</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Gourmet Meals, Customized Diet Plans</p>
                                            </div>
                                            <div class="service-vector-text">
                                                <img src="Vector.png" alt="">
                                                <p class="text-regular text-color-black fs-100">Premium Customer Support</p>
                                            </div>
                                        </div>
                                        <button class=" btn-price background-color-blue text-color-white text-bold fs-100">Book an appointment</button>
                                    </div>
                                  </li>
                              </ul>
                        </div>
                      </div>


















                    <!-- <div class="price-info">
                        <div>
                            <h3 class="text-bold text-color-black fs-300">Standard</h3>
                            <p class="text-regular text-color-black fs-100">First special packet</p>
                        </div>
                        <hr>
                        <h3 class="text-medium text-color-black fs-300">150$/Day</h3>
                        <div class="services">
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Shared room</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">General Physician</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Basic Blood Tests, X-ray</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Standard Medications</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Regular Check-ins</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Standard Hospital Meals</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Basic Customer Support</p>
                            </div>
                        </div>
                        <button class="btn-price background-color-blue text-color-white text-bold fs-100">Book an appointment</button>
                    </div>

                    <div class="price-info">
                        <div>
                            <h3 class="text-bold text-color-black fs-300">Medium</h3>
                            <p class="text-regular text-color-black fs-100">Second special packet</p>
                        </div>
                        <hr>
                        <h3 class="text-medium text-color-black fs-300">300$/Day</h3>
                        <div class="services">
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Private Room</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Specialist Doctor</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Blood Panel, X-ray, Ultrasound</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Personalized Medications, Minor Procedures</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Dedicated Nursing Support</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Nutritious Meals, Dietary Preferences</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Priority Customer Support</p>
                            </div>
                        </div>
                        <button class="btn-price background-color-blue text-color-white text-bold fs-100">Book an appointment</button>
                    </div>

                    <div class="price-info">
                        <div>
                            <h3 class="text-bold text-color-black fs-300">Premium</h3>
                            <p class="text-regular text-color-black fs-100">Third special packet</p>
                        </div>
                        <hr>
                        <h3 class="text-medium text-color-black fs-300">600$/Day</h3>
                        <div class="services">
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Suite with Amenities</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Top-tier Specialist Doctor</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Extensive Diagnostic Panel including MRI, CT Scan</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Advanced Therapies,Surgical Options</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">24/7 Personalized Nursing Care</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Gourmet Meals, Customized Diet Plans</p>
                            </div>
                            <div class="service-vector-text">
                                <img src="Vector.png" alt="">
                                <p class="text-regular text-color-black fs-100">Premium Customer Support</p>
                            </div>
                        </div>
                        <button class=" btn-price background-color-blue text-color-white text-bold fs-100">Book an appointment</button>
                    </div> -->

                    
                </div>
            </div>
        </div>
    </section>

    <section class="background-color-white">
        <div class="container">
            <div class="fifth-section">
                <p class="text-bold fs-300 text-color-black align-center">Prioritize your well-being today. Reach out to our caring hospital team via email or phone for expert care tailored to you</p>
                <button class="btn btn-contact background-color-blue text-color-white fs-300 text-medium">Contact Us!</button>
            </div>
        </div>
    </section>

    <footer class="background-color-black">
        <div class="container">
            <div class="footer-section">
                <div class="footer-nav">
                    <h4 class="text-bold text-color-white fs-200">Customer services</h4>
                    <div class="links">
                        <a class="text-regular text-color-white fs-50 " href="#">Contact Us</a>
                        <a class="text-regular text-color-white fs-50" href="#">F&Q</a>
                        <a class="text-regular text-color-white fs-50" href="#">Phone number</a>
                    </div>
                </div>
                <div class="footer-nav">
                    <h4 class="text-bold text-color-white fs-200">Services</h4>
                    <div class="links">
                        <a class="text-regular text-color-white fs-50" href="#">Medication</a>
                        <a class="text-regular text-color-white fs-50" href="#">Appointments</a>
                        <a class="text-regular text-color-white fs-50" href="#">Support</a>
                    </div>
                </div>
                <div class="footer-nav">
                    <h4 class="text-bold text-color-white fs-200">About</h4>
                    <div class="links">
                        <a class="text-regular text-color-white fs-50" href="#">Our History</a>
                        <a class="text-regular text-color-white fs-50" href="#">Achievments</a>
                        <a class="text-regular text-color-white fs-50" href="#">Awards</a>
                    </div>
                </div>
                <div class="footer-nav">
                    <h4 class="align-left text-bold text-color-white fs-200 ">Social media</h4>
                    <div class="footer-socials">
                        <a href="#"><img src="linkedin.png" alt=""></a>
                        <a href="#"><img src="instagram.png" alt=""></a>
                        <a href="#"><img src="twitter.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <section class="background-color-blue">
        <div class="container">
            <div class="copyright-section">
                <h4 class="text-color-white text-medium fs-200 align-center">Copyright © 2023 | All rights reserved</h4>
            </div>
        </div>
    </section>
    <script src="splide.min.js"></script>
    <script>
    
        var splide = new Splide( '#splide1', {
      perPage: 3,
      gap    : '4rem',
      arrows:true,
      type:"loop",
      pagination:true,
      breakpoints: {
        896: {
          perPage: 2,
          gap    : '4.5rem',
        //   height : '6rem',
          pagination:true,
        },
        873:{
            gap:"4rem",
        },
        600:{
            perPage:1,
            // height:"4rem"
        },
        750:{
            arrows:false,
        }
    }
    } );
    
    splide.mount();
    </script>

    <script>
        var splide = new Splide( '#splide2', {
  perPage: 3,
  gap    : '4rem',
  arrows:false,
  pagination:false,
  drag:false,
  breakpoints: {
    990:{
        gap:"1.8rem",
    },
    828:{
        gap:"1.5rem",
    },
    787: {
      perPage: 2,
      gap    : '1rem',
      drag:true,
      pagination:true,
    //   height : '6rem',
    },
    630:{
        perPage:2,
        gap:"1rem",
        width:"100%"
    },
    500:{
        perPage:1,
        width:"100%",
        gap:"1.2rem",
    }
  },
} );

splide.mount();
    </script>
    <script src="main.js"></script>
</body>
</html>