HOSPITAL MANAGEMENT SYSTEM
HTML
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>complete responsive hospital website design </title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header section starts -->
<header class="header">
<a href="#" class="logo"> <i class="fas fa-heartbeat"></i> medcare. </a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#services">services</a>
<a href="#about">about</a>
<a href="#doctors">doctors</a>
<a href="#book">book</a>
<a href="#review">review</a>
<a href="#blogs">blogs</a>
</nav>
<div id="menu-btn" class="fas fa-bars"></div>
</header>
<!-- header section ends -->
<!-- home section starts -->
<section class="home" id="home">
<div class="content">
<h3>stay safe, stay healthy</h3>
<a href="#" class="btn"> contact us <span class="fas fa-chevron-right"></span> </a>
</div>
</section>
<!-- home section ends -->
<!-- icons section starts -->
<section class="icons-container">
<div class="icons">
<i class="fas fa-user-md"></i>
<h3>140+</h3>
<p>doctors at work</p>
</div>
<div class="icons">
<i class="fas fa-users"></i>
<h3>1040+</h3>
<p>satisfied patients</p>
</div>
<div class="icons">
<i class="fas fa-procedures"></i>
<h3>500+</h3>
<p>bed facility</p>
</div>
<div class="icons">
<i class="fas fa-hospital"></i>
<h3>80+</h3>
<p>available hospitals</p>
</div>
</section>
<!-- icons section ends -->
<!-- services section starts -->
<section class="services" id="services">
<h1 class="heading"> our <span>services</span> </h1>
<div class="box-container">
<div class="box">
<i class="fas fa-notes-medical"></i>
<h3>free checkups</h3>
<p>regular free checkups every saturday&sunday</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
<div class="box">
<i class="fas fa-ambulance"></i>
<h3>24/7 ambulance</h3>
<p>Avaibility of ambulance 24/7</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
<div class="box">
<i class="fas fa-user-md"></i>
<h3>expert doctors</h3>
<p>expert doctors around the Globe</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
<div class="box">
<i class="fas fa-pills"></i>
<h3>medicines</h3>
<p>Medicines availability 24/7</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
<div class="box">
<i class="fas fa-procedures"></i>
<h3>bed facility</h3>
<p>More than 500 bed availability</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
<div class="box">
<i class="fas fa-heartbeat"></i>
<h3>total care</h3>
<p>expect staff to take care of the patient</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
</div>
</section>
<!-- services section ends -->
<!-- about section starts -->
<section class="about" id="about">
<h1 class="heading"> <span>about</span> us </h1>
<div class="row">
<div class="content">
<h3>we take care of your healthy life</h3>
<p>Started in 1962,Delhi Medcare Hospital has become one of the best Hospital of the country with Updated technologies with modern day techniques </p>
<p>It includes 100+ Doctors < 300++ staff & 500+ Beds . We at Medcare take proper care of our patients & treat them as family & </p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
</div>
</section>
<!-- about section ends -->
<!-- doctors section starts -->
<section class="doctors" id="doctors">
<h1 class="heading"> our <span>doctors</span> </h1>
<div class="box-container">
<div class="box">
<img src="image/doc-1.jpg" alt="">
<h3>Y.K Mishra</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="image/doc-2.jpg" alt="">
<h3>John deo</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="image/doc-3.jpg" alt="">
<h3>Anubhav Singh</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="image/doc-4.jpg" alt="">
<h3>john deo</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="image/doc-5.jpg" alt="">
<h3>Benny white</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="image/doc-6.jpg" alt="">
<h3>javed khan</h3>
<span>expert doctor</span>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
</div>
</section>
<!-- doctors section ends -->
<!-- booking section starts -->
<section class="book" id="book">
<h1 class="heading"> <span>book</span> now </h1>
<div class="row">
<div class="image">
<img src="image/book-img.svg" alt="">
</div>
<form action="">
<h3>book appointment</h3>
<input type="text" placeholder="your name" class="box">
<input type="number" placeholder="your number" class="box">
<input type="email" placeholder="your email" class="box">
<input type="date" class="box">
<input type="submit" value="book now" class="btn">
</form>
</div>
</section>
<!-- booking section ends -->
<!-- review section starts -->
<section class="review" id="review">
<h1 class="heading"> client's <span>review</span> </h1>
<div class="box-container">
<div class="box">
<img src="image/pic-1.png" alt="">
<h3>Stuart</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p class="text">Got proper treatment ,staff was friendly</p>
</div>
<div class="box">
<img src="image/pic-2.png" alt="">
<h3>Rakesh</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p class="text">Recently visited Medcare hospital okhala.Doctor here are very goodbeing a lay man they make me understand everything about my problem... it was very nice of them The staff were also very cooperative and very professional.!</p>
</div>
<div class="box">
<img src="image/pic-3.png" alt="">
<h3>Amreen</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p class="text">Excellent Services provided by the hospital. The hospital is clean and well santized. The doctors provide proper guidance. The staff, nurses are very cooperative and helpful especially Mr. Mishra. He always help us with all the procedure in the hospital.</p>
</div>
</div>
</section>
<!-- review section ends -->
<!-- blogs section starts -->
<section class="blogs" id="blogs">
<h1 class="heading"> our <span>blogs</span> </h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="image/blog-1.jpg" alt="">
</div>
<div class="content">
<div class="icon">
<a href="#"> <i class="fas fa-calendar"></i> 1st Nov, 2021 </a>
<a href="#"> <i class="fas fa-user"></i> by admin </a>
</div>
<h3>DOES KETOGENIC DIET AFFECT CHOLESTEROL?</h3>
<p>The ketogenic diet is a low-carbohydrate, high-fat, adequate-protein diet, which is primarily used to treat difficult-to-control (refractory) epilepsy in children.</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
</div>
<div class="box">
<div class="image">
<img src="image/blog-2.jpg" alt="">
</div>
<div class="content">
<div class="icon">
<a href="#"> <i class="fas fa-calendar"></i> 20th Oct, 2021 </a>
<a href="#"> <i class="fas fa-user"></i> by admin </a>
</div>
<h3>IRREGULAR SLEEP MAY INCREASE RISK OF CARDIOVASCULAR PROBLEMS</h3>
<p>Definition of a healthy lifestyle for most of the people is No smoking or drinking, daily jogging and workouts with healthy diet. However, late night binge watching, overtime on projects past midnight is contributing to rising incidence of serious illnesses diabetes, heart attack and cancer. </p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
</div>
<div class="box">
<div class="image">
<img src="image/blog-3.jpg" alt="">
</div>
<div class="content">
<div class="icon">
<a href="#"> <i class="fas fa-calendar"></i> 11th May, 2021 </a>
<a href="#"> <i class="fas fa-user"></i> by admin </a>
</div>
<h3>DIET FOR A CONTROLLED BLOOD PRESSURE</h3>
<p>High blood pressure means the heart has to put in more effort to pump blood. This force can cause damage to blood vessels it can lead to heart attack, brain stroke, kidney damage or nerve damage so healthy diet helps in reducing the blood pressure few stepss to help in reducing blood pressure</p>
<a href="#" class="btn"> learn more <span class="fas fa-chevron-right"></span> </a>
</div>
</div>
</div>
</section>
<!-- blogs section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>quick links</h3>
<a href="#"> <i class="fas fa-chevron-right"></i> home </a>
<a href="#"> <i class="fas fa-chevron-right"></i> services </a>
<a href="#"> <i class="fas fa-chevron-right"></i> about </a>
<a href="#"> <i class="fas fa-chevron-right"></i> doctors </a>
<a href="#"> <i class="fas fa-chevron-right"></i> book </a>
<a href="#"> <i class="fas fa-chevron-right"></i> review </a>
<a href="#"> <i class="fas fa-chevron-right"></i> blogs </a>
</div>
<div class="box">
<h3>our services</h3>
<a href="#"> <i class="fas fa-chevron-right"></i> dental care </a>
<a href="#"> <i class="fas fa-chevron-right"></i> message therapy </a>
<a href="#"> <i class="fas fa-chevron-right"></i> cardiology </a>
<a href="#"> <i class="fas fa-chevron-right"></i> diagnosis </a>
<a href="#"> <i class="fas fa-chevron-right"></i> ambulance service </a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#"> <i class="fas fa-phone"></i> +123-456-7890 </a>
<a href="#"> <i class="fas fa-phone"></i> +111-222-3333 </a>
<a href="#"> <i class="fas fa-envelope"></i> helpline.medcare@gmail.com </a>
<a href="#"> <i class="fas fa-envelope"></i> management.medcare@gmail.com </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Delhi, india - 122012012 </a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#"> <i class="fab fa-facebook-f"></i> facebook </a>
<a href="#"> <i class="fab fa-twitter"></i> twitter </a>
<a href="#"> <i class="fab fa-twitter"></i> twitter </a>
<a href="#"> <i class="fab fa-instagram"></i> instagram </a>
<a href="#"> <i class="fab fa-linkedin"></i> linkedin </a>
<a href="#"> <i class="fab fa-pinterest"></i> pinterest </a>
</div>
</div>
<div class="credit"> created by <span>mr. web designer</span> | all rights reserved </div>
</section>
<!-- footer section ends -->
<!-- custom js file link -->
<script src="js/script.js"></script>
</body>
</html>
CSS
:root{
--green:#16a085;
--black:#444;
--light-color:#777;
--box-shadow:.5rem .5rem 0 rgba(22, 160, 133, .2);
--text-shadow:.4rem .4rem 0 rgba(0, 0, 0, .2);
--border:.2rem solid var(--green);
}
*{
font-family: 'Poppins', sans-serif;
margin:0; padding: 0;
box-sizing: border-box;
outline: none; border: none;
text-transform: capitalize;
transition: all .2s ease-out;
text-decoration: none;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 7rem;
scroll-behavior: smooth;
}
section{
padding:2rem 9%;
}
section:nth-child(even){
background: #f5f5f5;
}
.heading{
text-align: center;
padding-bottom: 2rem;
text-shadow: var(--text-shadow);
text-transform: uppercase;
color:var(--black);
font-size: 5rem;
letter-spacing: .4rem;
}
.heading span{
text-transform: uppercase;
color:var(--green);
}
.btn{
display: inline-block;
margin-top: 1rem;
padding: .5rem;
padding-left: 1rem;
border:var(--border);
border-radius: .5rem;
box-shadow: var(--box-shadow);
color:var(--green);
cursor: pointer;
font-size: 1.7rem;
background: #fff;
}
.btn span{
padding:.7rem 1rem;
border-radius: .5rem;
background: var(--green);
color:#fff;
margin-left: .5rem;
}
.btn:hover{
background: var(--green);
color:#fff;
}
.btn:hover span{
color: var(--green);
background:#fff;
margin-left: 1rem;
}
.header{
padding:2rem 9%;
position: fixed;
top:0; left: 0; right: 0;
z-index: 1000;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
}
.header .logo{
font-size: 2.5rem;
color: var(--black);
}
.header .logo i{
color: var(--green);
}
.header .navbar a{
font-size: 1.7rem;
color: var(--light-color);
margin-left: 2rem;
}
.header .navbar a:hover{
color: var(--green);
}
#menu-btn{
font-size: 2.5rem;
border-radius: .5rem;
background: #eee;
color:var(--green);
padding: 1rem 1.5rem;
cursor: pointer;
display: none;
}
.home{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:1.5rem;
padding-top: 10rem;
}
.home .image{
flex:1 1 45rem;
}
.home .image img{
width: 100%;
}
.home .content{
flex:1 1 45rem;
}
.home .content h3{
font-size: 4.5rem;
color:var(--black);
line-height: 1.8;
text-shadow: var(--text-shadow);
}
.home .content p{
font-size: 1.7rem;
color:var(--light-color);
line-height: 1.8;
padding: 1rem 0;
}
.icons-container{
display: grid;
gap:2rem;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
padding-top: 5rem;
padding-bottom: 5rem;
}
.icons-container .icons{
border:var(--border);
box-shadow: var(--box-shadow);
border-radius: .5rem;
text-align: center;
padding: 2.5rem;
}
.icons-container .icons i{
font-size: 4.5rem;
color:var(--green);
padding-bottom: .7rem;
}
.icons-container .icons h3{
font-size: 4.5rem;
color:var(--black);
padding: .5rem 0;
text-shadow: var(--text-shadow);
}
.icons-container .icons p{
font-size: 1.7rem;
color:var(--light-color);
}
.services .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
gap:2rem;
}
.services .box-container .box{
background:#fff;
border-radius: .5rem;
box-shadow: var(--box-shadow);
border:var(--border);
padding: 2.5rem;
}
.services .box-container .box i{
color: var(--green);
font-size: 5rem;
padding-bottom: .5rem;
}
.services .box-container .box h3{
color: var(--black);
font-size: 2.5rem;
padding:1rem 0;
}
.services .box-container .box p{
color: var(--light-color);
font-size: 1.4rem;
line-height: 2;
}
.about .row{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:2rem;
}
.about .row .image{
flex:1 1 45rem;
}
.about .row .image img{
width: 100%;
}
.about .row .content{
flex:1 1 45rem;
}
.about .row .content h3{
color: var(--black);
text-shadow: var(--text-shadow);
font-size: 4rem;
line-height: 1.8;
}
.about .row .content p{
color: var(--light-color);
padding:1rem 0;
font-size: 1.5rem;
line-height: 1.8;
}
.doctors .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:2rem;
}
.doctors .box-container .box{
text-align: center;
background:#fff;
border-radius: .5rem;
border:var(--border);
box-shadow: var(--box-shadow);
padding:2rem;
}
.doctors .box-container .box img{
height: 20rem;
border:var(--border);
border-radius: .5rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.doctors .box-container .box h3{
color:var(--black);
font-size: 2.5rem;
}
.doctors .box-container .box span{
color:var(--green);
font-size: 1.5rem;
}
.doctors .box-container .box .share{
padding-top: 2rem;
}
.doctors .box-container .box .share a{
height: 5rem;
width: 5rem;
line-height: 4.5rem;
font-size: 2rem;
color:var(--green);
border-radius: .5rem;
border:var(--border);
margin:.3rem;
}
.doctors .box-container .box .share a:hover{
background:var(--green);
color:#fff;
box-shadow: var(--box-shadow);
}
.book .row{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:2rem;
}
.book .row .image{
flex:1 1 45rem;
}
.book .row .image img{
width: 100%;
}
.book .row form{
flex:1 1 45rem;
background: #fff;
border:var(--border);
box-shadow: var(--box-shadow);
text-align: center;
padding: 2rem;
border-radius: .5rem;
}
.book .row form h3{
color:var(--black);
padding-bottom: 1rem;
font-size: 3rem;
}
.book .row form .box{
width: 100%;
margin:.7rem 0;
border-radius: .5rem;
border:var(--border);
font-size: 1.6rem;
color: var(--black);
text-transform: none;
padding: 1rem;
}
.book .row form .btn{
padding:1rem 4rem;
}
.review .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
gap:2rem;
}
.review .box-container .box{
border:var(--border);
box-shadow: var(--box-shadow);
border-radius: .5rem;
padding:2.5rem;
background: #fff;
text-align: center;
position: relative;
overflow: hidden;
z-index: 0;
}
.review .box-container .box img{
height: 10rem;
width: 10rem;
border-radius: 50%;
object-fit: cover;
border:.5rem solid #fff;
}
.review .box-container .box h3{
color:#fff;
font-size: 2.2rem;
padding:.5rem 0;
}
.review .box-container .box .stars i{
color:#fff;
font-size: 1.5rem;
}
.review .box-container .box .text{
color:var(--light-color);
line-height: 1.8;
font-size: 1.6rem;
padding-top: 4rem;
}
.review .box-container .box::before{
content: '';
position: absolute;
top:-4rem; left: 50%;
transform:translateX(-50%);
background:var(--green);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
height: 25rem;
width: 120%;
z-index: -1;
}
.blogs .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:2rem;
}
.blogs .box-container .box{
border:var(--border);
box-shadow: var(--box-shadow);
border-radius: .5rem;
padding: 2rem;
}
.blogs .box-container .box .image{
height: 20rem;
overflow:hidden;
border-radius: .5rem;
}
.blogs .box-container .box .image img{
height: 100%;
width: 100%;
object-fit: cover;
}
.blogs .box-container .box:hover .image img{
transform:scale(1.2);
}
.blogs .box-container .box .content{
padding-top: 1rem;
}
.blogs .box-container .box .content .icon{
padding: 1rem 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.blogs .box-container .box .content .icon a{
font-size: 1.4rem;
color: var(--light-color);
}
.blogs .box-container .box .content .icon a:hover{
color:var(--green);
}
.blogs .box-container .box .content .icon a i{
padding-right: .5rem;
color: var(--green);
}
.blogs .box-container .box .content h3{
color:var(--black);
font-size: 3rem;
}
.blogs .box-container .box .content p{
color:var(--light-color);
font-size: 1.5rem;
line-height: 1.8;
padding:1rem 0;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap:2rem;
}
.footer .box-container .box h3{
font-size: 2.5rem;
color:var(--black);
padding: 1rem 0;
}
.footer .box-container .box a{
display: block;
font-size: 1.5rem;
color:var(--light-color);
padding: 1rem 0;
}
.footer .box-container .box a i{
padding-right: .5rem;
color:var(--green);
}
.footer .box-container .box a:hover i{
padding-right:2rem;
}
.footer .credit{
padding: 1rem;
padding-top: 2rem;
margin-top: 2rem;
text-align: center;
font-size: 2rem;
color:var(--light-color);
border-top: .1rem solid rgba(0, 0, 0, .1);
}
.footer .credit span{
color:var(--green);
}
/* media queries */
@media (max-width:991px){
html{
font-size: 55%;
}
.header{
padding: 2rem;
}
section{
padding:2rem;
}
}
@media (max-width:768px){
#menu-btn{
display: initial;
}
.header .navbar{
position: absolute;
top:115%; right: 2rem;
border-radius: .5rem;
box-shadow: var(--box-shadow);
width: 30rem;
border: var(--border);
background: #fff;
transform: scale(0);
opacity: 0;
transform-origin: top right;
transition: none;
}
.header .navbar.active{
transform: scale(1);
opacity: 1;
transition: .2s ease-out;
}
.header .navbar a{
font-size: 2rem;
display: block;
margin:2.5rem;
}
}
@media (max-width:450px){
html{
font-size: 50%;
}
}
JAVASCRIPT
let menu = document.querySelector('#menu-btn');
let navbar = document.querySelector('.navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}
window.onscroll = () =>{
menu.classList.remove('fa-times');
navbar.classList.remove('active');
}
