<%- include('../partial/header') %>

<div class="main_header ">
    <div class="row w-100 h-100">
        <div class="col-lg-5 col-md-5 col-12 order-lg-1 order-2">
            <div class="lefside w-100 h-100 d-flex justify-content-center align-items-center">
                <img src="/images/coronavirus.png" alt="" width="600" height="400">
            </div>
        </div>

        <div class="col-lg-7 col-md-7 col-12 order-lg-2 order-1">
            <div class=" fight">
                <h1>Stay Home, Stay Safe, Eat Healthy & fight together against COVID-19</h1>
            </div>
        </div>
    </div>
</div>

<div class="corona-update">
    <div class="mb-3">
        <h3 class="text-uppercase text-center">COVID-19 Updates Worldwide</h3>
    </div>
    <div class="col-12 col-lg-12 data-show">
        <div>
            <h1 class="count" id="totalcases"></h1>
            <p>Total cases worldwide</p>
        </div>
        <div>
            <h1 class="count" id="totalrecovered"></h1>
            <p>Total recovered worldwide</p>
        </div>
        <div>
            <h1 class="count" id="totaldeath"></h1>
            <p>Total deaths worldwide</p>
        </div>
        <div>
            <h1 class="count" id="newconfirmed"></h1>
            <p>New confirmed cases today</p>
        </div>
    </div>
    
</div>

<div class="corona-update">
    <div class="mb-3">
        <h3 class="text-uppercase text-center">COVID-19 Updates India</h3>
    </div>
    <div class="col-12 col-lg-12 data-show">
        <div>
            <h1 class="count" id="totalcasesindia"></h1>
            <p>Total confirmed cases</p>
        </div>
        <div>
            <h1 class="count" id="totalactiveindia"></h1>
            <p>Total active cases</p>
        </div>
        <div>
            <h1 class="count" id="totalrecoveredindia"></h1>
            <p>Total recovered</p>
        </div>
        <div>
            <h1 class="count" id="totaldeathindia"></h1>
            <p>Total deaths</p>
        </div>
    </div>
    
</div>


<div class="container-fluid sub_section pt-5 pb-5" id="aboutid" >
    <div class="section_header text-center mb-5 mt-4">
        <h1>About COVID-19</h1>
    </div>

    <div class="row pt-4 ">
        <div class="col-lg-5 col-md-6 col-12 corona-pic">
            <img src="/images/covid.png" class="img-fluid" alt="" width="220" height="220">
        </div>

        <div class="col-lg-6 col-md-6 col-12">
            <h2>What is COVID-19 (Corona-Virus)</h2>
            <p>Covid-19 is the infections disease caused by the most recently discovered coronavirus.
                This new virus and disease were unknown before the outbreak began in Wuhan, China in December 2019.
                Take care of yourself along with your suroundings.
            </p>
            <p>Coronaviruses are a large family of viruses that cause illness' in animals or humans. In humans,
                several coronaviruses are known to cause respiratory infections ranging from the common cold to 
                more severe diseases such as Middle East Respiratory Syndrome(MERS), Severe Acute Respiratory Syndrome (SARS), or the recently discovered Novel Coronavirus (COVID-19)
            </p>
        </div>
    </div>
</div>


<div class="container-fluid  pt-5 pb-5" id="sympid" >
    <div class="section_header text-center mb-5 mt-4">
        <h1>Coronavirus symptoms</h1>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-4 col-12 mt-5">
                <figure class="text-center">
                    <img src="/images/cough.png" class="img-fluid" alt="" width="120", height="120">
                    <figcaption>
                        Cough
                    </figcaption>
                </figure>
            </div>
            <div class="col-lg-4 col-4 col-12 mt-5">
                <figure class="text-center">
                    <img src="/images/flu.png" class="img-fluid" alt="" width="120", height="120">
                    <figcaption>
                        Cold
                    </figcaption>
                </figure>
            </div>
            <div class="col-lg-4 col-4 col-12 mt-5">
                <figure class="text-center">
                    <img src="/images/fever.png" class="img-fluid" alt="" width="120", height="120">
                    <figcaption>
                        Fever
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-4 col-12 mt-5">
                <figure class="text-center">
                    <img src="/images/tired.png" class="img-fluid" alt="" width="120", height="120">
                    <figcaption>
                        Tiredness
                    </figcaption>
                </figure>
            </div>
            <div class="col-lg-4 col-4 col-12 mt-5">
                <figure class="text-center">
                    <img src="/images/breathing.png" class="img-fluid" alt="" width="120", height="120">
                    <figcaption>
                        Difficulty breathing
                    </figcaption>
                </figure>
            </div>
            <div class="col-lg-4 col-4 col-12 mt-5">
                <figure class="text-center">
                    <img src="/images/nose.png" class="img-fluid" alt="" width="120", height="120">
                    <figcaption>
                        Runny nose
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
</div>


<div class="container-fluid sub_section pt-5 pb-5" id="preventid" >
    <div class="section_header text-center mb-5 mt-4">
        <h1>Coronavirus prevention</h1>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12 mt-5">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <figure class="text-center">
                            <img src="/images/water.png" class="img-fluid" alt="" width="90", height="90">
                        </figure>
                    </div>
                    <div class="col-lg-8 col-md 8 col-12">
                        <p>Wash your hands regulary for 20 seconds with soap and water or an alcohol based hand wash.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mt-5">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <figure class="text-center">
                            <img src="/images/distance.png" class="img-fluid" alt="" width="90", height="90">
                        </figure>
                    </div>
                    <div class="col-lg-8 col-md 8 col-12">
                        <p>Avoid close contact (1 meter or 3 feet ) with people who are unwell.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mt-5">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <figure class="text-center">
                            <img src="/images/pain.png" class="img-fluid" alt="" width="90", height="90">
                        </figure>
                    </div>
                    <div class="col-lg-8 col-md 8 col-12">
                        <p>Cover your nose and mouth with a disposable tissue or your inner elbow when you 
                            cough or sneeze.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>  
    
    <div class="container" id="contactid">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12 mt-5">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <figure class="text-center">
                            <img src="/images/chimney.png" class="img-fluid" alt="" width="90", height="90">
                        </figure>
                    </div>
                    <div class="col-lg-8 col-md 8 col-12">
                        <p>Stay home and self-isolate if you feel unwell.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mt-5">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <figure class="text-center">
                            <img src="/images/tv.png" class="img-fluid" alt="" width="90", height="90">
                        </figure>
                    </div>
                    <div class="col-lg-8 col-md 8 col-12">
                        <p>Stay informed by watching the news & follow the recommended practices.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mt-5">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <figure class="text-center">
                            <img src="/images/virus.png" class="img-fluid" alt="" width="90", height="90">
                        </figure>
                    </div>
                    <div class="col-lg-8 col-md 8 col-12">
                        <p>If you have fever, cough, or difficulty breathing seek medical care immediately.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>  
    
</div>

<!-- <div class="container-fluid pt-5 pb-5" id="about" >
    <div class="section_header text-center mb-5 mt-4">
        <h1>Coronavirus prevention</h1>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2 col-12">
            <form>
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" class="form-control" name='name' id="exampleFormControlInput1" placeholder="name"
                         autocomplete="off" required>
                </div>
                <div class="form-group">
                    <label>Email address</label>
                    <input type="email" class="form-control" id="exampleFormControlInput1" autocomplete="off"
                        placeholder="name@example.com" name="email" required>
                </div>
                <div class="form-group">
                    <label>Example textarea</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div> -->

<script src="/js/home.js"></script>

<%- include('../partial/footer') %>