Adding about section

Author: YpzarJohn24

assets/css/style.css

@@ -265,6 +265,10 @@ body {
   font-weight: var(--fw-700);
 }
 
+.w-100 {
+  width: 100%;
+}
+
 /*-----------------------------------*\
   #HEADER
 \*-----------------------------------*/
@@ -428,6 +432,47 @@ body {
   #ABOUT
 \*-----------------------------------*/
 
+.about {
+  background-color: var(--space-cadet);
+  color: var(--white);
+  text-align: center;
+}
+
+.about .container {
+  display: grid;
+  gap: 50px;
+}
+
+.about .section-title {
+  color: var(--white);
+}
+
+.about .section-text:nth-child(3) {
+  margin-block: 12px 8px;
+}
+
+.about-list {
+  display: grid;
+  gap: 25px;
+  margin-block-start: 25px;
+}
+
+.about-item {
+  background-color: var(--oxford-blue-2);
+  padding: 40px 20px;
+  transition: var(--transition);
+}
+
+.about-item:hover {
+  background-color: var(--international-orange-engineering);
+  transform: translateY(-8px);
+}
+
+.about-item .strong {
+  display: block;
+  line-height: 1.1;
+}
+
 /*-----------------------------------*\
   #WORK
 \*-----------------------------------*/

index.html

@@ -270,6 +270,66 @@ <h3 class="h3 card-title">Steering Repair</h3>
             </a>
           </div>
         </section>
+
+        <!-- #ABOUT -->
+
+        <section class="section about has-before" aria-labelledby="about-label">
+          <div class="container">
+            <figure class="about-banner">
+              <img
+                src="./assets/images/about-banner.png"
+                width="540"
+                height="540"
+                loading="lazy"
+                alt="vehicle repair equipments"
+                class="w-100"
+              />
+            </figure>
+
+            <div class="about-content">
+              <p class="section-subtitle :dark">About Us</p>
+              <h2 class="h2 section-title">
+                We’re Commited to Meet the quality
+              </h2>
+              <p class="section-text">
+                Quis autem vel eum iure reprehenderit qui in ea volu velit esse
+                quam nihil molestiae consequatur, vel illum eui dolorem eum
+                fugiat ruo.
+              </p>
+
+              <p class="section-text">
+                Reprehenderit qui in ea volu velit esse quam nihil moe stiae
+                consequatur, vel illum eui.
+              </p>
+
+              <ul class="about-list">
+                <li class="about-item">
+                  <p>
+                    <strong class="display-1 strong">8K+</strong> Happy Clients
+                  </p>
+                </li>
+                <li class="about-item">
+                  <p>
+                    <strong class="display-1 strong">22+</strong>
+                    Instruments
+                  </p>
+                </li>
+                <li class="about-item">
+                  <p>
+                    <strong class="display-1 strong">50+</strong>
+                    Years in market
+                  </p>
+                </li>
+                <li class="about-item">
+                  <p>
+                    <strong class="display-1 strong">99%</strong>
+                    Projects completed
+                  </p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </section>
       </article>
     </main>
     <!-- custom js link -->