Healthcare Services Component - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/5.15.3/css/all.min.css"> <title>HealthCare Services</title> <style> .service card { transition: all 0.3s; } .service card:hover { transform: translateY( 5px); box shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .bg blue 100 { background color: #ebf8ff; } .bg green 100 { background color: #f0fff4; } .bg purple 100 { background color: #f5f3ff; } .hover\:bg blue 200:hover { background color: #bee3f8; } .hover\:bg green 200:hover { background color: #c6f6d5; } .hover\:bg purple 200:hover { background color: #e9d8fd; } </style> </head> <body> <div class="min vh 100 bg light"> <nav class="bg white shadow md"> <div class="container px 6 py 3"> <h1 class="h2 text gray 800">HealthCare Services</h1> </div> </nav> <div class="container px 6 py 8"> <h2 class="h3 font weight bold text center text gray 800 mb 4">Our Services</h2> <div class="row"> <div class="col md 4 mb 4"> <div class="service card bg blue 100 hover:bg blue 200 p 4 rounded lg shadow md"> <div class="text center"> <i class="fas fa mobile alt text 4xl mb 4 text primary"></i> <h3 class="h5 font weight semibold mb 2">Booking Mobile Service</h3> <p class="text gray 600">Book a mobile service for convenient healthcare at your doorstep.</p> </div> </div> </div> <div class="col md 4 mb 4"> <div class="service card bg green 100 hover:bg green 200 p 4 rounded lg shadow md"> <div class="text center"> <i class="fas fa video text 4xl mb 4 text success"></i> <h3 class="h5 font weight semibold mb 2">Online Consultation</h3> <p class="text gray 600">Connect with healthcare professionals through online video consultations.</p> </div> </div> </div> <div class="col md 4 mb 4"> <div class="service card bg purple 100 hover:bg purple 200 p 4 rounded lg shadow md"> <div class="text center"> <i class="fas fa hospital text 4xl mb 4 text info"></i> <h3 class="h5 font weight semibold mb 2">Booking Service at Center</h3> <p class="text gray 600">Schedule an appointment at our healthcare center for in person services.</p> </div> </div> </div> </div> <h2 class="h4 text center text gray 800 mt 5">A Great Place to Receive Care</h2> <p class="text center text gray 600 mb 4">Our expert team is dedicated to ensuring the health and longevity of your beloved Koi through personalized, state of the art medical services. Trust us to provide the best care, because at KOIMED, we care as much about your Koi as you do.</p> <div class="text center"> <a href="#" class="btn btn primary">Learn More</a> </div> </div> </div> <script src="https://code.jquery.com/jquery 3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
