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;