productive users statistics section done

Author: programmingNot4u

index.html

@@ -49,11 +49,31 @@ <h2 class="section-title">See It in Action</h2>
 
       <!-- production user -->
        <section>
-        <h2>Joined Thousands of Productive Users</h2>
+        <div class="production-statistics">
+                    <h2 class="section-title ">Joined Thousands of Productive Users</h2>
+        <div class="statistics">
+            <div class="data">
+                <p class="num-data">50k</p>
+                <p class="data-type">Active Users</p>
+            </div>
+            <div class="data">
+                <p class="num-data">2M+</p>
+                <p class="data-type">Focus Sessions</p>
+            </div>
+            <div class="data">
+                <p class="num-data">95%</p>
+                <p class="data-type">Satisfaction Rate</p>
+            </div>
+
+        </div>
+        </div>
        </section>
 
       <!-- User Review (Challenges part) -->
 
+      <section>
+        <h2>What our users say</h2>
+      </section>
       <!-- Ready to focus (NO POINT FOR THIS PART) -->
 
       <!-- Contact Section (10 mark) -->

styles/style.css

@@ -99,7 +99,7 @@ nav ul {
 }
 .action-detials p{
     font: 24px;
-    color: #252432;
+    color: #A7A8B2;
 }
 .action-detials *{
     margin-bottom: 23px;
@@ -109,10 +109,33 @@ nav ul {
 }
 
 /* Productive User Section */
+.production-statistics{
+    text-align: center;
+    background-color: #E5E7FF;
+    border-radius: 20px;
+    margin-top: 116px;
+    padding: 50px;
+}
 
 
 
-
+.statistics{
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 40px;
+    text-align: center;
+}
+.num-data{
+    color: #4E47FF;
+    font-family: "Inter", sans-serif;
+    font-weight: bold;
+    font-size: 80px;
+}
+.data-type{
+    color: #72737F;
+    font-size: 20px;
+    font-family: "Inter", sans-serif;
+}
 
 /* Contuct section */