added circular progress bar
This commit is contained in:
JSriwongsa
parent
addccf7e55
commit
b1aba9a1b2
3 changed files with 428 additions and 120 deletions
|
|
@ -160,15 +160,162 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-1" id="content-1">
|
<div class="content-1">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="content-1-img">
|
<div class="content-1-img">
|
||||||
<img src="images/heading-3.jpg" alt="">
|
<img src="images/content-1.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="content-1-text">
|
<div class="content-1-text">
|
||||||
<h2>content</h2>
|
<h2>Give blood and keep the world beating</h2>
|
||||||
<p>message</p>
|
<p>World Blood Donor Day is celebrated on 14 June every year to spread awareness and seek attention to the importance of blood donation.
|
||||||
<a href="" class="primary-btn">Learn more</a>
|
It is important that people are educated on the importance of safe blood donation and blood products for the purpose of transfusion.
|
||||||
|
</p>
|
||||||
|
<a href="" class="primary-btn">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress">
|
||||||
|
<div class="container">
|
||||||
|
<div class="progress-content">
|
||||||
|
<h1>Average distribution of blood types in the United States</h1>
|
||||||
|
</div>
|
||||||
|
<div class="swiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-1">
|
||||||
|
<span class="progress-value progress-value-1">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type A+</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-2">
|
||||||
|
<span class="progress-value progress-value-2">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type A-</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-3">
|
||||||
|
<span class="progress-value progress-value-3">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type B+</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-4">
|
||||||
|
<span class="progress-value progress-value-4">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type B-</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-5">
|
||||||
|
<span class="progress-value progress-value-5">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type AB+</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-6">
|
||||||
|
<span class="progress-value progress-value-6">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type AB-</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-7">
|
||||||
|
<span class="progress-value progress-value-7">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type O+</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item swiper-slide">
|
||||||
|
<div class="card-progress">
|
||||||
|
<div class="head">
|
||||||
|
<div class="blur"></div>
|
||||||
|
<div class="thumbnail-progress">
|
||||||
|
<div class="progress-bar progress-bar-8">
|
||||||
|
<span class="progress-value progress-value-8">0%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta">
|
||||||
|
<h2>Blood type O-</h2>
|
||||||
|
<a href="" class="progress-btn">Donate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pagination"></div>
|
||||||
|
<div class="nextprev">
|
||||||
|
<i class='button-prev bx bx-chevron-left'></i>
|
||||||
|
<i class='button-next bx bx-chevron-right'></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -25,20 +25,58 @@ const submenu = document.querySelectorAll('.sub-trigger');
|
||||||
this.classList.toggle('expand')
|
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
|
//slider
|
||||||
const swiper = new Swiper('.sliderbox', {
|
const swiper = new Swiper('.swiper', {
|
||||||
loop: true,
|
slidesPerView: 1,
|
||||||
effect:'fade',
|
spaceBetween: 30,
|
||||||
autoHeight: true,
|
autoHeight: true,
|
||||||
|
loop: true,
|
||||||
|
breakpoints:{
|
||||||
pagination: {
|
992:{
|
||||||
el: '.swiper-pagination',
|
slidesPerView: 3,
|
||||||
clickable: true,
|
centeredSlides: true,
|
||||||
|
},
|
||||||
|
641:{
|
||||||
|
slidesPerView: 2,
|
||||||
|
centeredSlides: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
el: '.pagination',
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.button-next',
|
||||||
|
prevEl: '.button-prev',
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -336,10 +336,10 @@ form.search i{
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
/*---------- slider ----------*/
|
/*---------- slider ----------*/
|
||||||
.slider :where(.image, .object-cover){
|
.home :where(.image, .object-cover){
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.slider .object-cover{
|
.home .object-cover{
|
||||||
height: 430px;
|
height: 430px;
|
||||||
}
|
}
|
||||||
.object-cover img{
|
.object-cover img{
|
||||||
|
|
@ -349,10 +349,10 @@ form.search i{
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.slider .title-info{
|
.home .title-info{
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
}
|
}
|
||||||
.slider .title-info .wrap{
|
.home .title-info .wrap{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -362,11 +362,11 @@ form.search i{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.slider .title-info .text{
|
.home .title-info .text{
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
margin-top: -40px;
|
margin-top: -40px;
|
||||||
color: red;
|
color: #D22B2B;
|
||||||
text-shadow: 2px 2px salmon;
|
text-shadow: 2px 2px salmon;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -375,19 +375,6 @@ form.search i{
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
word-spacing: 2px;
|
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{
|
.primary-btn{
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
background-color: #E34234;
|
background-color: #E34234;
|
||||||
|
|
@ -399,98 +386,220 @@ form.search i{
|
||||||
background-color: #FA8072;
|
background-color: #FA8072;
|
||||||
color: black;
|
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 ----------*/
|
/*---------- guide ----------*/
|
||||||
.site main > div:not(.slider){
|
.guide .row{
|
||||||
padding: 50px 0;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
:is(.guide) .dot-image .thumbnail{
|
.guide .row h1{
|
||||||
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{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
main > div .heading{
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 60px;
|
margin: 20px 0;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-shadow: 2px 2px gray;
|
text-shadow: 2px 2px gray;
|
||||||
}
|
}
|
||||||
.guide .dot-title{
|
.guide .column{
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.guide .card{
|
||||||
|
padding: 48px 10px;
|
||||||
text-align: center;
|
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-size: 18px;
|
||||||
font-weight: 600;
|
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;
|
line-height: 1.5;
|
||||||
|
color: #625a71;
|
||||||
font-size: 14px;
|
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;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
/*----- slider -----*/
|
/*----- home -----*/
|
||||||
.slider .title-info{
|
.home .title-info{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.slider .object-cover{
|
.home .object-cover{
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 80px);
|
||||||
}
|
}
|
||||||
.slider .title{
|
.home .title{
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: white;
|
color: white;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
.slider .title-1{
|
.home .title-1{
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: red;
|
color: red;
|
||||||
text-transform: capitalize;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue