updated web extension page

SaibaDev · May 2, 2024 · c1bca04 · c1bca04
1 parent 2e0d723
commit c1bca04
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/imgs/step1.png b/imgs/step1.png
diff --git a/imgs/step5.png b/imgs/step5.png
diff --git a/web extension.html b/web extension.html
@@ -51,32 +51,50 @@
     </Header>
 
     <!-- web ext-->
-    <div>
-        <h2 class="text-center text-6xl font-bold font-Poppins mt-10">How to Install Protego Web Extension</h2>
-
+    <div class="container mx-auto">
+        <h2 class="text-center text-4xl lg:text-6xl font-bold font-Poppins mt-10">How to Install Protego Web Extension</h2>
+    
         <!-- Step 1-->
-        <div class="flex flex-col lg:flex-row items-center justify-center gap-40 lg:gap-40 mx-10 mt-20">
+        <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-20 mx-4 lg:mx-10 mt-10">
             <div class="text-lg">
-
-                <div class="flex items-center gap-0">
-                    <p class="font-normal text-xl"><span class="font-bold text-3xl text-red-500">1. Download Protego Web Extension</p>
-                </div>
+                <p class="font-normal text-xl"><span class="font-bold text-2xl lg:text-3xl">1. Download Protego Web Extension from the home page</span></p>
             </div>
-
-            <img src="imgs/step1.png" alt="contactUs" class="w-96 rounded-lg">
+            <img src="imgs/step1.png" alt="Step 1" class="w-64 lg:w-96 h-auto rounded-lg">
         </div>
-
+    
         <!-- Step 2-->
-        <div class="flex flex-col lg:flex-row items-center justify-center gap-40 lg:gap-40 mx-10 mt-20">
+        <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-20 mx-4 lg:mx-10 mt-10">
             <div class="text-lg">
-
-                <div class="flex items-center gap-0">
-                    <p class="font-normal text-xl"><span class="font-bold text-3xl">2. Download Protego Web Extension</p>
-                </div>
+                <p class="font-normal text-xl"><span class="font-bold text-2xl lg:text-3xl">2. Go to your web browser, then open extensions</span></p>
+            </div>
+            <img src="imgs/step2.png" alt="Step 2" class="w-64 lg:w-96 h-auto rounded-lg">
+        </div>
+
+        <!-- Step 3-->
+        <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-20 mx-4 lg:mx-10 mt-10">
+            <div class="text-lg">
+                <p class="font-normal text-xl"><span class="font-bold text-2xl lg:text-3xl">3. Enable developer mode then load unpacked</span></p>
+            </div>
+            <img src="imgs/step3.png" alt="Step 3" class="w-64 lg:w-96 h-auto rounded-lg">
+        </div>
+
+        <!-- Step 4-->
+        <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-20 mx-4 lg:mx-10 mt-10">
+            <div class="text-lg">
+                <p class="font-normal text-xl"><span class="font-bold text-2xl lg:text-3xl">4. Download Protego Web Extension</span></p>
             </div>
+            <img src="imgs/step4.png" alt="Step 4" class="w-64 lg:w-96 h-auto rounded-lg">
+        </div>
 
-            <img src="imgs/step2.png" alt="contactUs" class="w-96 rounded-lg">
+        <!-- Step 5-->
+        <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-20 mx-4 lg:mx-10 mt-10">
+            <div class="text-lg">
+                <p class="font-normal text-xl"><span class="font-bold text-2xl lg:text-3xl">5. Done</span></p>
+            </div>
+            <img src="imgs/step5.png" alt="Step 5" class="w-64 lg:w-96 h-auto rounded-lg">
         </div>
+    </div>
+
 
     </div>