From a043d4c7914b8b8c0448df14e9e668a274e28d2b Mon Sep 17 00:00:00 2001
From: Soam <somahalder171@gmail.com>
Date: Thu, 13 Jan 2022 10:42:01 +0530
Subject: [PATCH 1/4] Height is solved and animation is added

---
 index.css  |  3 +++
 index.html | 26 ++++++++++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/index.css b/index.css
index 0139534..13f6148 100644
--- a/index.css
+++ b/index.css
@@ -244,6 +244,9 @@ p {
   background: white;
   margin: 2%;
 }
+.img1{
+  padding:6%;
+}
 
 .about-col:hover {
   transform: scale(1.03, 1.03);
diff --git a/index.html b/index.html
index 774a0fc..9e7df31 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href='index.css'>
     <link rel="stylesheet" href='https://fontawesome.com/v4.7.0/icon/bars'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
 </head>
 <title>BLOOD BUDDY</title>
 
@@ -51,23 +53,23 @@ <h1 class="heading">What is this all about ?</h1> <br>
                 <p class="head-des" class="text">We solve the problem of blood emergencies by connecting <span
                         class="one-line"><br></span> blood donors directly with people in blood need. </p>
                 <div class="row">
-                    <div class="about-col">
-                        <div class="image">
+                    <div class="about-col" data-aos="fade-left">
+                        <div class="image img1">
                             <img src="./Images/drop.png">
                         </div>
                         <h3>What we do ?</h3>
                         <p>We connect blood donors with recipients, without any intermediary such as blood banks, for an
                             efficient and seamless process.</p>
                     </div>
-                    <div class="about-col">
-                        <div class="image">
+                    <div class="about-col"data-aos="fade-up">
+                        <div class="image img1">
                             <img src="./Images/innovation.png">
                         </div>
                         <h3>Innovative</h3>
                         <p>Bloood Buddy is an innovative approach to address global heath.We provide <span>immediate
                                 access</span> to blood donors.</p>
                     </div>
-                    <div class="about-col">
+                    <div class="about-col"data-aos="fade-right">
                         <div class="image">
                             <img src="./Images/netwotk.png">
                         </div>
@@ -75,7 +77,7 @@ <h3>Network</h3>
                         <p>Blood Buddy is one of several community organizations working together as a network that
                             responds to emergencies in an efficient manner.</p>
                     </div>
-                    <div class="about-col">
+                    <div class="about-col"data-aos="fade-down-left">
                         <div class="image">
                             <img src="./Images/noti.png">
                         </div>
@@ -83,7 +85,7 @@ <h3>Get notified</h3>
                         <p>Blood Buddy Connect works with network partners to connect blood donors and recipients
                             through an automated SMS service and a mobile app.</p>
                     </div>
-                    <div class="about-col">
+                    <div class="about-col"data-aos="fade-down-up">
                         <div class="image">
                             <img src="./Images/cost.png">
                         </div>
@@ -91,7 +93,7 @@ <h3>Totally Free</h3>
                         <p>Blood Budyy's ultimate goal is to provide an easy -to-use, easy-to-access, fast, efficient,
                             and reliable way to get life-saving blood, totally <span>Free of cost.</span></p>
                     </div>
-                    <div class="about-col">
+                    <div class="about-col"data-aos="fade-down-right">
                         <div class="image">
                             <img src="./Images/save.png">
                         </div>
@@ -286,6 +288,14 @@ <h3>JOIN OUR CAUSE</h3>
             headerl.style.right = "-210px";
         }
     </script>
+    </script>
+    <!--Animation on about us section-->
+      <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+       <script>
+         AOS.init({
+            duration:2000
+         });
+       </script>
   
     <!--js for scroll effects-->
     <script src="scroll.js"></script>

From 0142cfbe45f6bf87a0761d7b35d74a66e9dbb346 Mon Sep 17 00:00:00 2001
From: Soam <somahalder171@gmail.com>
Date: Thu, 13 Jan 2022 13:58:06 +0530
Subject: [PATCH 2/4] This page is now totally responsive including navigation
 bar

---
 help.css  | 88 ++++++++++++++++++++++---------------------------------
 help.html | 36 ++++++++++++++++-------
 2 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/help.css b/help.css
index 20c09d9..c8d6f07 100644
--- a/help.css
+++ b/help.css
@@ -15,54 +15,23 @@
 }
 
 header{
-    background-color: white;
-    color: white;
+    /*background-color: white;
+    color: white;*/
     height: 18%;
     width: 100%;
 	z-index: 10;
-	position: fixed;
+	/*position: fixed;*/
     font-weight: 100;
 }
