updated heading section
This commit is contained in:
parent
8c85dd3fb4
commit
8929940df5
2 changed files with 76 additions and 66 deletions
|
@ -82,7 +82,6 @@
|
||||||
<li><a href="">Laboratory Services</a></li>
|
<li><a href="">Laboratory Services</a></li>
|
||||||
<li><a href="">Clinical Apheresis Services </a></li>
|
<li><a href="">Clinical Apheresis Services </a></li>
|
||||||
<li><a href="">Medical Consultation</a></li>
|
<li><a href="">Medical Consultation</a></li>
|
||||||
<li><a href="">Blood & Diagnostic Testing </a></li>
|
|
||||||
<li><a href="">Cell & Gene Therapy </a></li>
|
<li><a href="">Cell & Gene Therapy </a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
@ -98,7 +97,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<div class="home" id="home">
|
<div class="home">
|
||||||
<div class="home-text">
|
<div class="home-text">
|
||||||
<h1>Every blood doner is a lifesaver</h1>
|
<h1>Every blood doner is a lifesaver</h1>
|
||||||
<h2>Your blood donation is needed to prevernt <br> a blood shortage</h2>
|
<h2>Your blood donation is needed to prevernt <br> a blood shortage</h2>
|
||||||
|
@ -108,33 +107,63 @@
|
||||||
<img src="images/img6.png" alt="">
|
<img src="images/img6.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-sub" id="home-sub">
|
|
||||||
<div class="box">
|
<div class="guide">
|
||||||
<div class="box-img">
|
<div class="container">
|
||||||
<img src="images/icon-1.png" alt="">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<h2>Appointment</h2>
|
<div class="dotgride scrollto">
|
||||||
<span>Find the nearest donation center or blood drive near you</span>
|
<div class="wrapper">
|
||||||
<a href="" class="btn">Make appointment</a>
|
<div class="item">
|
||||||
|
<div class="dot-image">
|
||||||
|
<div class="thumbnail hover">
|
||||||
|
<img src="images/guide-1.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="box">
|
|
||||||
<div class="box-img">
|
|
||||||
<img src="images/icon-2.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
<h2>Eligibility</h2>
|
<div class="dot-info">
|
||||||
<span>Find out the general eligibility criteria</span>
|
<h3 class="dot-title">Appointment</h3>
|
||||||
<a href="" class="btn">Read more</a>
|
<p class="grey-color">Make an appointment and find the nearest donation center or blood drive near you.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="box">
|
|
||||||
<div class="box-img">
|
|
||||||
<img src="images/icon-3.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
<h2>Rapidpass</h2>
|
<div class="item">
|
||||||
<span>Complete you health history questionsonline, before visiting your blood drive location</span>
|
<div class="dot-image">
|
||||||
<a href="" class="btn">Start now</a>
|
<div class="thumbnail hover">
|
||||||
|
<img src="images/guide-2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dot-info">
|
||||||
|
<h3 class="dot-title">Eligibility</h3>
|
||||||
|
<p class="grey-color">Find out the general eligibility criteria.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="dot-image">
|
||||||
|
<div class="thumbnail hover">
|
||||||
|
<img src="images/guide-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="guide">
|
||||||
|
<div class="container">
|
||||||
|
<div class="wrap">
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer></footer>
|
<footer></footer>
|
||||||
|
|
||||||
<div class="overlay" data-overlay></div>
|
<div class="overlay" data-overlay></div>
|
||||||
|
@ -171,7 +200,6 @@
|
||||||
<li><a href="">Laboratory Services</a></li>
|
<li><a href="">Laboratory Services</a></li>
|
||||||
<li><a href="">Clinical Apheresis Services </a></li>
|
<li><a href="">Clinical Apheresis Services </a></li>
|
||||||
<li><a href="">Medical Consultation</a></li>
|
<li><a href="">Medical Consultation</a></li>
|
||||||
<li><a href="">Blood & Diagnostic Testing </a></li>
|
|
||||||
<li><a href="">Cell & Gene Therapy </a></li>
|
<li><a href="">Cell & Gene Therapy </a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -310,11 +310,11 @@ form.search i{
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
/*---------- home ----------*/
|
/*-----Header-----*/
|
||||||
.home{
|
.home{
|
||||||
padding: 50px 10%;
|
padding: 50px 10%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 80vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -368,51 +368,31 @@ form.search i{
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: 50px 10%
|
padding: 50px 10%
|
||||||
}
|
}
|
||||||
.home-sub .box{
|
/*----- guide -----*/
|
||||||
flex: 1 1 10rem;
|
.guide{
|
||||||
padding: 20px;
|
background-color: whitesmoke;
|
||||||
display: flex;
|
}
|
||||||
|
main > div .heading{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
flex-direction: column;
|
margin-bottom: 50px;
|
||||||
align-items: center;
|
font-size: 18px;
|
||||||
margin-top: 3rem;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.home-sub .box:nth-child(1){
|
|
||||||
background-color: #A7C7E7;
|
|
||||||
}
|
|
||||||
.home-sub .box:nth-child(2){
|
|
||||||
background-color: #C3B1E1;
|
|
||||||
}
|
|
||||||
.home-sub .box:nth-child(3){
|
|
||||||
background-color: #FAC898;
|
|
||||||
}
|
|
||||||
.home-sub .box .box-img{
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
margin-top: -100px;
|
|
||||||
}
|
|
||||||
.home-sub .box .box-img img{
|
|
||||||
width: 80%;
|
|
||||||
height: 80%;
|
|
||||||
object-fit: contain;
|
|
||||||
object-position: center;
|
|
||||||
}
|
|
||||||
.home-sub .box h2{
|
|
||||||
color: #D22B2B;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
color: #E3735E;
|
||||||
}
|
}
|
||||||
.home-sub .box span{
|
:is(.guide) .dot-image .thumbnail{
|
||||||
font-size: 16px;
|
position: relative;
|
||||||
margin: 0.3rem 0 0.5rem;
|
opacity: unset;
|
||||||
}
|
}
|
||||||
.box .btn{
|
.guide .dotgride .wrapper{
|
||||||
border-radius: 5px;
|
--grid-col: 260px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col), 100%), 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
.guide .dot-image .thumbnail img{
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -456,5 +436,7 @@ form.search i{
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue