From 8c85dd3fb4cf7b6447f3605bf0aa5e0ff166afa0 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Fri, 14 Jul 2023 22:24:18 -0500
Subject: [PATCH] added home page

---
 donation_website/index.html |  41 +++++++++++++-
 donation_website/style.css  | 104 ++++++++++++++++++++++++++++++++++++
 2 files changed, 144 insertions(+), 1 deletion(-)

diff --git a/donation_website/index.html b/donation_website/index.html
index cb472d7..ebc47f2 100644
--- a/donation_website/index.html
+++ b/donation_website/index.html
@@ -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>
diff --git a/donation_website/style.css b/donation_website/style.css
index e1898a7..9bd778a 100644
--- a/donation_website/style.css
+++ b/donation_website/style.css
@@ -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;
+}
+
+