UdacityFrontEndScholarship · codestryker · May 31, 2018 · May 31, 2018 · May 31, 2018 · May 31, 2018
diff --git a/public/about.html b/public/about.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<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">
+
+  <title>About</title>
+
+  <!-- Shortcut Icons -->
+  <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">
+  <link rel="apple-touch-icon" type="image/x-icon" href="assets/images/favicon.png">
+
+  <!-- SEO tags -->
+  <meta name="description" content="The Official website of JeevanRakht">
+  <meta name="keywords" content="JeevanRakht, Blood Dontation, Blood Bank, Google Udacity Project JeevanRakht">
+
+  <!--GOOGLE FONT-->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700|Spectral:400,400i,700,700i" rel="stylesheet">
+
+  <!-- jQuery file -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+  <!-- Font Awesome -->
+  <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" />
+
+  <link rel="stylesheet" type="text/css" href="assets/css/main.css" />
+
+</head>
+
+<body>
+  <section class="section">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand d-lg-none" href="/index.html">Jeevan Rakht</a>
+        <button class="navbar-toggler mt-2 mr-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mx-auto">
+              <li><a href="about.html" >About</a></li>
+              <li><a href="why_donate.html">Why donate?</a></li>
+              <li><a href="eligibility.html">Eligibility</a></li>
+              <li class="brand d-none d-lg-block"><a><img src="/assets/images/logo.png" alt=""></a></li>
+              <li><a href="how_to_donate.html">How to donate?</a></li>     
+              <li><a href="faqinfo.html">FAQ&amp;Info</a></li>
+              <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </div>
+    </nav>
+    <section>
+    <header class="header">About</header>
+    <div class="subhead">
+        JeevanRakht is a Virtual Blood Bank web application, which aims at providing mechanism for people in need to directly contact willing donors<br/>
+        and find out blood availability in nearby blood banks.
+    <br/>
+        On this platform, people who are willing to donate blood can sign up with details of their blood groups location. Besides, there will be accounts of <br/>
+        blood banks with details like blood availability, blood group and location of blood bank to filter out nearest blood banks which best fits.
+        <div class="icon">
+            <br/>
+            <img src="assets/images/favicon.png" alt="icon" height="100px" width="100px" >
+            <br/>
+        </div> 
+    </div> 
+     </section> 
+    <section class="section"> 
+    <!-- FOOTER Section -->
+    <footer class="mainfooter">
+        <div class="container py-5">
+          <div class="row text-center">
+
+            <div class="col-xs-6 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <h5>JeevanRakht</h5>
+
+                  <ul class="list-unstyled">
+                      <li><a href="about.html">About</a></li>
+                      <li><a href="why_donate.html">Why Donate</a></li>
+                      <li><a href="eligibility.html">Eligibility</a></li>
+                      <li><a href="how_to_donate.html">How to Donate</a></li>
+                      <li><a href="faqinfo.html">FAQ&amp;Info.</a></li>
+                      <li><a href="contact.html">Contact</a></li>
+                  </ul>
+
+              </div>
+            </div>
+
+            <div class="col-xs-6 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <h5>Get Involved</h5>
+                <ul class="list-unstyled">
+                  <li><a href="https://jeevanrakht.herokuapp.com/donate">Donate Blood</a></li>
+                  <li><a href="https://jeevanrakht.herokuapp.com/locate">Locate Blood</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <h5>Stay Connected</h5>
+                <ul class="list-unstyled">
+                  <li>
+                    <a href="https://www.facebook.com/jeevanrakht"><i class="p-1 fab fa-facebook-f"></i></a>
+                    <a href="https://www.twitter.com/jeevanrakht"><i class="p-1 fab fa-twitter"></i></a>
+                    <a href="https://www.instagram.com/jeevanrakht"><i class="p-1 fab fa-instagram"></i></a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <div class="footer-subscribe">
+                  <h5>YOU MAY NOT THINK YOU'RE AN ACTIVIST...<br>BUT WE DO</h5>
+                  <br><br>
+                  <div class="email-btn-wrapper">
+                    <input type="email" class="footer-email" placeholder="Email ID">
+                    <button class="btn-join">JOIN</button>
+                    <br>
+                    <br>
+                    <input type="checkbox" class="m-1">
+                    <p class="d-inline p-1">Yes, I'd also like to hear more about blood donation.</p>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+
+          </div>
+        </div>
+        <div class="after-footer pr-5 pl-5 py-3 justify-content-sm-center text-right">
+          <a href="#" class="m-2">Privacy Policy</a>
+          <a href="#" class="m-2">Terms of Service</a>
+        </div>
+      </footer>
+      </section>  
+
+      <!--Script Links-->
+
+      <script src="/assets/js/main.js"></script>
+      <script>
+        $('.slider').slick({
+          dots: true,
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          infinite: true,
+        });
+      </script>
+    </body>
+</html>
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
@@ -3,6 +3,35 @@ body {
     background-color: #232323;
 }
 
+.header
+{
+padding: 0;
+overflow-x:scroll visible;
+background-color:white;
+text-align: center;
+font-size: 35px;
+font-weight: bolder;
+color: rgb(97, 6, 6);
+font-family: 'Montserrat:400,500,700','Spectral:400,500,700';
+}
+.subhead{
+    font-family: 'Montserrat:400,500,700','Spectral:400,500,700';
+    font-size:20px;
+    background: white;
+    overflow-x: auto; 
+    overflow-y:auto;   
+    scrollbar-base-color:#ffeaff;
+    padding-left: 45px;
+    padding-right: 10px;
+    padding-bottom:10px;
+    padding-top:10px;
+}
+
+.icon
+{
+    float: right;
+    padding: 5px;
+}
 .container-fluid{
     padding: 0;
 }
