Create Hospital Website Template using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a professional hospital website template with HTML, CSS, and JavaScript. Follow our detailed guide for beginners to build a responsive and functional hospital website from scratch.

Join us on Telegram
create-hospital-website-template-using-html-css-and-javascript.webp
Read Alsodynamic-field.pngHow to Create Form Fields Dynamically with JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Creating a hospital website template involves combining HTML for structure, CSS for styling, and JavaScript for interactivity. This guide will walk you through the process step-by-step, ensuring you understand each component and how they work together to create a seamless user experience.

Source Code

Step 1 (HTML Code):

The first thing we need to do is create our HTML File for Hospital Website Template. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Here's a breakdown of its components:

<!DOCTYPE html>: Specifies the document type and version of HTML being used.

<html lang="en">: Defines the root element of the HTML document with the language attribute set to English.

<head>: Contains meta-information about the HTML document, such as character encoding, viewport settings, and the page title.

  • <meta charset="UTF-8">: Sets the character encoding to UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and scaling on various devices.
  • <title>Hospital Website</title>: Sets the title of the webpage shown in the browser tab.
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />: Links to Font Awesome for icons.
  • <link rel="stylesheet" href="styles.css">: Links to a local stylesheet for additional styling.

<body>: Contains the visible content of the webpage.

  • <header>: Represents the header section of the webpage containing a logo, navigation menu, and a toggle button (probably for mobile navigation).
  • Sections (<section>): Divided into several sections (home, about, doctor, review, contact, blog) using unique IDs for navigation and styling purposes.
  • Each section (<section>) contains structured content such as headings (<h1>, <h2>, <h3>), paragraphs (<p>), images (<img>), and buttons (<button>).
  • <footer>: Contains information typically placed at the bottom of the webpage, including links, a brief description, and credits.

External Scripts:

  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>: Links to jQuery library.
  • <script src="script.js"></script>: Links to a local JavaScript file (script.js) for client-side scripting.
Read AlsoCreate a Custom Multiple File Uploader with HTML, CSS, and Javascript.jpgCreate a Custom Multiple File Uploader with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Next, we need to style our hospital template by adding our CSS. This will give our hospital template an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Here's a detailed explanation of the code:

Importing Google Fonts

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
  • This line imports the "Roboto" font family from Google Fonts with various weights and styles.

Root Variables

:root {
    --blue: #0188df;
    --black: #444d53;
    --wigth: #fff; /* Note: Possible typo; should likely be --white */
}
  • :root defines CSS variables that can be reused throughout the stylesheet. Variables --blue, --black, and --wigth (probably meant to be --white) are defined.

Global Styles

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    text-transform: capitalize;
    outline: none;
    transition: all linear .2s;
    scroll-behavior: smooth;
}
  • This universal selector (*) resets the margin and padding of all elements to 0.
  • box-sizing: border-box ensures that padding and border are included in the element's total width and height.
  • font-family: "Roboto", sans-serif sets the font for all elements.
  • text-decoration: none removes underline from links.
  • text-transform: capitalize capitalizes the first letter of each word.
  • outline: none removes the outline from focused elements.
  • transition: all linear .2s adds a smooth transition effect for all properties.
  • scroll-behavior: smooth enables smooth scrolling.

HTML Styles

html {
    font-size: 62.5%;
    overflow-x: hidden;
}
  • font-size: 62.5% sets the base font size to 10px (62.5% of 16px), making it easier to use rem units.
  • overflow-x: hidden prevents horizontal scrolling.

Button Styles

.button {
    width: 15rem;
    height: 3.5rem;
    background: var(--blue);
    color: var(--wigth); /* Probably should be --white */
    font-size: 1.7rem;
    text-transform: capitalize;
    border-radius: .5rem;
    cursor: pointer;
    margin: 1rem 0;
    border: .1rem solid var(--blue);
}
.button:hover {
    border: .1rem solid var(--blue);
    background: var(--wigth);
    color: var(--blue);
    letter-spacing: .2rem;
}
  • .button styles the button element with specific dimensions, colors, and hover effects.

Title Styles

.title {
    text-align: center;
    padding: 0rem 1rem;
    font-size: 2.5rem;
    color: var(--black);
    font-weight: 300;
}
  • .title centers the text, adds padding, and sets font size, color, and weight.

