From 8929940df58df6fd87623121348a1c0a2a70e27a Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Sat, 15 Jul 2023 19:13:07 -0500
Subject: [PATCH] updated heading section

---
 donation_website/index.html | 76 +++++++++++++++++++++++++------------
 donation_website/style.css  | 66 ++++++++++++--------------------
 2 files changed, 76 insertions(+), 66 deletions(-)

diff --git a/donation_website/index.html b/donation_website/index.html
index ebc47f2..ff2453e 100644
--- a/donation_website/index.html
+++ b/donation_website/index.html
@@ -82,7 +82,6 @@
                                         <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>
@@ -98,7 +97,7 @@
             </div>
         </header>
         <main>
-            <div class="home" id="home">
+            <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>
@@ -108,33 +107,63 @@
                     <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 class="guide">
+                <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>
+                        </div>
+                        <div class="dotgride scrollto">
+                            <div class="wrapper">
+                                <div class="item">
+                                    <div class="dot-image">
+                                        <div class="thumbnail hover">
+                                            <img src="images/guide-1.jpg" alt="">
+                                        </div>
+                                    </div>
+                                    <div class="dot-info">
+                                        <h3 class="dot-title">Appointment</h3>
+                                        <p class="grey-color">Make an appointment and find the nearest donation center or blood drive near you.</p>
+                                    </div>
+                                </div>
+                                <div class="item">
+                                    <div class="dot-image">
+                                        <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>
-                    <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>
+
+            <div class="guide">
+                <div class="container">
+                    <div class="wrap">
+                        
                     </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>
 
         <div class="overlay" data-overlay></div>
@@ -171,7 +200,6 @@
                         <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>
diff --git a/donation_website/style.css b/donation_website/style.css
index 9bd778a..1ab1a8f 100644
--- a/donation_website/style.css
+++ b/donation_website/style.css
@@ -310,11 +310,11 @@ form.search i{
     z-index: 1;
     padding: 0 15px;
 }
-/*---------- home ----------*/
+/*-----Header-----*/
 .home{
     padding: 50px 10%;
     width: 100%;
-    min-height: 100vh;
+    min-height: 80vh;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -368,51 +368,31 @@ form.search i{
     gap: 1rem;
     padding: 50px 10%
 }
-.home-sub .box{
-    flex: 1 1 10rem;
-    padding: 20px;
-    display: flex;
+/*----- guide -----*/
+.guide{
+    background-color: whitesmoke;
+}
+main > div .heading{
     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;
+    margin-bottom: 50px;
+    font-size: 18px;
     text-transform: uppercase;
     letter-spacing: 1px;
-} 
-.home-sub .box span{
-    font-size: 16px;
-    margin: 0.3rem 0 0.5rem;
+    color: #E3735E;
 }
-.box .btn{
-    border-radius: 5px;
+:is(.guide) .dot-image .thumbnail{
+    position: relative;
+    opacity: unset;
+}
+.guide .dotgride .wrapper{
+    --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%;
 }
-
 
 
 
@@ -455,6 +435,8 @@ form.search i{
         opacity: 1;
         visibility: visible;
     }
+    
+    
    
 }