muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added home page

Browse source
This commit is contained in:
JSriwongsa 2023-07-14 22:24:18 -05:00
parent d8fd7b4bbb
commit 8c85dd3fb4
2 changed files with 144 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
donation_website/index.html
View file

@ -82,6 +82,8 @@
<li><a href="">Laboratory Services</a></li>
<li><a href="">Clinical Apheresis Services </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>
</ul>
</li>
</ul>
@ -96,7 +98,42 @@
</div>
</header>
<main>
<div class="home" id="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>
</div>
<div class="home-sub" id="home-sub">
<div class="box">
<div class="box-img">
<img src="images/icon-1.png" alt="">
</div>
<h2>Appointment</h2>
<span>Find the nearest donation center or blood drive near you</span>
<a href="" class="btn">Make appointment</a>
</div>
<div class="box">
<div class="box-img">
<img src="images/icon-2.png" alt="">
</div>
<h2>Eligibility</h2>
<span>Find out the general eligibility criteria</span>
<a href="" class="btn">Read more</a>
</div>
<div class="box">
<div class="box-img">
<img src="images/icon-3.png" alt="">
</div>
<h2>Rapidpass</h2>
<span>Complete you health history questionsonline, before visiting your blood drive location</span>
<a href="" class="btn">Start now</a>
</div>
</div>
</main>
<footer></footer>
@ -134,6 +171,8 @@
<li><a href="">Laboratory Services</a></li>
<li><a href="">Clinical Apheresis Services </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>
</ul>
</li>
</ul>

104
donation_website/style.css
View file

@ -310,6 +310,110 @@ form.search i{
z-index: 1;
padding: 0 15px;
}
/*---------- home ----------*/
.home{
padding: 50px 10%;
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
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%
}
.home-sub .box{
flex: 1 1 10rem;
padding: 20px;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
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;
letter-spacing: 1px;
}
.home-sub .box span{
font-size: 16px;
margin: 0.3rem 0 0.5rem;
}
.box .btn{
border-radius: 5px;
}