Heading Styles

.heading {
    text-align: center;
    font-size: 4rem;
    padding: 1rem;
    padding-top: 8rem;
    color: var(--blue);
    letter-spacing: .1rem;
}
  • .heading centers the heading, adds padding, and sets font size, color, and letter spacing.

Header Styles

header {
    width: 96%;
    background: var(--wigth); /* Probably should be --white */
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    z-index: 1000;
}
header a {
    color: var(--black);
}
header a:hover {
    color: var(--blue);
}
header .logo {
    font-size: 3rem;
}
header .logo span {
    color: var(--blue);
}
header .navbar ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
header .navbar ul li {
    margin: 0 1rem;
}
header .navbar ul li a {
    font-size: 2rem;
    color: var(--black);
}
header .navbar ul li a:hover {
    color: var(--blue);
}
header .fa-bars {
    font-size: 3rem;
    color: var(--blue);
    cursor: pointer;
    display: none;
}
header .fa-times {
    transform: rotate(180deg);
}
.header-active {
    top: 0;
    width: 100%;
    box-shadow: .1rem .3rem rgba(0,0,0,.3);
}
  • Styles for the header element, including positioning, layout, and responsiveness.
  • header a styles links within the header, including hover effects.
  • .logo and .logo span style the logo text and its colored span.
  • .navbar ul styles the navigation list, making it a flex container.
  • .fa-bars and .fa-times styles for icons used in responsive navigation.
  • .header-active is used to modify the header's position and add a shadow when active.

Home Section (.home):

.home {
    min-height: 100vh;
    padding-top: 10rem;
}
.home .row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 85%;
    margin: 0 auto;
}
.home .row .images img {
    height: 75vh;
}
.home .content h1 {
    font-size: 4rem;
    color: var(--black);
}
.home .content h1 span {
    color: var(--blue);
}
.home .content p {
    font-size: 1.9rem;
    color: var(--black);
}
  • .home: Ensures the section takes at least the full height of the viewport (min-height: 100vh) and has a top padding of 10rem.
  • .home .row: Uses flexbox to align items in the center and distribute space evenly around them. It sets the width to 85% and centers it with margin: 0 auto.
  • .home .row .images img: Sets the height of images within the .images container to 75% of the viewport height.
  • .home .content h1: Styles the main heading with a font size of 4rem and a color defined by var(--black).
  • .home .content h1 span: Styles any span within the heading with a color defined by var(--blue).
  • .home .content p: Styles paragraphs with a font size of 1.9rem and a color defined by var(--black).

About Section (.about):

.about {
    background: #f9f9f9;
}
.about .box-container .box {
    width: 75%;
    margin: 4rem auto;
    border-radius: .5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--wigth);
}
.about .box-container .box .images {
    width: 50%;
    height: 40rem;
}
.about .box-container .box .images img {
    width: 100%;
    height: 100%;
}
.about .box-container .box .content {
    height: 100%;
    width: 50%;
    padding: 2rem;
}
.about .box-container .box .content h3 {
    font-size: 3rem;
    color: var(--blue);
    display: flex;
    align-items: start;
}
.about .box-container .box .content p {
    font-size: 1.5rem;
    color: var(--black);
    padding: 1rem 0;
    text-align: start;
}
.about .box-container .box:nth-child(even) {
    flex-flow: row-reverse;
}
  • .about: Sets the background color to #f9f9f9.
  • .about .box-container .box: Styles individual boxes with a width of 75%, centered with a margin, rounded corners, shadow effect, flexbox layout, and hidden overflow. The background color is set to the value of var(--wigth).
  • .about .box-container .box .images: Sets the dimensions of the image container to 50% width and 40rem height.
  • .about .box-container .box .images img: Ensures images fill the container completely.
  • .about .box-container .box .content: Styles the content container within the box, setting its dimensions and padding.
  • .about .box-container .box .content h3: Styles headings within the content with a font size of 3rem, color from var(--blue), and flexbox alignment.
  • .about .box-container .box .content p: Styles paragraphs within the content with a font size of 1.5rem, color from var(--black), padding, and left alignment.
  • .about .box-container .box:nth-child(even): Applies a reverse row flex direction to every even child box for alternating layouts.

Card Section (.card):

