Design front page of hospital with different style sheets

Design front page of hospital with different style sheets.

Code:-

Input:-

<!DOCTYPE html>

<html lang="en">

<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>Hospitals</title>



    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/en/thumb/0/0e/Prince_of_Wales_Hospital_logo.svg/1920px-Prince_of_Wales_Hospital_logo.svg.png" type="image/png">

    <link rel="stylesheet" href="covidcss.css">

</head>

<style>

    body {

        background-image: url(https://rubanpatliputrahospital.com/wp-content/uploads/2020/03/banner-3-1.jpg);

        background-repeat: no-repeat;

    }    

    .container_1 {

        width: 100%;

        height: 1250%;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        background-color: rgb(224 248 235 / 94%);

        padding: 100px 150px;

        margin-top: 750px;

    }   

    .item_3 {

        margin: 1px 0px;

        padding: 5px;

        width: 350px;

        height: 175px;

        background-color: white;

        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

        transition-property: background-color;

        transition-duration: 1s;

    } 

    .item_3:hover {

        background-color: rgb(217, 223, 219);

        width: 350px;

        height: 175px;

        border-radius: 40px;

        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

        color: white;

        text-shadow: 1px 1px #dae2e2;

    } 

    .img_1 {

        width: 50px;

        height: 50px;

        vertical-align: middle;

        margin-right: 30px;

        margin-left: 20px;

    }

    

    .p_call {

        text-align: center;

        display: inline-block;

        margin-top: 30px;

    }

</style>

<script>

    function myfunction() {

        window.open("https://rubanpatliputrahospital.com/httpsrubanpatliputrahospital-com/", "_self");

    }

</script>

<body>

    </div>

    <header>

        <div>




            <div class="header-area header-transparrent ">

                <div class="main-header header-sticky  ">

                    <div class="container">

                        <div class="row align-items-center">

                            <div class="col-xl-2 col-lg-2 col-md-2" style="padding:0px;margin:0px;  ">

                                <div class="logo">

                                    <a href="index.html"> <img src="https://rubanpatliputrahospital.com/wp-content/uploads/elementor/thumbs/Ruban@logo-with-NABH-2-ovg23ovg0xx8ocfhzbaqtv86rfyyms5d4as9irornm.png" alt="corna image load" style="margin: 20px;margin-left: -40px;margin-right:20px;"></a>

                                </div>

                            </div>

                            <div class="col-xl-10 col-lg-10 col-md-10">

                                <div class="main-menu f-right d-none d-lg-block">

                                    <nav>

                                        <ul id="navigation">

                                            <li class="active"><a onclick="myfunction()" style="cursor: pointer;"> Hospital Overview  <span style="color:rgb(104, 228, 151);">+</span> </a>




                                            </li>

                                            <li><a href="covid_tracker.html"> Super Speciality  <span style="color:rgb(104, 228, 151);">+</span></a>

                                            </li>

                                            <li><a href="#">Specialities  <span style="color:rgb(104, 228, 151);">+</span></a>

                                            </li>

                                            <li><a href="medicine.html"> Facilities  <span style="color:rgb(104, 228, 151);">+</span></a>

                                            </li>

                                            <li><a href="https://www.indiamart.com/corona-covid-19-supplies.html" target="_blank">Empanelment  <span style="color:rgb(104, 228, 151);">+</span></a>




                                            </li>

                                            <li><a href="#">International Patient  <span style="color:rgb(104, 228, 151);">+</span></a>

                                            </li>

                                        </ul>

                                    </nav>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

    </header>

</body>

</html>

Output:-

Design front page of hospital with different style sheets

Create a student BioData for HTML.

1 thought on “Design front page of hospital with different style sheets”

Leave a Comment