- 
+ 
+
-
+ content
-message
- Learn more +Give blood and keep the world beating
+World Blood Donor Day is celebrated on 14 June every year to spread awareness and seek attention to the importance of blood donation. + It is important that people are educated on the importance of safe blood donation and blood products for the purpose of transfusion. +
+ Read more +
+
diff --git a/donation_website/main.js b/donation_website/main.js
index 0719845..edefe4f 100644
--- a/donation_website/main.js
+++ b/donation_website/main.js
@@ -25,20 +25,58 @@ const submenu = document.querySelectorAll('.sub-trigger');
this.classList.toggle('expand')
}
}
+//progress
+function progressBar(progressBarNum, progressStart, progressEnd, speed) {
+
+ let progressBar = document.querySelector('.progress-bar-' + progressBarNum);
+ let progressValue = document.querySelector('.progress-value-' + progressBarNum);
+
+ let progress = setInterval(() => {
+ progressStart ++;
+ progressValue.textContent = `${progressStart}%`
+ progressBar.style.background = `conic-gradient(red ${progressStart * 3.6}deg, lightgray 0deg)`
+
+ if(progressStart == progressEnd){
+ clearInterval(progress);
+ }
+ }, speed)
+
+ return progress
+}
+progressBar(1, 0, 34, 200);
+progressBar(2, 0, 6, 300);
+progressBar(3, 0, 9 ,400);
+progressBar(4, 0, 2, 500);
+progressBar(5, 0, 3, 400);
+progressBar(6, 0, 1, 300);
+progressBar(7, 0, 38, 200);
+progressBar(8, 0, 7, 200);
//slider
-const swiper = new Swiper('.sliderbox', {
- loop: true,
- effect:'fade',
+const swiper = new Swiper('.swiper', {
+ slidesPerView: 1,
+ spaceBetween: 30,
autoHeight: true,
-
-
- pagination: {
- el: '.swiper-pagination',
- clickable: true,
+ loop: true,
+ breakpoints:{
+ 992:{
+ slidesPerView: 3,
+ centeredSlides: true,
+ },
+ 641:{
+ slidesPerView: 2,
+ centeredSlides: false,
+ }
+ },
+ pagination: {
+ el: '.pagination',
+ },
+ navigation: {
+ nextEl: '.button-next',
+ prevEl: '.button-prev',
},
-
});
+
\ No newline at end of file
diff --git a/donation_website/style.css b/donation_website/style.css
index acb88fc..4568f45 100644
--- a/donation_website/style.css
+++ b/donation_website/style.css
@@ -336,10 +336,10 @@ form.search i{
padding: 0 15px;
}
/*---------- slider ----------*/
-.slider :where(.image, .object-cover){
+.home :where(.image, .object-cover){
position: relative;
}
-.slider .object-cover{
+.home .object-cover{
height: 430px;
}
.object-cover img{
@@ -349,10 +349,10 @@ form.search i{
object-fit: cover;
opacity: 0.8;
}
-.slider .title-info{
+.home .title-info{
background-color: whitesmoke;
}
-.slider .title-info .wrap{
+.home .title-info .wrap{
display: flex;
flex-direction: column;
align-items: center;
@@ -362,11 +362,11 @@ form.search i{
margin: 0 auto;
text-align: center;
}
-.slider .title-info .text{
+.home .title-info .text{
position: relative;
font-size: 40px;
margin-top: -40px;
- color: red;
+ color: #D22B2B;
text-shadow: 2px 2px salmon;
display: flex;
align-items: center;
@@ -375,19 +375,6 @@ form.search i{
letter-spacing: 1px;
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;
@@ -399,98 +386,220 @@ form.search i{
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;
+.guide .row{
+ display: flex;
+ flex-wrap: wrap;
+ cursor: pointer;
}
-:is(.guide) .dot-image .thumbnail{
- position: relative;
- opacity: unset;
-}
-.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: var(--gutter, 30px);
-}
-.guide .dot-image .thumbnail img{
+.guide .row h1{
width: 100%;
-}
-main > div .heading{
text-align: center;
- margin-bottom: 60px;
+ margin: 20px 0;
font-size: 22px;
text-transform: uppercase;
text-shadow: 2px 2px gray;
-}
-.guide .dot-title{
+}
+.guide .column{
+ padding: 16px;
+}
+.guide .card{
+ padding: 48px 10px;
text-align: center;
+ background: linear-gradient(0deg, #E34234 10px, transparent 10px);
+ background-repeat: no-repeat;
+ background-position: 0 10px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+ border-radius: 5px;
+ transition: 0.5s;
+}
+.guide .card .icon{
+ font-size: 40px;
+ height: 70px;
+ width: 70px;
+ margin: auto;
+ background-color: #FA8072;
+ display: grid;
+ place-items: center;
+ border-radius: 50%;
+ color: white;
+}
+.guide .card .icon::before{
+ content: '';
+ position: absolute;
+ height: 80px;
+ width: 80px;
+ border: 4px solid #FA8072;
+ border-radius: 50%;
+ transition: 0.5s;
+}
+.guide .card h3{
font-size: 18px;
font-weight: 600;
- padding: 10px 0;
+ margin: 16px 0 24px 0;
+ letter-spacing: 1px;
+ text-transform: uppercase;
}
-.guide .dot-info p{
+.guide .card p{
line-height: 1.5;
+ color: #625a71;
font-size: 14px;
}
-
-
-
+.guide .card:hover{
+ background-position: 0;
+}
+.guide .card:hover .icon::before{
+ height: 50px;
+ width: 50px;
+}
+/*----- content-1 -----*/
+.content-1 .container{
+ max-width: 69%;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 50px;
+ margin-top: 100px;
+}
+.content-1-img{
+ flex: 1 1 21rem;
+}
+.content-1-img img{
+ border-radius: 5px;
+ height: 95%;
+}
+.content-1-text{
+ flex: 1 1 21rem;
+}
+.content-1-text h2{
+ font-size: 22px;
+ text-shadow: 2px 2px gray;
+ text-transform: uppercase;
+}
+.content-1-text p{
+ margin: 0.5rem 0 2.5rem;
+ text-align: justify;
+}
+.content-1-text .primary-btn:hover{
+ background: transparent;
+ border: 2px solid #E34234;
+ color: black;
+}
+/*----- progress -----*/
+.progress{
+ display: flex;
+ align-items: center;
+ height: 80vh;
+}
+.progress .container{
+ padding: 0 30px;
+ margin: 0 auto;
+ max-width: 1100px;
+ width: 100%;
+}
+.progress .progress-content h1{
+ width: 100%;
+ text-align: center;
+ margin: 50px 0;
+ font-size: 22px;
+ text-transform: uppercase;
+ text-shadow: 2px 2px gray;
+}
+.card-progress{
+ max-width: 300px;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: rgb(225 225 225 / 0.2) 0 0 0 8px;
+ margin: 0 auto;
+ overflow: hidden;
+}
+.card-progress .head{
+ position: relative;
+ height: 420px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ text-align: center;
+}
+.card-progress .thumbnail-progress{
+ position: relative;
+}
+.card-progress .thumbnail-progress .progress-bar{
+ position: relative;
+ height: 259px;
+ width: 250px;
+ background-color: lightgray;
+ border-radius: 50%;
+ background: conic-gradient(red 3deg, lightgray 0deg);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.card-progress .thumbnail-progress .progress-bar::before{
+ content: '';
+ position: absolute;
+ height: 210px;
+ width: 210px;
+ background-color: white;
+ border-radius: 50%;
+}
+.card-progress .thumbnail-progress .progress-value{
+ position: relative;
+ font-size: 30px;
+ font-weight: 600;
+ color: salmon;
+}
+.card-progress .meta{
+ position: relative;
+}
+.card-progress .meta h2{
+ font-size: 26px;
+ font-weight: 600;
+ margin-bottom: 20px;
+}
+.card-progress .meta .progress-btn{
+ padding: 6px 14px;
+ border: 2px solid #E34234;
+ margin-bottom: 20px;
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 600;
+}
+.card-progress .meta .progress-btn:hover{
+ background-color: #E34234;
+ color: white;
+}
+.swiper .pagination{
+ text-align: center;
+ padding: 20px;
+}
+.swiper .pagination span{
+ height: 4px;
+ border-radius: 4px;
+ background-color: gray;
+ opacity: 1;
+ transition: width 0.3s;
+}
+.swiper .pagination span[class*=-active]{
+ width: 25px;
+ background-color: red;
+}
+.nextprev{
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 15px 0;
+}
+.nextprev i{
+ color: black;
+ font-size: 22px;
+ padding: 0 10px;
+ cursor: pointer;
+}
+.nextprev i:hover{
+ color: gray;
+}
@@ -529,29 +638,43 @@ main > div .heading{
opacity: 1;
visibility: visible;
}
- /*----- slider -----*/
- .slider .title-info{
+ /*----- home -----*/
+ .home .title-info{
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
}
- .slider .object-cover{
+ .home .object-cover{
height: calc(100vh - 80px);
}
- .slider .title{
+ .home .title{
font-size: 30px;
color: white;
text-transform: capitalize;
}
- .slider .title-1{
+ .home .title-1{
font-size: 30px;
color: red;
text-transform: capitalize;
+ }
+ .guide{
+ padding: 1rem;
}
-
-
-
-
+ .card{
+ padding: 5rem 2rem;
+ }
+ .column{
+ flex: 0 0 33.33%;
+ max-width: 33.33%;
+ padding: 0 1rem;
+ }
+
}
+
+@media screen and (min-width:768px){
+ .guide{
+ padding: 1rem 7rem;
+ }
+}
\ No newline at end of file
+
+
+ Average distribution of blood types in the United States
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+