.card .box-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.card .box-container .box {
    width: 30rem;
    margin: 2rem 1rem;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.card .box-container .box img {
    height: 30rem;
    width: 100%;
    object-fit: cover;
}
.card .box-container .box .content {
    padding: 1rem 1.3rem;
}
.card .box-container .box .content h2 {
    font-size: 2rem;
    text-align: center;
    color: var(--black);
}
.card .box-container .box .content h2:hover {
    color: var(--blue);
    text-decoration: underline;
}
.card .box-container .box .content p {
    font-size: 1.7rem;
    text-align: center;
    color: var(--black);
}
.card .box-container .box .content .icons {
    text-align: center;
}
.card .box-container .box .content .icons a {
    font-size: 2rem;
    color: var(--blue);
    text-align: center;
    margin: 1rem;
}
  • .card .box-container: Uses flexbox to center and wrap child elements.
  • .card .box-container .box: Styles individual card boxes with fixed dimensions, margin, hidden overflow, rounded corners, and shadow effect.
  • .card .box-container .box img: Ensures images fill the box container with a fixed height and maintain aspect ratio using object-fit: cover.
  • .card .box-container .box .content: Adds padding to the content within the box.
  • .card .box-container .box .content h2: Styles headings within the content with a font size of 2rem, centered text, and color from var(--black). Adds hover effects to change color and underline text.
  • .card .box-container .box .content p: Styles paragraphs with a font size of 1.7rem, centered text, and color from var(--black).
  • .card .box-container .box .content .icons: Centers icon links within the content.
  • .card .box-container .box .content .icons a: Styles icon links with a font size of 2rem, color from var(--blue), centered text, and margin.

Review Section (.review):

.review .box-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
}
.review .box-container .box {
    width: 35rem;
    text-align: center;
    padding: 0 2rem;
    margin: 4rem 1.5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.review .box-container .box .images {
    display: flex;
    align-items: center;
    text-align: left;
    padding: .5rem 0;
    border-top: .1rem solid #333;
}
.review .box-container .box .images img {
    height: 9rem;
    width: 9rem;
    border-radius: 50%;
    object-fit: cover;
    margin: .8rem 1rem;
}
.review .box-container .box i {
    font-size: 6rem;
    margin-top: -3rem;
    color: var(--blue);
    opacity: .4;
}
.review .box-container .box p {
    color: var(--black);
    font-size: 1.7rem;
    padding: 2rem 0;
}
.review .box-container .box .info h3 {
    color: var(--blue);
    font-size: 2rem;
}
.review .box-container .box .info span {
    color: var(--black);
    font-size: 2rem;
}
  • .review .box-container: Uses flexbox to center and wrap child elements, with padding at the top and bottom.
  • .review .box-container .box: Styles individual review boxes with a fixed width, center-aligned text, padding, margin, and a shadow effect.
  • .review .box-container .box .images: Uses flexbox to align images within the box, with left text alignment, padding, and a top border.
  • .review .box-container .box .images img: Styles images within the box with fixed dimensions, rounded corners, and margin.
  • .review .box-container .box i: Styles icons with a large font size, color from var(--blue), and partial opacity.
  • .review .box-container .box p: Styles paragraphs with a color from var(--black), font size, and padding.
  • .review .box-container .box .info h3: Styles headings within the .info container with a color from var(--blue) and font size.
  • .review .box-container .box .info span: Styles spans within the .info container with a color from var(--black) and font size.

Contact Section (.contact):

.contact {
    background: #eee;
}
.contact .row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
}
.contact .row .images img {
    width: 50vw;
    height: 70vh;
}
.contact .row .form-container {
    width: 50%;
    padding-right: 6rem;
}
.contact .row .form-container input, textarea {
    width: 100%;
    height: 4rem;
    background: var(--wigth);
    border: none;
    border-radius: 5rem;
    padding: 0 1rem;
    margin: 1rem 0;
    color: var(--blue);
    font-size: 1.7rem;
}
.contact .row .form-container input:focus, textarea:focus {
    border: .2rem solid var(--blue);
}
.contact .row .form-container textarea {
    height: 20rem;
    border-radius: 1rem;
    padding: 1rem;
    resize: none;
}
.contact .row .form-container input[type="submit"] {
    width: 17rem;
    background: var(--blue);
    color: var(--wigth);
    cursor: pointer;
    font-size: 2rem;
}
.contact .row .form-container input[type="submit"]:hover {
    background: var(--wigth);
    color: var(--blue);
    border: .2rem solid var(--blue);
}
  • .contact: Sets the background color to #eee.
  • .contact .row: Uses flexbox to center align items and justify content within a row, with padding at the top and bottom.
  • .contact .row .images img: Sets the dimensions of images within the .images container.
  • .contact .row .form-container: Styles the form container within the contact section, setting its width and padding.
  • .contact .row .form-container input, textarea: Styles input fields and textareas with full width, fixed height, background color from var(--wigth), no border, rounded corners, padding, margin, text color from var(--blue), and font size.
  • .contact .row .form-container input:focus, textarea:focus: Adds focus styles with a border color from var(--blue).
  • .contact .row .form-container textarea: Sets a fixed height, rounded corners, padding, and disables resizing for textareas.
  • .contact .row .form-container input[type="submit"]: Styles submit buttons with fixed width, background color from var(--blue), text color from var(--wigth), cursor pointer, and font size.
  • .contact .row .form-container input[type="submit"]:hover: Adds hover styles for submit buttons with inverted colors and a border.

