dhamni.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Dhamni</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Dhamni.css">
<link rel="stylesheet" href="dhamniFonts.css">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
</head>
<body>

<!-- Edited By Arjun -->
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
  <div class="w3-container">
    <h3 class="w3-padding-64" ><b>Dhamni</b></h>
  </div>
  <div class="w3-bar-block">
    <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a> 
    <a href="#Blood Donation" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Blood Donation</a> 
    <a href="#services" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Services</a> 
    <a href="#About" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">About us</a>
    <a href="#Contact" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Contact</a>
  </div>
</nav>

<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
  <a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
  <span>Dhamni</span>
</header>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">

  <!-- Header -->
  <div class="w3-container" style="margin-top:80px" id="showcase">
    
    
    <!-- edited the header and the text part of home -->
    <h1 class="w3-jumbo"><b>Blood is Life</b></h1>
    
        <ul class="images" >
            <li><img src="images/image1.jpg" alt="thumb 1"></li>
            <li><img src="images/images.jpg" alt="thumb 2"></li><br>
        </ul>
        <article>
            <p>
                A blood donation occurs when a person voluntarily has blood drawn and used for transfusions and/or made into biopharmaceutical medications by a process called fractionation (separation of whole blood components). Donation may be of whole blood, or of specific components directly (apheresis). Blood banks often participate in the collection process as well as the procedures that follow it.
                Today in the developed world, most blood donors are unpaid volunteers who donate blood for a community supply. In some countries, established supplies are limited and donors usually give blood when family or friends need a transfusion (directed donation). Many donors donate for several reasons, such as a form of charity, general awareness regarding the demand for blood, increased confidence in oneself, helping a personal friend or relative, and social pressure. Despite the many reasons that people donate, not enough potential donors actively donate. However, this is reversed during disasters when blood donations increase, often creating an excess supply that will have to be later discarded. In countries that allow paid donation some people are paid, and in some cases there are incentives other than money such as paid time off from work. People can also have blood drawn for their own future use (autologous donation). Donating is relatively safe, but some donors have bruising where the needle is inserted or may feel faint.
            </p>    
            </article>
  <!-- Edited By Arjun -->
  <!-- Photo grid (modal) -->
  <!-- Header -->
  <div class="w3-container" style="margin-top:80px" id="Blood Donation">
    <h1 class="w3-xxxlarge w3-text-red"><b>Blood Donation.</b></h1>
    <p class="worst_para" >A SAFER, MORE PLENTIFUL SUPPLY
Every day in the world’s poorest countries, people die because of a shortage of blood. GBF helps blood collectors in these countries by providing money, equipment, training and other forms of support – including launching voluntary blood donation programs.
    </p>
    </div>
    <div class="w3-row-padding">
    <div class="w3-half">
      <img src="https://4.bp.blogspot.com/-39iMQIm_5QE/T3RWfw5TAQI/AAAAAAAAAFQ/KX0AwXQDUTg/s1600/Picture3.png" style="min-width:100%" onclick="onClick(this)" alt="Concrete meets bricks">
    </div>

  </div>
  <!-- Modal for full size images on click-->
  <div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
    <span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
    <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
      <img id="img01" class="w3-image">
      <p id="caption"></p>
    </div>
  </div>

  <!-- Services -->
  <div class="w3-container" id="services" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Services.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <p>Dhamni is a blood bank chain which offers to catter the blood requirements in remote areas. We are offering services to supply blood to the needy recipients and to collect blood from the donors at the comfort of their homes. Dhamni is providing services in the remote areas as well as the areas with a lack of blood supply.<br>
    India has the world's largest shortage of blood, with all states together battling a huge shortfall of 41 million units and demand outstripping supply by over 400%, says the first of its kind study published in the journal The Lancet. And demand is rising, says the findings. The overall global shortfall is 100 million units.</p>

        <ul>
            <li><h2><a href="http://localhost/bank/index_donor.php" target = "_blank">Be a Donor.</a></h2></li>
            <li><h2><a href="http://localhost/bank/index_recipient.php" target = "_blank">Need blood.</a></h2></li>
            <li><h2><a href="http://localhost/bank/index_bank.php" target = "_blank">Register as a Blood Bank.</a></h2></li>
        </ul>
    
  </div>

  <!-- About us -->
  <div class="w3-container" id="About" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>About us.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <p>India has the world's largest shortage of blood, with all states
        together battling a huge shortfall of 41 million units and demand
        outstripping supply by over 400%, says the first of its kind study
        published in the journal The Lancet. And demand is rising, says the
        findings. Every day 12,000 people in India die due to the sheer lack
        of donated blood. India collects 11 million units of blood but needs
        15 million units, so there’s a deficit of 4 million units. Over 40
        districts in India don’t have a single blood bank. One reason of this
        blood shortage might be the lack of responsible attitude from
        capable donors which comes due to the time taking procedure and
        risks of careless handling by the hospital staff.<br>
        The solution to this problem is “Dhamni”. Dhamni which means the
        artery- Blood vessel which carries blood from heart to the body
        parts. Just as the name suggests Dhamni will supply blood from the
        heart- the donors to the needed. Dhamni is a blood bank chain which
        will provide blood collection facilities at your doorstep. The blood
        will be collected from the potential donor at the comfort of their
        home and will be supplied on the basis of priority.
    </p>

    </div>

  
  
  <!-- Contact -->
  <div class="w3-container" id="Contact" style="margin-top:75px">
    <h1 class="w3-xxxlarge w3-text-red"><b>Contact.</b></h1>
    <hr style="width:50px;border:5px solid red" class="w3-round">
    <p>Contact us for any queries.</p>
    <form action="action_page.php" target="_blank">
      <div class="w3-section">
        <label>Name</label>
        <input class="w3-input w3-border" type="text" name="Name" required>
      </div>
      <div class="w3-section">
        <label>Email</label>
        <input class="w3-input w3-border" type="text" name="Email" required>
      </div>
      <div class="w3-section">
        <label>Message</label>
        <input class="w3-input w3-border" type="text" name="Message" required>
      </div>
      <button type="submit" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom">Send Message</button>
    </form>  
  </div>

<!-- End page content -->
</div>

<!-- W3.CSS Container -->
<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">A team effort of team >JIGYASA</p></div>

<script>
// Script to open and close sidebar
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}
 
function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}

// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}
</script>

</body>
</html>