diff --git a/donation_website/index.html b/donation_website/index.html index ff2453e..6cf139d 100644 --- a/donation_website/index.html +++ b/donation_website/index.html @@ -8,6 +8,7 @@ +
@@ -97,14 +98,45 @@
-
-
-

Every blood doner is a lifesaver

-

Your blood donation is needed to prevernt
a blood shortage

- Learn more -
-
- +
+
+
+
+
+
+ +
+
+
+
+

Every blood doner is a lifesaver

+

Your blood donation is needed to prevernt
a blood shortage

+
Learn more
+
+
+
+
+
+
+
+
+ +
+
+
+
+

The gift of blood is the gift of life

+

14th June World Blood Doner Day

+
Read more
+
+
+
+
+
+
+
+
+
@@ -112,9 +144,9 @@
-

Blood Donation Guide

+

Donation Guide

-
+
@@ -135,7 +167,7 @@

Eligibility

-

Find out the general eligibility criteria.

+

Find out blood donation eligibility requirements, including a minimum age and weight requirement.

@@ -146,7 +178,7 @@

Rapidpass

-

Complete you health history questionsonline, before visiting your blood drive location

+

Complete your health history questions online, before visiting your blood drive location.

@@ -155,15 +187,9 @@
-
-
-
- -
-
-
+
@@ -224,6 +250,7 @@ + \ No newline at end of file diff --git a/donation_website/main.js b/donation_website/main.js index 652accd..0719845 100644 --- a/donation_website/main.js +++ b/donation_website/main.js @@ -25,3 +25,20 @@ const submenu = document.querySelectorAll('.sub-trigger'); this.classList.toggle('expand') } } + +//slider +const swiper = new Swiper('.sliderbox', { + loop: true, + effect:'fade', + autoHeight: true, + + + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + + }); + + + \ No newline at end of file diff --git a/donation_website/style.css b/donation_website/style.css index 1ab1a8f..acb88fc 100644 --- a/donation_website/style.css +++ b/donation_website/style.css @@ -4,8 +4,13 @@ padding: 0; box-sizing: border-box; } +html{ + scroll-behavior: smooth; + overflow-x: hidden; +} body{ font-size: 16px; + font-weight: 400; line-height: 1.5; color: black; background-color: whitesmoke; @@ -24,17 +29,37 @@ ul{ list-style: none; } p{ - margin-bottom: 15px; + margin-bottom: 0 0 15px; } h1,h2,h3,h4{ font-weight: 500px; line-height: normal; } +input, textarea, select{ + font: inherit; + width: 100%; +} +input[type=checkbox], input[type=radio]{ + width: auto; +} +input::placeholder, textarea::placeholder{ + color: inherit; +} +button{ + font: inherit; +} +strong{ + font-weight: 600; +} .container{ max-width: 80%; padding: 0 15px; margin: 0 auto; } +.grey-color{ + color: grey; +} +/*----------------------*/ .header-top{ line-height: 40px; border-bottom: 1px solid lightgray; @@ -310,90 +335,159 @@ form.search i{ z-index: 1; padding: 0 15px; } -/*-----Header-----*/ -.home{ - padding: 50px 10%; +/*---------- slider ----------*/ +.slider :where(.image, .object-cover){ + position: relative; +} +.slider .object-cover{ + height: 430px; +} +.object-cover img{ + position: absolute; + height: 100%; width: 100%; - min-height: 80vh; + object-fit: cover; + opacity: 0.8; +} +.slider .title-info{ + background-color: whitesmoke; +} +.slider .title-info .wrap{ display: flex; - flex-wrap: wrap; + flex-direction: column; align-items: center; - background-color: whitesmoke; - gap: 1rem; -} -.home-text{ - flex: 1 1 17rem; -} -.home-img{ - flex: 1 1 10rem; -} -.home-img img{ - width: 90%; - animation: animate 1s linear infinite; -} -@keyframes animate{ - 0%{ - transform: translate(-10px, 0); - } - 50%{ - transform: translate(0, -10px); - } - 100%{ - transform: translate(-10px, 0); - } -} -.home-text h1{ - text-transform: uppercase; - color: #E34234; - font-size: 2.3rem; -} -.home-text h2{ - font-size: 1.8rem; - font-weight: 500; - margin: 0.5rem 0 1.5rem; -} -.btn{ - padding: 8px 16px; - border: 2px solid red; - font-weight: 600; -} -.btn:hover{ - background-color: #E34234; - border: none; - color: white; -} -.home-sub{ - display: flex; - flex-wrap: wrap; - gap: 1rem; - padding: 50px 10% -} -/*----- guide -----*/ -.guide{ - background-color: whitesmoke; -} -main > div .heading{ + gap: 30px; + padding-bottom: 5vw; + max-width: 1000px; + margin: 0 auto; text-align: center; - margin-bottom: 50px; - font-size: 18px; +} +.slider .title-info .text{ + position: relative; + font-size: 40px; + margin-top: -40px; + color: red; + text-shadow: 2px 2px salmon; + display: flex; + align-items: center; + justify-content: center; text-transform: uppercase; letter-spacing: 1px; - color: #E3735E; + word-spacing: 2px; +} +.slider .title-info .text-1{ + position: relative; + font-size: 40px; + margin-top: -40px; + color: black; + text-shadow: 2px 2px lightgray; + display: flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + letter-spacing: 1px; + word-spacing: 2px; +} +.primary-btn{ + padding: 10px 18px; + background-color: #E34234; + font-weight: 600; + color: white; +} +.primary-btn:hover{ + padding: 10px 18px; + background-color: #FA8072; + color: black; +} +.slider .custom-pagination{ + position: absolute; + right: 30px; + top: 50%; + bottom: 50%; +} +.slider .custom-pagination .swiper-pagination{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.custom-pagination .swiper-pagination-bullet{ + position: relative; + width: 20px; + height: 20px; + opacity: 1; + background-color: transparent; +} +.custom-pagination .swiper-pagination-bullet::before{ + content: ''; + position: absolute; + width: 10px; + height: 10px; + top: 50%; + left: 50%; + background-color: gray; + border: 1px solid gray; + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.3s, height 0.3s, transform 0.3s; +} +.custom-pagination .swiper-pagination-bullet-active::before{ + background-color: transparent; + width: 15px; + height: 15px; +} +.slider .title-info :where(h1, h3, button){ + transform: translateY(30px); + opacity: 0; + visibility: hidden; + transition: transform 0.5s, opacity 0.5s, visibility 0.5s; +} +.slider .swiper-slide-active .title-info :where(h1, h3, button){ + transform: translateY(0); + opacity: 1; + visibility: visible; +} +/*---------- guide ----------*/ +.site main > div:not(.slider){ + padding: 50px 0; } :is(.guide) .dot-image .thumbnail{ position: relative; opacity: unset; } -.guide .dotgride .wrapper{ - --grid-col: 260px; +.guide{ + background-color: whitesmoke; +} +.dotgrid .dot-image{ + position: relative; + margin-bottom: 15px; +} +.guide .dotgrid .wrapper{ + --grid-col: 300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col), 100%), 1fr)); - gap: 30px; + gap: var(--gutter, 30px); } .guide .dot-image .thumbnail img{ width: 100%; } - +main > div .heading{ + text-align: center; + margin-bottom: 60px; + font-size: 22px; + text-transform: uppercase; + text-shadow: 2px 2px gray; +} +.guide .dot-title{ + text-align: center; + font-size: 18px; + font-weight: 600; + padding: 10px 0; +} +.guide .dot-info p{ + line-height: 1.5; + font-size: 14px; +} @@ -435,8 +529,29 @@ main > div .heading{ opacity: 1; visibility: visible; } + /*----- slider -----*/ + .slider .title-info{ + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: transparent; + } + .slider .object-cover{ + height: calc(100vh - 80px); + } + .slider .title{ + font-size: 30px; + color: white; + text-transform: capitalize; + } + .slider .title-1{ + font-size: 30px; + color: red; + text-transform: capitalize; + } + } -