added some comments

SaibaDev · May 13, 2024 · 50c61cb · 50c61cb
1 parent 728b1a1
commit 50c61cb
Showing 1 changed file with 14 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -13,6 +13,8 @@
 </head>
 
 <body class="font-Poppins bg-[#0F172A]  overflow-x-hidden">
+
+    <!-- Navigation bar -->
     <Header class="bg-gray-900 p-3">
         <div class="flex justify-between items-center">
             <div class="flex-shrink-0">
@@ -52,7 +54,7 @@
     </Header>
 
 
-
+    <!-- Hero section -->
     <section class="relative">
         <div class="container flex flex-col-reverse lg:flex-row items-center gap-12 mt-14 lg:mt-28">
 
@@ -67,30 +69,35 @@
                     system that improves computer system performance, security, and overall efficiency while
                     guaranteeing a safe and secure user experience.
                 </p>
+                <!-- Download button -->
                 <div class="flex justify-center flex-wrap gap-6">
                     <a href="Protego-web-extension.zip" download class="btn btn-purple hover:bg-bookmark-white hover:text-black">
                         Get it on Chrome
                     </a>
-                    
+                <!-- Download button -->
                     <a href="Protego-desktop-main.zip" download class= "btn btn-purple hover:bg-bookmark-white hover:text-black">
                         Get it on Desktop
                     </a>
                 </div>
             </div>
+            <!-- Hero image -->
             <div class="flex justify-center flex-1 mb-10 md:mb-16 lg:mb-0 z-10">
                 <img class="w-17/20 h-17/20 sm:w-3/4 sm:h-3/4 md:w-full md:h-full" src="imgs\protego-card1.png" alt="" />
             </div>
         </div>
 
     </section>
 
+    <!-- Features title -->
     <section class="bg-bookmark-white py-20 mt-20 lg:mt-60">
         <div class="sm:w-3/4 lg:w-5/12 mx-auto px-2">
             <h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl">Features</h1>
             <p class="text-center text-bookmark-grey mt-4">
                 Protego utlizes different technologies in preventing mutiple types of Cyber security attacks.
             </p>
         </div>
+
+        <!-- features 1 -->
         <div class="relative mt-20 lg:mt-24">
             <div class="container flex flex-col lg:flex-row items-center justify-center gap-x-24">
                 <div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
@@ -110,6 +117,8 @@ <h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl">UR
             </div>
             <div class="hidden lg:block overflow-hidden bg-bookmark-purple rounded-r-full absolute h-80 w-2/4 -bottom-24 -left-36"></div>
         </div>
+
+        <!-- features 2-->
         <div class="relative mt-20 lg:mt-52">
             <div class="container flex flex-col lg:flex-row-reverse items-center justify-center gap-x-24">
                 <div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
@@ -130,13 +139,14 @@ <h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl">US
             </div>
         </div>
 
+        <!-- features 3-->
         <div class="relative mt-20 lg:mt-52">
             <div class="container flex flex-col lg:flex-row items-center justify-center gap-x-24">
                 <div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
                     <img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full"
                         src="imgs\protegoNAS.png" alt="" />
                 </div>
-
+                
                 <div class="flex flex-1 flex-col items-center lg:items-start">
                     <h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl ">Data backup using NAS</h1>
                     <p class="text-bookmark-grey my-4 text-center lg:text-left sm:w-3/4 lg:w-full">
@@ -145,18 +155,7 @@ <h1 class="text-3xl text-center text-bookmark-blue font-semibold md:text-3xl ">D
                     <a href="protegoNAS.html" target="_blank" class="btn btn-purple hover:bg-bookmark-white hover:text-black transition duration-200 ease-out">More Info</a>
                 </div>
             </div>
-            <div class="
-            hidden
-            lg:block
-            overflow-hidden
-            bg-bookmark-purple
-            rounded-r-full
-            absolute
-            h-80
-            w-2/4
-            -bottom-24
-            -left-36
-          "></div>
+            <div class="hidden lg:block overflow-hidden bg-bookmark-purple rounded-r-full absolute h-80 w-2/4 -bottom-24 -left-36"></div>
         </div>
     </section>