styled text in third panel

Usama4745 · Mar 28, 2021 · 095c47b · 095c47b
1 parent 1c0a517
commit 095c47b
Showing 1 changed file with 47 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -192,8 +192,8 @@
     }
 
     .second-panel-image {
-      margin-top: -693px;
-      margin-left: 1033px;
+      top: 1%;
+      right: -336px;
       width: 1201px;
     }
 
@@ -229,19 +229,44 @@
 
     .phone-svg {
       position: absolute;
-      margin-top: -29%;
+      top: -94%;
     }
 
     .circle-svg {
       position: absolute;
-      margin-top: -28%;
-      left: -14%;
+      top: -127%;
+      margin-left: -241px;
     }
 
     .third-panel-gap {
       margin-left: 150px;
       margin-right: 150px;
     }
+
+    .third-title {
+      color: white;
+      font-size: 45px;
+    }
+
+    .third-text {
+      color: white;
+      font-size: 15px;
+      line-height: 2;
+    }
+
+    .side-text {
+      position: absolute;
+      width: 100%;
+      display: table;
+      margin: inherit;
+    }
+
+    .margin-third-text {
+      margin-top: 15px;
+    }
+    .third-title-container{
+      margin-top: 15px;
+    }
   </style>
 </head>
 
@@ -328,17 +353,31 @@
       <img class="second-panel-image" style="position: absolute;" src="images/illustration-editor-desktop.svg">
     </div>
     <div class="third-container">
+      <div class="side-text">
+          <div class="third-title-container row">
+            <div class="col-md-6"></div>
+            <div class="third-title col-md-6">
+              State of the Art Infrastructure
+            </div>
+          </div>
+          <div class="row margin-third-text">
+            <div class="col-md-6"></div>
+            <div class="third-text col-md-4">
+              With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast
+              connectivity.
+              This ensures your site will load instantly, no matter where your readers are, keeping your site
+              competitive.
+            </div>
+          </div>
+      </div>
       <div class="circle-container">
         <img class="circle-svg" src="images/bg-pattern-circles.svg">
       </div>
       <div class="third-panel-gap third-absolute-container">
         <div class="inside-third-container">
-
         </div>
         <img class="phone-svg" src="images/illustration-phones.svg">
-
       </div>
-
     </div>
   </div>
   <!-- Product