Blog Section (.blog):

.blog .box-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.blog .box-container .box {
    width: 35rem;
    margin: 2rem 1rem;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.blog .box-container .box img {
    width: 100%;
    object-fit: cover;
}
.blog .box-container .box .content {
    padding: 0 1.5rem;
}
.blog .box-container .box .content h2 {
    font-size: 2rem;
    color: var(--blue);
}
.blog .box-container .box .content p {
    font-size: 1.3rem;
    color: var(--black);
}
  • .blog .box-container: Uses flexbox to center and wrap child elements.
  • .blog .box-container .box: Styles individual blog boxes with fixed width, margin, hidden overflow, rounded corners, and a shadow effect.
  • .blog .box-container .box img: Ensures images fill the box container with a fixed width and maintain aspect ratio using object-fit: cover.
  • .blog .box-container .box .content: Adds padding to the content within the box.
  • .blog .box-container .box .content h2: Styles headings within the content with a font size of 2rem and color from var(--blue).
  • .blog .box-container .box .content p: Styles paragraphs with a font size of 1.3rem and color from var(--black).

Footer Section (.footer):

.footer {
    background: var(--black);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
}
  • .footer: Styles the footer section.
  • background: var(--black);: Sets the background color using a CSS variable --black.
  • display: flex;: Utilizes flexbox for layout.
  • justify-content: center;: Centers content horizontally.
  • flex-wrap: wrap;: Allows items to wrap onto multiple lines if needed.
  • padding: 2rem 0;: Adds padding of 2rem at the top and bottom.
.footer .box {
    width: 30rem;
    margin: 2rem;
    text-align: center;
}
  • .footer .box: Styles individual boxes within the footer.
  • width: 30rem;: Sets a fixed width of 30rem for each box.
  • margin: 2rem;: Adds a margin of 2rem around each box.
  • text-align: center;: Centers text within each box.
.footer .box:nth-child(1) {
    text-align: left;
}
  • .footer .box:nth-child(1): Targets the first box and aligns its text to the left.
.footer .box .logo {
    padding: 2rem 0;
    font-size: 3rem;
    color: var(--wigth);
}
.footer .box .logo:hover {
    color: var(--blue);
}
.footer .box .logo span {
    color: var(--blue);
}
  • .footer .box .logo: Styles the logo within each box.
  • padding: 2rem 0;: Adds padding above and below the logo.
  • font-size: 3rem;: Sets the font size to 3rem.
  • color: var(--wigth);: Uses a CSS variable --wigth for the text color (likely meant to be --white or --white).
  • .footer .box .logo:hover: Changes the color to var(--blue) when hovering over the logo.
  • .footer .box .logo span: Styles spans within the logo with a color from var(--blue).
.footer .box p {
    font-size: 1.5rem;
    color: var(--wigth);
}
  • .footer .box p: Styles paragraphs within each box.
  • font-size: 1.5rem;: Sets the font size to 1.5rem.
  • color: var(--wigth);: Sets the text color using a CSS variable --wigth.
.footer .box a {
    color: var(--wigth);
    font-size: 2rem;
    display: block;
    padding: .2rem 0;
}
.footer .box a:hover {
    text-decoration: underline;
}
  • .footer .box a: Styles links within each box.
  • color: var(--wigth);: Sets the text color using a CSS variable --wigth.
  • font-size: 2rem;: Sets the font size to 2rem.
  • display: block;: Makes links block-level elements for better spacing.
  • padding: .2rem 0;: Adds padding above and below each link.
  • .footer .box a:hover: Underlines links when hovering.
.footer .credit {
    width: 85%;
    padding-top: 1rem;
    font-size: 2rem;
    color: var(--wigth);
    text-align: center;
    border-top: .2rem solid var(--wigth);
}
.footer .credit span {
    color: var(--blue);
    text-decoration: underline;
    letter-spacing: .2rem;
}
  • .footer .credit: Styles the credit section.
  • width: 85%;: Sets the width to 85% of its container.
  • padding-top: 1rem;: Adds padding at the top.
  • font-size: 2rem;: Sets the font size to 2rem.
  • color: var(--wigth);: Sets the text color using a CSS variable --wigth.
  • text-align: center;: Centers the text.
  • border-top: .2rem solid var(--wigth);: Adds a top border with color from var(--wigth).
.footer .credit span {
    color: var(--blue);
    text-decoration: underline;
    letter-spacing: .2rem;
}
  • .footer .credit span: Styles spans within the credit section.
  • color: var(--blue);: Sets the text color using a CSS variable --blue.
  • text-decoration: underline;: Underlines the text.
  • letter-spacing: .2rem;: Adds letter spacing.

Media Query:

@media (max-width:768px) {
    html {
        font-size: 55%;
    }
    /* Styles for responsive layout changes */
}
  • @media (max-width:768px): Media query targeting screens up to 768px wide.
  • html { font-size: 55%; }: Reduces the base font size to 55% for smaller screens.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{
    --blue:#0188df;
    --black:#444d53;
    --wigth:#fff;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    text-transform: capitalize;
    outline: none;
    transition: all linear .2s;
    scroll-behavior: smooth;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
}
.button{
    width: 15rem;
    height: 3.5rem;
    background: var(--blue);
    color: var(--wigth);
    font-size: 1.7rem;
    text-transform: capitalize;
    border-radius: .5rem;
    cursor: pointer;
    margin: 1rem 0;
    border: .1rem solid var(--blue);
}
.button:hover{
    border: .1rem solid var(--blue);
    background: var(--wigth);
    color: var(--blue);
    letter-spacing: .2rem;
}
.title{
    text-align: center;
    padding: 0rem 1rem;
    font-size: 2.5rem;
    color: var(--black);
    font-weight: 300;
}
.heading{
    text-align: center;
    font-size: 4rem;
    padding: 1rem;
    padding-top: 8rem;
    color: var(--blue);
    letter-spacing: .1rem;
}
header{
    width: 96%;
    background: var(--wigth);
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    z-index: 1000;
}
header a{
    color: var(--black);
}
header a:hover{
    color: var(--blue);
}
header .logo{
    font-size: 3rem;
}
header .logo span{
    color: var(--blue);
}
header .navbar ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
header .navbar ul li{
    margin: 0 1rem;
}
header .navbar ul li a{
    font-size: 2rem;
    color: var(--black);
}
header .navbar ul li a:hover{
    color: var(--blue);
}
header .fa-bars{
    font-size: 3rem;
    color: var(--blue);
    cursor: pointer;
    display: none;
}
header .fa-times{
    transform: rotate(180deg);
}
.header-active{
    top: 0;
    width: 100%;
    box-shadow: .1rem .3rem rgba(0,0,0,.3);
}
.home{
    min-height: 100vh;
    padding-top: 10rem;
}
.home .row{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 85%;
    margin: 0 auto;
}
.home .row .images img{
    height: 75vh;
}
.home .content h1{
    font-size: 4rem;
    color: var(--black);
}
.home .content h1 span{
    color: var(--blue);
}
.home .content p{
    font-size: 1.9rem;
    color: var(--black);
}
.about{
    background: #f9f9f9;
}
.about .box-container .box{
    width: 75%;
    margin: 4rem auto;
    border-radius: .5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--wigth);
}
.about .box-container .box .images{
    width: 50%;
    height: 40rem;
}
.about .box-container .box .images img{
    width: 100%;
    height: 100%;
}
.about .box-container .box .content{
    height: 100%;
    width: 50%;
    padding: 2rem;
}
.about .box-container .box .content h3{
    font-size: 3rem;
    color: var(--blue);
    display: flex;
    align-items: start;
}
.about .box-container .box .content p{
    font-size: 1.5rem;
    color: var(--black);
    padding: 1rem 0;
    text-align: start;
}
.about .box-container .box:nth-child(even){
    flex-flow: row-reverse;
}
.card .box-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.card .box-container .box{
    width: 30rem;
    margin: 2rem 1rem;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.card .box-container .box img{
    height: 30rem;
    width: 100%;
    object-fit: cover;
}
.card .box-container .box .content{
    padding: 1rem 1.3rem;
}
.card .box-container .box .content h2{
    font-size: 2rem;
    text-align: center;
    color: var(--black);
}
.card .box-container .box .content h2:hover{
    color: var(--blue);
    text-decoration: underline;
}
.card .box-container .box .content p{
    font-size: 1.7rem;
    text-align: center;
    color: var(--black);
}
.card .box-container .box .content .icons{
    text-align: center;
}
.card .box-container .box .content .icons a{
    font-size: 2rem;
    color: var(--blue);
    text-align: center;
    margin: 1rem;
}
.review .box-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
}
.review .box-container .box{
    width: 35rem;
    text-align: center;
    padding: 0 2rem;
    margin: 4rem 1.5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.review .box-container .box .images{
    display: flex;
    align-items: center;
    text-align: left;
    padding: .5rem 0;
    border-top: .1rem solid #333;
}
.review .box-container .box .images img{
    height: 9rem;
    width: 9rem;
    border-radius: 50%;
    object-fit: cover;
    margin: .8rem 1rem ;
}
.review .box-container .box i{
    font-size: 6rem;
    margin-top: -3rem;
    color: var(--blue);
    opacity: .4;
}
.review .box-container .box p{
    color: var(--black);
    font-size: 1.7rem;
    padding: 2rem 0;
}
.review .box-container .box .info h3{
    color: var(--blue);
    font-size: 2rem
}
.review .box-container .box .info span{
    color: var(--black);
    font-size: 2rem
}
.contact{
    background: #eee;
}
.contact .row{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
}
.contact .row .images img{
    width: 50vw;
    height: 70vh;
}
.contact .row .form-container{
    width: 50%;
    padding-right: 6rem;
}
.contact .row .form-container input,textarea{
    width: 100%;
    height: 4rem;
    background: var(--wigth);
    border: none;
    border-radius: 5rem;
    padding: 0 1rem;
    margin: 1rem 0;
    color: var(--blue);
    font-size: 1.7rem;
} 
.contact .row .form-container input:focus,textarea:focus{
    border: .2rem solid var(--blue);
}
.contact .row .form-container textarea{
    height: 20rem;
    border-radius: 1rem;
    padding: 1rem;
    resize: none;
}
.contact .row .form-container input[type="submit"]{
    width: 17rem;
    background: var(--blue);
    color: var(--wigth);
    cursor: pointer;
    font-size: 2rem;
}
.contact .row .form-container input[type="submit"]:hover{
    background: var(--wigth);
    color: var(--blue);
    border: .2rem solid var(--blue);
}
.blog .box-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.blog .box-container .box{
    width: 35rem;
    margin: 2rem 1rem;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.blog .box-container .box img{
    width: 100%;
    object-fit: cover;
}
.blog .box-container .box .content{
    padding: 0 1.5rem;
}
.blog .box-container .box .content h2{
    font-size: 2rem;
    color: var(--blue);
}
.blog .box-container .box .content p{
    font-size: 1.3rem;
    color: var(--black);
}
.footer{
    background: var(--black);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
}
.footer .box{
    width: 30rem;
    margin: 2rem;
    text-align: center;
}
.footer .box:nth-child(1){
    text-align: left;
}
.footer .box .logo{
    padding: 2rem 0;
    font-size: 3rem;
    color: var(--wigth);
}
.footer .box .logo:hover{
    color: var(--blue);
}
.footer .box .logo span{
    color: var(--blue);
}
.footer .box p{
    font-size: 1.5rem;
    color: var(--wigth);
}
.footer .box a{
    color: var(--wigth);
    font-size: 2rem;
    display: block;
    padding: .2rem 0;
}
.footer .box a:hover{
    text-decoration: underline;
}
.footer .credit{
    width: 85%;
    padding-top: 1rem;
    font-size: 2rem;
    color: var(--wigth);
    text-align: center;
    border-top: .2rem solid var(--wigth);
}
.footer .credit span{
    color: var(--blue);
    text-decoration: underline;
    letter-spacing: .2rem;
}


/* media query */
@media (max-width:768px) {
    html{
        font-size: 55%;
    }
    header .fa-bars{
        display: block;
    }
    header .navbar{
        position: fixed;
        top: -100rem;
        left: 0;
        width: 100%;
        background-color: var(--wigth);
        opacity: 0;
    }
    header .navbar ul{
        flex-flow: column;
        padding: 2rem 0;
    }
    header .navbar ul li{
        margin: 1rem 0;
        width: 100%;
        text-align: center;
    }
    header .navbar ul li a{
        font-size: 3rem;
        display: block;
    }
    header .nav-toggle{
        top: 5.5rem;
        opacity: 1;
    }
    .home .row{
        flex-flow: column;
    }
    .home .row .content{
        text-align: center;
    }
    .home .row .images img{
        width: 100%;
    }
    .about .box-container .box {
        flex-flow: column;
        width: 90%;
    }
    .about .box-container .box:nth-child(even){
        flex-flow: column;
    }
    .about .box-container .box .images{
        width: 100%;
    }
    .about .box-container .box .content{
        width: 100%;
    }
    .contact .row {
        flex-flow: column;   
    }
    .contact .row .images img{
        width: 90vw;
        height: 50vh;
    }
    .contact .row .form-container{
        width: 90%;
        padding: 0;
    }
}

Step 3 (JavaScript Code):

Finally, we need to create a function for creating a responsive navigation menu that includes a toggle functionality for mobile screens and adjusts the header style based on the scroll position in JavaScript.

Explanation:

Document Ready Function ($(document).ready(function(){ ... });):

  • Ensures that the script runs after the HTML document is fully loaded and parsed.

Menu Icon Click Handler ($('.fa-bars').click(function(){ ... });):

  • Targets elements with the class .fa-bars (typically used for menu bars/icons).
  • When clicked, toggles two things:
    • fa-times class on the clicked element (usually changes the icon to 'X' for close).
    • nav-toggle class on .navbar element (typically used to show/hide the navigation menu).

Scroll and Load Event Handler ($(window).on('scroll load', function(){ ... });):

  • Executes the function when the window is scrolled or loaded.
  • Resets the menu icon and navigation bar to their default states (removes classes fa-times and nav-toggle).

Header Style Adjustment Based on Scroll Position:

  • Checks the vertical scroll position using $(window).scrollTop().
  • If the scroll position is greater than 30 pixels (> 30), adds the class header-active to the header element.
  • Otherwise, removes the header-active class.
  • This mechanism is typically used to change the appearance of the header (e.g., background color, size) when the user scrolls down the page.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

$(document).ready(function(){
  $('.fa-bars').click(function(){
      $(this).toggleClass('fa-times');
      $('.navbar').toggleClass('nav-toggle');
  });
  $(Window).on('scroll load',function(){
      $('.fa-bars').removeClass('fa-times');
      $('.navbar').removeClass('nav-toggle');
      
      if($(Window).scrollTop()>30){
          $('header').addClass('header-active');
      }
      else{
          $('header').removeClass('header-active');
      }
  })
});

Final Output:

create-hospital-website-template-using-html-css-and-javascript.gif
Read AlsoCreate a Stunning Food Delivery Website HTML & CSS.jpgCreate a Stunning Food Delivery Website: HTML & CSS

Conclusion:

By following this tutorial, you've learned how to design and develop a hospital website template using HTML, CSS, and JavaScript. You now have the foundational skills to customize and expand upon this template, adding more features and functionalities to suit specific hospital website needs.

Code by: Bharadwaja sahoo

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: hospital website template, HTML CSS JavaScript tutorial, responsive healthcare website, web design for hospitals, frontend development for medical websites, hospital website landing page, how to create a hospital website template using html css javascript, step by step hospital website design tutorial, beginners guide to building healthcare website template, responsive hospital website layout with html css js, customize hospital website template frontend
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