Created the about secton layout

Signed-off-by: Anita-ihuman <[email protected]>

Author: Anita-ihuman

docs/_sass/about.scss

@@ -1,50 +1,56 @@
-.hero-section-smp {
-}
-.hero-section-header {
-  margin: 0;
-}
 .hero-section {
   padding: 0px;
 }
+.hero-section_header {
+  margin: 0;
+}
 .hero-section-smp {
-  width: 80%;
+  width: 85%;
   height: 100%;
 }
-.text {
+.whyGetnighthawk-text {
   font-size: 20px;
-
   text-align: left;
 }
-.hero-main .text {
-padding: 0 100px;
+.hero-section_content .text {
+  font-weight: normal;
+  font-size: 20px;
+  text-align: left;
+  padding: 10px 95px;
+  font-family: Open Sans;
 }
 .whyGetnighthawk {
-  flex-direction: row;
+  justify-content: space-around;
   display: flex;
   padding-top: 40px;
+  padding-left: 30px;
 }
 
 .whyGetnighthawk .text {
-  padding: 0px 100px;
+  padding: 0px 30px;
+  text-align: left;
+  font-family: Open Sans;
+  font-size: 20px;
 }
-.fig {
+.nighthawk-meshery-fig {
   display: flex;
   justify-content: center;
   padding-top: 40px;
 }
-.figbox{
+.figbox {
   margin: 0px 40px;
-
+  padding: 20px 0px;
 }
-.fig img {
+.nighthawk-meshery-fig img {
   padding: 0px 30px;
   object-fit: cover;
   width: 450px;
   height: 100%;
   border-radius: 20px;
 }
-.whyGetnighthawk-bold {
-  padding: 40px 100px;
+
+.whyGetnighthawk-bold h4 {
+  width: 430px;
   font-family: Qanelas Soft;
   font-style: normal;
   font-weight: 600;
@@ -54,7 +60,7 @@ padding: 0 100px;
   overflow-wrap: normal;
 }
 
-.hero-section-header-bold {
+.hero-section_bold {
   font-family: Qanelas Soft;
   font-style: normal;
   font-weight: bold;
@@ -64,3 +70,20 @@ padding: 0 100px;
   color: #000000;
   padding-top: 30px;
 }
+
+@media only screen and (max-width: 768px) {
+  .whyGetnighthawk {
+    flex-wrap: wrap;
+    padding: 50px;
+  }
+  .nighthawk-meshery-fig {
+  flex-wrap: wrap;
+    padding: 0px;
+
+}
+.hero-section {
+  
+  margin: 20px;
+}
+
+}

docs/pages/about.html

@@ -43,16 +43,16 @@
   <br /><br /><br /><br /><br /><br />
 
   <section class="hero-section">
-    <figure class="hero-section-header">
+    <figure class="hero-section_header">
       <img
         src="{{ site.baseurl }}/assets/images/smp-standard.png"
         alt="smp-standard"
         class="hero-section-smp"
       />
     </figure>
-    <article class="hero-main">
-      <div class="hero-section-">
-         <h3 class="hero-section-header-bold">What is Nighthawk?</h3>
+    <article class="hero-section_content">
+      <div>
+        <h3 class="hero-section_bold">What is Nighthawk?</h3>
       </div>
       <div>
         <p class="text">
@@ -83,21 +83,19 @@ <h4>Why GetNighthawk?</h4>
         </p>
       </div>
     </article>
-    <div class="fig">
+    <div class="nighthawk-meshery-fig">
       <figure class="figbox">
         <img
           src="{{ site.baseurl }}/assets/images/nighthawk-meshery.png"
           alt="nighthawk-meshery"
-           object-fit="cover" 
-             width='450px'
+          object-fit="cover"
         />
       </figure>
       <figure class="figbox">
         <img
           src="{{ site.baseurl }}/assets/images/latency-at-scale.png"
           alt="latency-at-scale"
-            object-fit="cover" 
-  width='450px'
+          object-fit="cover"
         />
       </figure>
     </div>