@@ -772,4 +801,4 @@ footer .after-footer a:hover {
 .slick-dots li.slick-active button:before {
     opacity: 0;
     color: black;
-}
+}
diff --git a/public/contact.html b/public/contact.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<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">
+
+  <title>About</title>
+
+  <!-- Shortcut Icons -->
+  <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">
+  <link rel="apple-touch-icon" type="image/x-icon" href="assets/images/favicon.png">
+
+  <!-- SEO tags -->
+  <meta name="description" content="The Official website of JeevanRakht">
+  <meta name="keywords" content="JeevanRakht, Blood Dontation, Blood Bank, Google Udacity Project JeevanRakht">
+
+  <!--GOOGLE FONT-->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700|Spectral:400,400i,700,700i" rel="stylesheet">
+
+  <!-- jQuery file -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+  <!-- Font Awesome -->
+  <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" />
+
+  <link rel="stylesheet" type="text/css" href="assets/css/main.css" />
+
+</head>
+
+<body>
+  <section class="section">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand d-lg-none" href="/index.html">Jeevan Rakht</a>
+        <button class="navbar-toggler mt-2 mr-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mx-auto">
+              <li><a href="about.html" >About</a></li>
+              <li><a href="why_donate.html">Why donate?</a></li>
+              <li><a href="eligibility.html">Eligibility</a></li>
+              <li class="brand d-none d-lg-block"><a><img src="/assets/images/logo.png" alt=""></a></li>
+              <li><a href="how_to_donate.html">How to donate?</a></li>     
+              <li><a href="faqinfo.html">FAQ&amp;Info</a></li>
+              <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </div>
+    </nav>
+    <section>
+    <header class="header">About</header>
+    <div class="subhead">
+        JeevanRakht is a Virtual Blood Bank web application, which aims at providing mechanism for people in need to directly contact willing donors<br/>
+        and find out blood availability in nearby blood banks.
+    <br/>
+        On this platform, people who are willing to donate blood can sign up with details of their blood groups location. Besides, there will be accounts of <br/>
+        blood banks with details like blood availability, blood group and location of blood bank to filter out nearest blood banks which best fits.
+        <div class="icon">
+            <br/>
+            <img src="assets/images/favicon.png" alt="icon" height="100px" width="100px" >
+            <br/>
+        </div> 
+    </div> 
+     </section> 
+    <section class="section"> 
+    <!-- FOOTER Section -->
+    <footer class="mainfooter">
+        <div class="container py-5">
+          <div class="row text-center">
+
+            <div class="col-xs-6 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <h5>JeevanRakht</h5>
+
+                  <ul class="list-unstyled">
+                      <li><a href="about.html">About</a></li>
+                      <li><a href="why_donate.html">Why Donate</a></li>
+                      <li><a href="eligibility.html">Eligibility</a></li>
+                      <li><a href="how_to_donate.html">How to Donate</a></li>
+                      <li><a href="faqinfo.html">FAQ&amp;Info.</a></li>
+                      <li><a href="contact.html">Contact</a></li>
+                  </ul>
+
+              </div>
+            </div>
+
+            <div class="col-xs-6 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <h5>Get Involved</h5>
+                <ul class="list-unstyled">
+                  <li><a href="https://jeevanrakht.herokuapp.com/donate">Donate Blood</a></li>
+                  <li><a href="https://jeevanrakht.herokuapp.com/locate">Locate Blood</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <h5>Stay Connected</h5>
+                <ul class="list-unstyled">
+                  <li>
+                    <a href="https://www.facebook.com/jeevanrakht"><i class="p-1 fab fa-facebook-f"></i></a>
+                    <a href="https://www.twitter.com/jeevanrakht"><i class="p-1 fab fa-twitter"></i></a>
+                    <a href="https://www.instagram.com/jeevanrakht"><i class="p-1 fab fa-instagram"></i></a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
+
+              <!--Column1-->
+              <div class="footer-pad">
+                <div class="footer-subscribe">
+                  <h5>YOU MAY NOT THINK YOU'RE AN ACTIVIST...<br>BUT WE DO</h5>
+                  <br><br>
+                  <div class="email-btn-wrapper">
+                    <input type="email" class="footer-email" placeholder="Email ID">
+                    <button class="btn-join">JOIN</button>
+                    <br>
+                    <br>
+                    <input type="checkbox" class="m-1">
+                    <p class="d-inline p-1">Yes, I'd also like to hear more about blood donation.</p>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+
+          </div>
+        </div>
+        <div class="after-footer pr-5 pl-5 py-3 justify-content-sm-center text-right">
+          <a href="#" class="m-2">Privacy Policy</a>
+          <a href="#" class="m-2">Terms of Service</a>
+        </div>
+      </footer>
+      </section>  
+
+      <!--Script Links-->
+
+      <script src="/assets/js/main.js"></script>
+      <script>
+        $('.slider').slick({
+          dots: true,
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          infinite: true,
+        });
+      </script>
+    </body>
+</html>