contact box left side icons added and some changes

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
     <link rel="stylesheet" href="style.css">
     <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">
     <!-- Bootstrap core CSS -->
@@ -19,21 +20,21 @@
             Any questions or remarks? Just write us a message!
         </p>
         <div class="box">
-            <div class="left p-4 bg-black text-white d-flex flex-column justify-content-between">
+            <div class="left bg-black text-white ">
                 <div class="head">
-                    <h2>Contact information</h2>
-                    <p>Fill up the form and our Team will get back to<br>you within 24 hours.</p>
+                    <h2 class="fs-4 l-head-h2">Contact&nbsp;information</h2>
+                    <p class="l-head-p pt-2">Fill up the form and our Team will get back&nbsp;to<br>you within 24 hours.</p>
                 </div>
                 <div class="left-mid">
-                    <p><span>+0123 4567 8910</span></p>
-                    <p><span>hello@flowbase.com</span></p>
-                    <p><span>102 Street 2714 Don</span></p>
+                    <p class="l-mid-p"><span class="box-icon"><i class='bx bxs-phone-call'></i></span><span>+0123 4567 8910</span></p>
+                    <p class="l-mid-p"><span class="box-icon"><i class='bx bx-envelope' ></i></span><span>hello@flowbase.com</span></p>
+                    <p class="l-mid-p"><span class="box-icon"><i class='bx bx-current-location'></i></span><span>102 Street 2714 Don</span></p>
                 </div>
                 <div class="left-footer">
-                    <span>ajsdhf</span>
-                    <span>asf</span>
-                    <span>sd</span>
-                    <span>sdf</span>
+                    <span><i class='bx bxl-facebook'></i></span>
+                    <span><i class='bx bxl-twitter' ></i></span>
+                    <span><i class='bx bxl-instagram' ></i></span>
+                    <span><i class='bx bxl-linkedin' ></i></span>
                 </div>
             </div>
             <div class="right p-4">
@@ -89,4 +90,5 @@
         </div>
     </div>
 </body>
+<script src="https://unpkg.com/boxicons@2.1.2/dist/boxicons.js"></script>
 </html>
\ No newline at end of file

style.css

@@ -7,11 +7,13 @@
     padding: 0;
 }
 html,body{
+    min-height: 100vh;
     background-color: rgb(243, 243, 251);
 }
 .main-container{
     position: relative;
     width: 100%;
+    background-color: rgb(243, 243, 251);
 }
 .heading{
     color: #010349;
@@ -22,14 +24,34 @@ html,body{
     width: 1000px;
     margin: 50px auto 0;
     padding-bottom: 40px;
-    background-color: white;
     display: flex;
 
 }
 .box .left{
+    position: relative;
     width: 35%;
+    padding: 35px 30px;
+    border-radius: 20px;
+}
+.box .left .left-mid{
+    transform: translateY(50px);
 }
-
 .box .right{
     width: 65%;
-}
\ No newline at end of file
+    background-color: #fff;
+}
+.l-head-h2{
+    letter-spacing: -1.5px;
+}
+.l-head-p{
+    font-size: 13px;
+}
+.l-mid-p
+{
+    margin-bottom: 30px;
+}
+.left-footer{
+    position: absolute;
+    padding-bottom: 35px;
+    bottom: 0;
+}