Optimize the code and the better file storage

style.css → assets/css/style.css

@@ -1,3 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Ysabeau:wght@500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
+
 * {
   scroll-behavior: smooth;
 }
@@ -56,7 +62,7 @@ html {
   bottom: 0;
   height: 100vh;
   background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
-    url("images/For_Website/child-hands-holding-caring-young-green-plant.webp");
+    url("../images/child-hands-holding-caring-young-green-plant.webp");
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
@@ -304,7 +310,7 @@ nav .nav_buttons {
   height: 60vh;
 
   background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
-    url(images/For_Website/Event.webp);
+    url(../images/Event.webp);
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
@@ -450,27 +456,27 @@ nav .nav_buttons {
 
 .get_involved #_1 {
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url("images/For_Website/Individual.webp");
+    url("../images/Individual.webp");
   background-size: cover;
 }
 
 .get_involved #_2 {
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url("images/For_Website/Businesses.webp");
+    url("../images/Businesses.webp");
   background-size: cover;
 }
 
 .get_involved #_3 {
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-    url("images/For_Website/School.webp");
+    url("../images/School.webp");
   background-size: cover;
 }
 
 .Donate {
   /* height: 60vh; */
   padding: 10vh 0px;
   background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-    url("images/For_Website/donation.webp");
+    url("../images/donation.webp");
   background-size: cover;
   background-attachment: fixed;
 

index.html

@@ -6,41 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tree2Hope</title>
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Ysabeau:wght@500&display=swap"
-      rel="stylesheet"
-    />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
-      rel="stylesheet"
-    />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap"
-      rel="stylesheet"
-    />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap"
-      rel="stylesheet"
-    />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
-      rel="stylesheet"
-    />
-
     <!-- font awesome cdn -->
     <link
       rel="stylesheet"
@@ -50,16 +15,16 @@
       referrerpolicy="no-referrer"
     />
 
-    <link rel="icon" type="image/x-icon" href="images/For_Website/4x/Asset 4@4x.webp">
-    
-    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" type="image/x-icon" href="./assets/images/4x/logo.webp" />
+
+    <link rel="stylesheet" href="./assets/css/style.css" />
   </head>
   <body>
     <div class="banner section">
       <nav>
         <div class="logo">
           <img
-            src="images/For_Website/4x/Website_name.webp"
+            src="./assets/images/4x/typography_logo.webp"
             alt="Logo"
             width="160px"
           />
@@ -96,56 +61,49 @@
       </div>
       <div class="image_container">
         <div class="country_images">
-          <img src="images/For_Website/Countries/Nepal.webp" alt="Nepal" /><span
+          <img src="./assets/images/Countries/Nepal.webp" alt="Nepal" /><span
             >Nepal</span
           >
         </div>
         <div class="country_images">
-          <img
-            src="images/For_Website/Countries/Thailand.webp"
-            alt="Thailand"
-          /><span>Thailand</span>
+          <img src="./assets/images/Countries/Thailand.webp" alt="Thailand" /><span
+            >Thailand</span
+          >
         </div>
         <div class="country_images">
-          <img src="images/For_Website/Countries/India.webp" alt="India" /><span
+          <img src="./assets/images/Countries/India.webp" alt="India" /><span
             >India</span
           >
         </div>
         <div class="country_images">
-          <img
-            src="images/For_Website/Countries/Maldives.webp"
-            alt="Maldives"
-          /><span>Maldives</span>
+          <img src="./assets/images/Countries/Maldives.webp" alt="Maldives" /><span
+            >Maldives</span
+          >
         </div>
         <div class="country_images">
-          <img
-            src="images/For_Website/Countries/Bhutan.webp"
-            alt="Bhutan"
-          /><span>Bhutan</span>
+          <img src="./assets/images/Countries/Bhutan.webp" alt="Bhutan" /><span
+            >Bhutan</span
+          >
         </div>
         <div class="country_images">
-          <img
-            src="images/For_Website/Countries/Sri_Lanka.webp"
-            alt="Sri Lanka"
-          /><span>Sri Lanka</span>
+          <img src="./assets/images/Countries/Sri_Lanka.webp" alt="Sri Lanka" /><span
+            >Sri Lanka</span
+          >
         </div>
         <div class="country_images">
-          <img
-            src="images/For_Website/Countries/Malaysia.webp"
-            alt="Malaysia"
-          /><span>Malaysia</span>
+          <img src="./assets/images/Countries/Malaysia.webp" alt="Malaysia" /><span
+            >Malaysia</span
+          >
         </div>
         <div class="country_images">
-          <img
-            src="images/For_Website/Countries/Indonesia.webp"
-            alt="Indonesia"
-          /><span>Indonesia</span>
+          <img src="./assets/images/Countries/Indonesia.webp" alt="Indonesia" /><span
+            >Indonesia</span
+          >
         </div>
         <div class="country_images">
-          <img
-            src="images/For_Website/Countries/Hong_Kong.webp"
-            alt="Hong_Kong"
-          /><span>Hong Kong</span>
+          <img src="./assets/images/Countries/Hong_Kong.webp" alt="Hong_Kong" /><span
+            >Hong Kong</span
+          >
         </div>
       </div>
     </div>
@@ -195,21 +153,21 @@
         <div class="line"></div>
       </div>
       <div class="images">
-        <img src="images/For_Website/Target.webp" width="200px" />
+        <img src="./assets/images/Target.webp" width="200px" />
         <div class="text">
           <span>TARGET<br /><br /></span>Planting 1 million trees worldwide
           within the next 3 years.
         </div>
       </div>
       <div class="images">
-        <img src="images/For_Website/Reach.webp" width="200px" />
+        <img src="./assets/images/Reach.webp" width="200px" />
         <div class="text">
           <span>REACH<br /><br /></span>Expanding tree planting efforts to 30+
           countries across the world.
         </div>
       </div>
       <div class="images">
-        <img src="images/For_Website/Awareness.webp" width="200px" />
+        <img src="./assets/images/Awareness.webp" width="200px" />
         <div class="text">
           <span>EDUCATION AND AWARENESS<br /><br /></span>Raising awareness
           about the importance of tree planting through educational programs,