update guide section and slider
This commit is contained in:
JSriwongsa
parent
8929940df5
commit
4855e57985
3 changed files with 247 additions and 88 deletions
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/logo.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page" class="site">
|
||||
|
|
@ -97,14 +98,45 @@
|
|||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="home">
|
||||
<div class="home-text">
|
||||
<h1>Every blood doner is a lifesaver</h1>
|
||||
<h2>Your blood donation is needed to prevernt <br> a blood shortage</h2>
|
||||
<a href="#" class="btn">Learn more</a>
|
||||
</div>
|
||||
<div class="home-img">
|
||||
<img src="images/img6.png" alt="">
|
||||
<div class="slider">
|
||||
<div class="sliderbox swiper">
|
||||
<div class="wrap swiper-wrapper">
|
||||
<div class="item swiper-slide">
|
||||
<div class="image">
|
||||
<div class="object-cover">
|
||||
<img src="images/heading-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="title-info">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<h1 class="text">Every blood doner is a lifesaver</h1>
|
||||
<h3 class="title">Your blood donation is needed to prevernt <br>a blood shortage</h3>
|
||||
<div class="button"><a href="" class="primary-btn">Learn more</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item swiper-slide">
|
||||
<div class="image">
|
||||
<div class="object-cover">
|
||||
<img src="images/heading-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="title-info">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<h1 class="text-1">The gift of blood is the gift of life</h1>
|
||||
<h3 class="title-1">14th June World Blood Doner Day</h3>
|
||||
<div class="button"><a href="" class="primary-btn">Read more</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-pagination">
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -112,9 +144,9 @@
|
|||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<h2 class="title"><i class='bx bx-plus-medical'></i> Blood Donation Guide <i class='bx bx-plus-medical'></i></h2>
|
||||
<h2 class="title">Donation Guide</h2>
|
||||
</div>
|
||||
<div class="dotgride scrollto">
|
||||
<div class="dotgrid">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
|
|
@ -135,7 +167,7 @@
|
|||
</div>
|
||||
<div class="dot-info">
|
||||
<h3 class="dot-title">Eligibility</h3>
|
||||
<p class="grey-color">Find out the general eligibility criteria.</p>
|
||||
<p class="grey-color">Find out blood donation eligibility requirements, including a minimum age and weight requirement.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
|
|
@ -146,7 +178,7 @@
|
|||
</div>
|
||||
<div class="dot-info">
|
||||
<h3 class="dot-title">Rapidpass</h3>
|
||||
<p class="grey-color">Complete you health history questionsonline, before visiting your blood drive location</p>
|
||||
<p class="grey-color">Complete your health history questions online, before visiting your blood drive location.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -155,15 +187,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="guide">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<footer></footer>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
|
@ -224,6 +250,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue