Add about section image

deepnetworkgmbh · Oct 30, 2024 · a0f90b3 · a0f90b3
1 parent 8f88585
commit a0f90b3
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 5 deletions.
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/index.html b/index.html
@@ -47,7 +47,26 @@ <h1>Transform your business<br> with expert IT solutions</h1>
                     Our certified specialists in Microsoft Dynamics CRM<br>and ERP work to solve challenges, drive growth,<br> and ensure long-term success for your <br>organization.</p>
                     <button class="classic-btn">Get to know us</button>
             </div>
-            <div></div>
+            <div id="detail-wrapper">
+                <img src="./images/about-us.png" alt="computers">
+                <div id="about-details">
+                    <div class="detail-box">
+                        <h2>6+</h2>
+                        <p>Year Partnership <br>
+                            with Microsoft</p>
+                    </div>
+                    <div class="detail-box">
+                        <h2>100+</h2>
+                        <p>Microsoft Certified <br>
+                            consultants</p>
+                    </div>
+                    <div class="detail-box">
+                        <h2>80+</h2>
+                        <p>Successful projects <br>
+                            around the world</p>
+                    </div>
+                </div>
+            </div>
         </section>
 
         <section id="services-section">

diff --git a/style.css b/style.css
@@ -146,16 +146,53 @@
 /* About Us */
 #about-section{
     display: flex;
-    justify-content: space-around;
-
-    margin-top: 3rem;
-    margin-bottom: 3rem;
+    justify-content: flex-end;
+    gap: 150px;
 }
 
 #about-section button{
     margin-top: 2rem;
 }
 
+#detail-wrapper{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    padding-bottom: 5.5rem;
+}
+
+#detail-wrapper img{
+    height: 495.05px;
+    width: 719px;
+
+    position: relative;
+    top: -150px;
+
+    border-radius: 300px 0 0 300px;
+}
+
+#about-details{
+    display: flex;
+    flex-direction:row;
+    justify-content: space-between;
+}
+
+#about-details .detail-box{
+    margin-right: 30px;
+}
+
+#about-details h2{
+    color: var(--text-grey);
+    font-size: 42px;
+}
+
+#about-details p{
+    color: var(--text-grey);
+    font-size: 22px;
+    font-weight: 200;
+}
+
 /* Service */
 #services-section{
     align-items: center;