From 4c857cb20baeb6496505a9a922d543d4adfa7231 Mon Sep 17 00:00:00 2001 From: Yash Verma <114978813+Rajput-xv@users.noreply.github.com> Date: Mon, 10 Jun 2024 17:39:57 +0530 Subject: [PATCH 1/4] Add Navbar & footer to blood.html --- Css-Files/bloodstyle.css | 339 ++++++++++++++++++++++++++++++++++++++- Html-Files/blood.html | 114 +++++++++++-- style.css | 5 +- 3 files changed, 436 insertions(+), 22 deletions(-) diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css index 98ec3a2a..f4f26ab1 100644 --- a/Css-Files/bloodstyle.css +++ b/Css-Files/bloodstyle.css @@ -241,10 +241,10 @@ gap: 15px opacity: 0.75; transition: 0.5s; } -container .drop .content a:hover{ +.container .drop .content a:hover{ opacity: 1; } -container .drop .content a::before{ +.container .drop .content a::before{ content: ''; position: absolute; width: 65%; @@ -266,4 +266,337 @@ container .drop .content a::before{ font-size: 28px; line-height: 36px; } -} \ No newline at end of file +} +.ltr{ + color: black !important; +} + + a { + color: #55a5ea; + text-decoration: none; + } + + a:hover { + color: #55a5ea; + text-decoration: none; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: "Raleway", sans-serif; + } + + .nav_link li { + padding: 5px 20px; + display: inline-block; + color: white; + } + + .nav_link li a { + transition: all 0.3s ease 0s; + color: white; + } + button { + position: relative; + border-radius: 10px; + border: 1px solid #4bb6b7; + background-color: #4bb6b7; + color: #fff; + font-size: 15px; + font-weight: 700; + margin: 8px; + padding: 8px 50px; + letter-spacing: 1px; + text-transform: capitalize; + transition: 0.3s ease-in-out; + } + + .nav_link li a:hover { + color: #55a5ea; + + /* text-decoration: underline 2.5px rgb(3, 3, 94); */ + } + + .header_container { + /* background-color: #d9d9d9; */ + background-color: #022a2d; + opacity: 0.9; + display: flex; + flex-direction: row; + /* justify-content: space-evenly; */ + justify-content: space-between; + align-items: center; + height: 60px; + margin: auto; + width: 100%; + } + + #footer { + background: #000; + padding: 0 0 20px 0; + color: #fff; + font-size: 14px; + width: 100%; + padding: 50px; + } + + #footer .footer-top { + background: #000; + padding: 20px 0 20px 0; + } + + #footer .footer-top .footer-info { + margin-bottom: 20px; + } + + #footer .footer-top .footer-info h3 { + font-size: 50px; + margin: 0 0 20px 0; + color: #57a6ea; + padding: 2px 0 2px 0; + line-height: 1; + } + + #footer .footer-top .footer-info p { + font-size: 14px; + line-height: 24px; + margin-bottom: 0; + font-family: "Roboto", sans-serif; + } + + #footer .footer-top .social-links a { + font-size: 18px; + display: inline-block; + background: #57a6ea; + color: #fff; + line-height: 1; + padding: 8px 0; + margin-right: 4px; + border-radius: 4px; + text-align: center; + width: 36px; + height: 36px; + transition: 0.3s; + } + .footer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 100%; + width: 95%; + background: #3fbcc051; + border-radius: 6px; + } + + .row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 5rem; + padding: 20px; + } + + .row h4 { + color: #f0f0f0; + font-size: 1.2rem; + font-weight: 400; + } + + footer .links { + margin-top: 20px; + } + + footer .links li { + list-style: none; + margin-bottom: 10px; + } + + .footer-col .links li a { + text-decoration: none; + color: #bfbfbf; + } + + .footer-col .links li a:hover { + color: #fff; + } + + .footer-col p { + margin: 20px 0; + color: #bfbfbf; + max-width: 300px; + } + + .footer-col form { + display: flex; + gap: 5px; + } + + .footer-col input { + height: 40px; + border-radius: 6px; + background: none; + width: 100%; + outline: none; + border: 1px solid #7489c6; + caret-color: #fff; + color: #fff; + padding-left: 10px; + } + + .footer-col input::placeholder { + color: #ccc; + } + + .footer-col form button { + background: #fff; + border: none; + color: #08434551; + padding: 10px 15px; + border-radius: 6px; + cursor: pointer; + font-weight: 1000; + transition: 0.2s ease; + } + + .footer-col form button:hover { + background: #cecccc; + } + /* + .icons { + display: flex; + margin-top: 30px; + gap: 30px; + cursor: pointer; + } + + .icons i { + color: #afb6c7; + } + + .icons i:hover { + color: #fff; + } + */ + @media (max-width: 768px) { + .footer { + position: relative; + bottom: 0; + left: 0; + transform: none; + width: 100%; + border-radius: 0; + } + + .footer .footer-row { + padding: 20px; + gap: 1rem; + } + + .footer-col form { + display: block; + } + + .footer-col form :where(input, button) { + width: 100%; + } + + .footer-col form button { + margin: 10px 0 0 0; + } + } + + #footer .footer-top .social-links a:hover { + background: #57a6ea; + text-decoration: none; + } + + #footer .footer-top h4 { + font-size: 16px; + font-weight: 600; + position: relative; + padding-bottom: 12px; + } + + #footer .footer-top .footer-links { + margin-bottom: 30px; + } + + #footer .footer-top .footer-links ul { + list-style: none; + padding: 0; + margin: 0; + } + + #footer .footer-top .footer-links ul i { + padding-right: 2px; + color: #57a6ea; + font-size: 18px; + line-height: 1; + } + + #footer .footer-top .footer-links ul li { + padding: 10px 0; + display: flex; + align-items: center; + } + + #footer .footer-top .footer-links ul li:first-child { + padding-top: 0; + } + + #footer .footer-top .footer-links ul a { + color: #fff; + transition: 0.3s; + display: inline-block; + line-height: 1; + } + + #footer .footer-top .footer-links ul a:hover { + color: #57a6ea; + } + + #footer .footer-top .footer-newsletter form { + margin-top: 30px; + background: #fff; + padding: 6px 10px; + position: relative; + border-radius: 4px; + } + + #footer .footer-top .footer-newsletter form input[type="email"] { + border: 0; + padding: 4px; + width: calc(100% - 110px); + } + + #footer .footer-top .footer-newsletter form input[type="submit"] { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + background: none; + font-size: 16px; + padding: 0 20px; + background: #57a6ea; + color: #fff; + transition: 0.3s; + border-radius: 0 4px 4px 0; + } + + #footer .footer-top .footer-newsletter form input[type="submit"]:hover { + background: #57a6ea; + } + + .copyright { + display: flex; + justify-content: center; + padding-top: 10px; + } + .copyright strong{ + margin-left: 5px; + } \ No newline at end of file diff --git a/Html-Files/blood.html b/Html-Files/blood.html index bb82c507..21398675 100644 --- a/Html-Files/blood.html +++ b/Html-Files/blood.html @@ -10,29 +10,44 @@ - - + + + + + + + Blood Bank + -
- -
-
- rapidoc@mail.com -
- -
+
+
+
+ +
+ + +
@@ -107,6 +122,66 @@

AB-

+ + + @@ -114,5 +189,10 @@

AB-

+ + + + + \ No newline at end of file diff --git a/style.css b/style.css index 7b35fbf7..843aded0 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ +styles.css body { font-family: "Open Sans", sans-serif; color: #fff; @@ -5,7 +6,7 @@ body { } a { - color: #ffffff; + color: #55a5ea; text-decoration: none; } @@ -2124,4 +2125,4 @@ footer { text-align: center; padding: 1rem 0.5rem 2rem 0.5rem; } -} \ No newline at end of file +}}}} \ No newline at end of file From e3de64d974fbd85deb59ff06c0004db66fc87342 Mon Sep 17 00:00:00 2001 From: Yash Verma <114978813+Rajput-xv@users.noreply.github.com> Date: Thu, 13 Jun 2024 12:51:14 +0530 Subject: [PATCH 2/4] Update blood.html page --- Css-Files/bloodstyle.css | 1 + Html-Files/blood.html | 20 +++++++++++--------- index.html | 2 +- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css index f4f26ab1..86b379f4 100644 --- a/Css-Files/bloodstyle.css +++ b/Css-Files/bloodstyle.css @@ -228,6 +228,7 @@ gap: 15px align-items: center; font-size: 2em; color: var(--clr); + padding-left: 1em; } .container .drop .content a{ position: relative; diff --git a/Html-Files/blood.html b/Html-Files/blood.html index 21398675..11ae61bc 100644 --- a/Html-Files/blood.html +++ b/Html-Files/blood.html @@ -29,21 +29,23 @@
- + + +
diff --git a/index.html b/index.html index 2a100453..a390cd0d 100644 --- a/index.html +++ b/index.html @@ -550,7 +550,7 @@

Daily Feed

-

Blood Bank

+

Blood Bank

Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.Find the nearest blood donation centers, check blood availability, and get information on how to donate or request blood in urgent situations.

From 77a121f322187dfe22f65199cef2f984a4cdcbc0 Mon Sep 17 00:00:00 2001 From: Yash Verma <114978813+Rajput-xv@users.noreply.github.com> Date: Thu, 13 Jun 2024 21:41:21 +0530 Subject: [PATCH 3/4] Update Color issue & other changes --- Css-Files/bloodstyle.css | 3 ++- Html-Files/blood.html | 2 +- style.css | 9 ++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css index 86b379f4..6a6eb1ed 100644 --- a/Css-Files/bloodstyle.css +++ b/Css-Files/bloodstyle.css @@ -210,7 +210,8 @@ justify-content: center; align-items: center; flex-direction: column; text-align: center; -gap: 15px +gap: 15px; +padding-top: 3rem; } .container .drop .content h2{ diff --git a/Html-Files/blood.html b/Html-Files/blood.html index 11ae61bc..0830e1cf 100644 --- a/Html-Files/blood.html +++ b/Html-Files/blood.html @@ -2,6 +2,7 @@ + @@ -10,7 +11,6 @@ - Date: Fri, 14 Jun 2024 15:37:44 +0530 Subject: [PATCH 4/4] color changes in footer addition of back to top function in blood.html --- Css-Files/bloodstyle.css | 383 +++++++++++++++++++++++---------------- Html-Files/blood.html | 179 ++++++++++++++---- 2 files changed, 368 insertions(+), 194 deletions(-) diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css index 6a6eb1ed..dc998bba 100644 --- a/Css-Files/bloodstyle.css +++ b/Css-Files/bloodstyle.css @@ -276,6 +276,7 @@ padding-top: 3rem; a { color: #55a5ea; text-decoration: none; + cursor: pointer; } a:hover { @@ -293,7 +294,7 @@ padding-top: 3rem; } .nav_link li { - padding: 5px 20px; + padding: 5px 10px; display: inline-block; color: white; } @@ -315,6 +316,7 @@ padding-top: 3rem; letter-spacing: 1px; text-transform: capitalize; transition: 0.3s ease-in-out; + cursor: pointer; } .nav_link li a:hover { @@ -325,18 +327,77 @@ padding-top: 3rem; .header_container { /* background-color: #d9d9d9; */ - background-color: #022a2d; + background-color: #022a2d ; opacity: 0.9; display: flex; flex-direction: row; /* justify-content: space-evenly; */ justify-content: space-between; align-items: center; - height: 60px; + height: 70px; margin: auto; width: 100%; } + :root { + --text-color: #959DA5; + --footer-bg: #022a2d; + --footer-bottom-bg: #3fbcc051s; + --white: white; + --link-color: #959DA5; + --link-hover: #2F81CF; + --button-border: #848D97; + } + footer { + position: relative; + padding: 50px 0; + } + + #back-to-top-container { + position: fixed; + bottom: 25px; + right: 30px; + cursor: pointer; + z-index: 1000; + } + + .circle { + background-color: #00093d; + border-radius: 50%; + width: 35px; + height: 35px; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.3s; + } + + #back-to-top { + width: 40px; + height: 40px; + fill: #4178c0; + color: #00093d; + transition: fill 0.3s; + } + + #back-to-top:hover { + fill: hsl(214, 50%, 60%); + } + + .back-to-top:hover { + background: #3fbcc0cd; + color: #fff; + } + + .back-to-top.active { + visibility: visible; + opacity: 1; + } + + .subscribebtn:hover { + border: 3px solid var(--white); + background-color: var(--footer-bg); + } #footer { background: #000; padding: 0 0 20px 0; @@ -384,221 +445,223 @@ padding-top: 3rem; height: 36px; transition: 0.3s; } - .footer { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 100%; - width: 95%; - background: #3fbcc051; - border-radius: 6px; + footer { + bottom: 0; + background-color: #03393d; + width: 100%; + min-width: 20re; + bottom: 0; + display: flex; + align-items: center; + flex-direction: column; } - .row { + + .footer-wrapper { display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 5rem; - padding: 20px; + flex-direction: column; + max-width: 80rem; + width: 100%; + margin: 0 auto; + padding: 1rem; } - .row h4 { - color: #f0f0f0; - font-size: 1.2rem; - font-weight: 400; + .footer-logo-columns { + list-style-type: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-grow: 4; + gap: 3rem 1rem; } - footer .links { - margin-top: 20px; + .footer-logo { + margin-bottom: 2rem; + width: 3rem; } - footer .links li { - list-style: none; - margin-bottom: 10px; + .footer-logo-column { + display: flex; + grid-area: footer-logo; + flex-direction: column; + min-width: 16rem; + flex-grow: 1; + padding-right: 0.5rem; } - .footer-col .links li a { - text-decoration: none; - color: #bfbfbf; + .footer-logo-column p { + color: var(--text-color); + font-size: 0.95rem; + margin-bottom: 1.5rem; } - .footer-col .links li a:hover { - color: #fff; + .footer-logo-column h3 { + color: var(--white); + margin-top: 0.25rem; + margin-bottom: 0.25rem; } - .footer-col p { - margin: 20px 0; - color: #bfbfbf; - max-width: 300px; + /* other columns */ + + .other-columns { + display: inline-grid; + grid-template-columns: repeat(2, 1fr); + width: 100%; + gap: 2rem 1rem; + padding-top: 2rem; } - .footer-col form { + .other-columns ul { display: flex; - gap: 5px; + gap: 0.75rem; + list-style-type: none; + padding: 0; + margin: 0; + flex-direction: column; + font-weight: 600; } - .footer-col input { - height: 40px; - border-radius: 6px; - background: none; - width: 100%; - outline: none; - border: 1px solid #7489c6; - caret-color: #fff; - color: #fff; - padding-left: 10px; + .other-columns ul a { + color: var(--text-color); + text-decoration: none; + font-size: 0.85rem; } - .footer-col input::placeholder { - color: #ccc; + .other-columns ul a:hover { + text-decoration: underline; } - .footer-col form button { - background: #fff; - border: none; - color: #08434551; - padding: 10px 15px; - border-radius: 6px; - cursor: pointer; - font-weight: 1000; - transition: 0.2s ease; + .other-columns h3 { + color: var(--link-color); + margin-bottom: 1rem; + font-size: 1rem; + font-family: ui-monospace, monospace; } - .footer-col form button:hover { - background: #cecccc; - } - /* - .icons { - display: flex; - margin-top: 30px; - gap: 30px; - cursor: pointer; + .footer-logo svg { + fill: var(--white); } - .icons i { - color: #afb6c7; + /*? Footer bottom */ + .footer-bottom { + width: 100%; + color: var(--text-color); + background-color: var(--footer-bottom-bg); } - .icons i:hover { - color: #fff; + .footer-bottom-wrapper { + display: flex; + max-width: 80rem; + margin: 0 auto; + gap: 1rem; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + align-content: center; + padding: 1rem; } - */ - @media (max-width: 768px) { - .footer { - position: relative; - bottom: 0; - left: 0; - transform: none; - width: 100%; - border-radius: 0; - } - - .footer .footer-row { - padding: 20px; - gap: 1rem; - } - - .footer-col form { - display: block; - } - - .footer-col form :where(input, button) { - width: 100%; - } - .footer-col form button { - margin: 10px 0 0 0; - } + .footer-bottom small { + font-size: 1rem; + display: inline; + white-space: nowrap; } - #footer .footer-top .social-links a:hover { - background: #57a6ea; - text-decoration: none; + .footer-bottom-links { + list-style-type: none; + display: inline-flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; } - #footer .footer-top h4 { - font-size: 16px; - font-weight: 600; - position: relative; - padding-bottom: 12px; + .footer-bottom-links a { + color: var(--link-color); + text-decoration: none; + white-space: nowrap; } - #footer .footer-top .footer-links { - margin-bottom: 30px; + .footer-bottom-links a:hover { + color: var(--link-hover); + text-decoration: underline; } - #footer .footer-top .footer-links ul { - list-style: none; - padding: 0; - margin: 0; + .footer-bottom>small { + font-size: 1rem; + margin: 0 auto; + width: 100% } - #footer .footer-top .footer-links ul i { - padding-right: 2px; - color: #57a6ea; - font-size: 18px; - line-height: 1; + /*? socials */ + .social-wrapper { + display: flex; + gap: 0.5rem; + margin: 0 auto; } - #footer .footer-top .footer-links ul li { - padding: 10px 0; - display: flex; + .social-links { + display: inline-flex; + gap: 0.5rem; align-items: center; } - #footer .footer-top .footer-links ul li:first-child { - padding-top: 0; + .social-links img { + width: 1.5rem; + height: 1.5rem; + transition: all 0.2s ease-in-out; } - #footer .footer-top .footer-links ul a { - color: #fff; - transition: 0.3s; - display: inline-block; - line-height: 1; + .social-links img:hover { + transform: scale(1.1); } - #footer .footer-top .footer-links ul a:hover { - color: #57a6ea; + .social-links ul { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + list-style-type: none; } - #footer .footer-top .footer-newsletter form { - margin-top: 30px; - background: #fff; - padding: 6px 10px; - position: relative; - border-radius: 4px; + .footer-bottom-wrapper { + display: flex; + flex-direction: column; + justify-content: center; } - #footer .footer-top .footer-newsletter form input[type="email"] { - border: 0; - padding: 4px; - width: calc(100% - 110px); + .subscribe-form{ + margin-top: 10px; + display: flex; + flex-direction: column; + gap: 10px; } - - #footer .footer-top .footer-newsletter form input[type="submit"] { - position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - background: none; - font-size: 16px; - padding: 0 20px; - background: #57a6ea; - color: #fff; - transition: 0.3s; - border-radius: 0 4px 4px 0; + .subscribe-form input{ + padding: 10px; } + + @media (min-width: 600px) { + .other-columns { + display: grid; + grid-template-columns: repeat(4, 1fr); + } - #footer .footer-top .footer-newsletter form input[type="submit"]:hover { - background: #57a6ea; + .footer-bottom-wrapper { + flex-direction: row; + } + .footer-bottom-wrapper small{ + font-size: smaller; + } + .footer-bottom-links { + margin-left: 1.5rem; + } } - .copyright { - display: flex; - justify-content: center; - padding-top: 10px; - } - .copyright strong{ - margin-left: 5px; + @media (max-width: 800px) { + .footer-top { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 1rem 0.5rem 2rem 0.5rem; + } } \ No newline at end of file diff --git a/Html-Files/blood.html b/Html-Files/blood.html index 0830e1cf..0ccbded8 100644 --- a/Html-Files/blood.html +++ b/Html-Files/blood.html @@ -12,44 +12,40 @@ - - - - - + + + + Blood Bank -
-
- - - -
- - - - -
+
+
+ + + + +
+ + + +
@@ -125,7 +121,7 @@

AB-

-