-
-.header-logo{
-    font-size: 10px;
-    float: left;
-    padding-left: 30px;
-    padding-top: 0px;
-    padding-bottom: 12%;
-
-}
-
-.header-logo > img {
-    width: 70%;
-}
-
-.header-list ul li a {
-    text-decoration: none;
-    display: block;
-    text-decoration: none;
-    text-transform: uppercase;
-    color: black;
-    font-size: 20px;
-    font-family: 'Raleway', sans-serif;
-    letter-spacing: 2px;
-    font-weight: 600;
-    margin-bottom: 10px;
-    padding: 20px;
-    transition: all ease 0.5s;
-}
-
-.header-list ul li {
-    float: right;
-    padding-left: 30px;
-    padding-top: 30px;
-    list-style: none;
-    padding-right: 40px;
+.nav-item{
+    font-family: "Neuton", serif;
+    font-size:2em;
+    font-weight:bold;
+    padding-right:10px;
+    padding-left:20px;
 }
-
 header ul li a:hover{
-    background-color:rgba(220,20,60);
-    color: white;
+    border-bottom:2px solid tomato;
 }
 
 
@@ -73,7 +42,8 @@ header ul li a:hover{
 	display: flex;
 	justify-content: center;
 	align-items: center;
-    padding-top: 20%;
+    padding-top:4%;
+    padding-bottom:4%;
 }
 
 .container:after{
@@ -115,7 +85,7 @@ h2{
 	position: relative;
 	padding: 0 0 10px;
 	margin-bottom: 10px;
-    font-family: 'Advent Pro', sans-serif;
+    font-family: 'Neuton', sans-serif;
 }
 
 h2:after{
@@ -132,41 +102,53 @@ h2:after{
 
 .field{
 	width: 100%;
-	border: 2px solid rgba(0, 0, 0, 0);
+	/*border: 2px solid rgba(0, 0, 0, 0);*/
+    border-style:none;
 	outline: none;
-	background-color: rgba(230, 230, 230, 0.6);
+	/*background-color: rgba(230, 230, 230, 0.6);*/
+    border-bottom:2px solid tomato;
 	padding: 0.5rem 1rem;
 	font-size: 1.1rem;
 	margin-bottom: 22px;
+    font-family:"Neuton",serif;
 	transition: .3s;
 }
 
 .field:hover{
-	background-color: rgba(0, 0, 0, 0.1);
+	/*background-color: rgba(0, 0, 0, 0.1);*/
 }
 
 textarea{
-	min-height: 150px;
+	min-height:100px;
 }
 
-.btn{
-	width: 100%;
+main.container.btn{
+	/*width: 100%;
 	padding: 0.5rem 1rem;
-	background-color:#008B8B;
+	background-color:red;
 	color: #fff;
 	font-size: 1.1rem;
 	border: none;
 	outline: none;
 	cursor: pointer;
-	transition: .3s;
+	transition: .3s;*/
+}
+button.btn{
+    background-color:red;
+    color:white;
+    font-size: 1.1rem;
+    font-weight:bold;
+    font-family:"Neuton", serif;
+    font-size:1.4em;
 }
 
-.btn:hover{
+button.btn:hover{
     background-color: rgba(72,61,139);
+    color:white;
 }
 
 .field:focus{
-    border: 2px solid rgba(30,85,250,0.47);
+    /*border: 2px solid rgba(30,85,250,0.47);*/
     background-color: #fff;
 }
 
diff --git a/help.html b/help.html
index dd18d10..bf95a72 100644
--- a/help.html
+++ b/help.html
@@ -8,23 +8,38 @@
     <link rel="stylesheet" href='help.css'>
     <link rel="icon" href='./Images/bb_logo(black).png' type="image/png">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
 </head>
 <title>Connect with us </title>
 
 <body>
 
     <header>
-        <nav>
-            <div class="header-logo"><img src="./Images/bb_logo(black).png"></div>
-            <div class="header-list">
-                <ul>
-                    <li><a href="index.html">Get Help</a></li>
-                    <li><a href="index.html">Donate</a></li>
-                    <li><a href="index.html">Volunteer</a></li>
-                    <li><a href="index.html">About Us</a></li>
+        <nav class="navbar navbar-expand-lg navbar-light ">
+            <div class="container-fluid">
+              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+                <a class="navbar-brand" href="#"><img src="./Images/bb_logo(black).png" style="height:100px;"></a>
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ">
+                  <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="index.html">About Us</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link active" href="index.html">Volunteer</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link active" href="donate.html">Donate</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link active">Get Help</a>
+                  </li>
                 </ul>
+              </div>
             </div>
-        </nav>
+          </nav>
     </header>
 
 
@@ -69,7 +84,8 @@ <h3>JOIN OUR CAUSE</h3>
 
 
     </footer>
-    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+   
 
 </body>
 

From 08c45de7a60017a7146f9c8132aa40e3793fc3be Mon Sep 17 00:00:00 2001
From: Soam <somahalder171@gmail.com>
Date: Thu, 13 Jan 2022 17:26:27 +0530
Subject: [PATCH 3/4] Navigation design is chenged and it's responsive

---
 help.css  | 38 ++++++++++----------------------------
 help.html | 10 +++++-----
 2 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/help.css b/help.css
index c8d6f07..2d5d5ad 100644
--- a/help.css
+++ b/help.css
@@ -15,25 +15,25 @@
 }
 
 header{
-    /*background-color: white;
-    color: white;*/
     height: 18%;
     width: 100%;
 	z-index: 10;
-	/*position: fixed;*/
     font-weight: 100;
 }
 .nav-item{
-    font-family: "Neuton", serif;
-    font-size:2em;
+    font-family:'Raleway', sans-serif;
+    font-size:1.3em;
     font-weight:bold;
-    padding-right:10px;
-    padding-left:20px;
+    padding-right:50px;
+    padding-left:50px;
+    transition: all ease 0.5s;
 }
-header ul li a:hover{
-    border-bottom:2px solid tomato;
+.nav-item a{
+    padding:20px;
+}
+header ul li :hover{
+   background-color:rgb(220, 20, 60);
 }
-
 
 .container{
 	position: relative;
@@ -102,10 +102,8 @@ h2:after{
 
 .field{
 	width: 100%;
-	/*border: 2px solid rgba(0, 0, 0, 0);*/
     border-style:none;
 	outline: none;
-	/*background-color: rgba(230, 230, 230, 0.6);*/
     border-bottom:2px solid tomato;
 	padding: 0.5rem 1rem;
 	font-size: 1.1rem;
@@ -114,25 +112,10 @@ h2:after{
 	transition: .3s;
 }
 
-.field:hover{
-	/*background-color: rgba(0, 0, 0, 0.1);*/
-}
-
 textarea{
 	min-height:100px;
 }
 
-main.container.btn{
-	/*width: 100%;
-	padding: 0.5rem 1rem;
-	background-color:red;
-	color: #fff;
-	font-size: 1.1rem;
-	border: none;
-	outline: none;
-	cursor: pointer;
-	transition: .3s;*/
-}
 button.btn{
     background-color:red;
     color:white;
@@ -148,7 +131,6 @@ button.btn:hover{
 }
 
 .field:focus{
-    /*border: 2px solid rgba(30,85,250,0.47);*/
     background-color: #fff;
 }
 
diff --git a/help.html b/help.html
index bf95a72..a7d7679 100644
--- a/help.html
+++ b/help.html
@@ -22,19 +22,19 @@
                 <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
-                <a class="navbar-brand" href="#"><img src="./Images/bb_logo(black).png" style="height:100px;"></a>
+                <a class="navbar-brand" href="#"><img src="./Images/bb_logo(black).png" style="height:110px;"></a>
                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0 ">
                   <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="index.html">About Us</a>
+                    <a class="nav-link active" aria-current="page" href="index.html">ABOUT  US</a>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link active" href="index.html">Volunteer</a>
+                    <a class="nav-link active" href="index.html">VOLUNTEER</a>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link active" href="donate.html">Donate</a>
+                    <a class="nav-link active" href="donate.html">DONATE</a>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link active">Get Help</a>
+                    <a class="nav-link active">GET  HELP</a>
                   </li>
                 </ul>
               </div>

From 795d63ccbb8196a9a7a1d2186dba067acc0c0abd Mon Sep 17 00:00:00 2001
From: Soam <somahalder171@gmail.com>
Date: Thu, 13 Jan 2022 18:15:41 +0530
Subject: [PATCH 4/4] Font size is issue is fixed

---
 help.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/help.css b/help.css
index 2d5d5ad..97065da 100644
--- a/help.css
+++ b/help.css
@@ -22,7 +22,7 @@ header{
 }
 .nav-item{
     font-family:'Raleway', sans-serif;
-    font-size:1.3em;
+    font-size:120%;
     font-weight:bold;
     padding-right:50px;
     padding-left:50px;