Fixed the font family and styles

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

Author: Anita-ihuman

docs/_sass/about.scss

@@ -5,52 +5,49 @@
   margin: 0;
 }
 .hero-section-smp {
-  width: 85%;
+  width: 88%;
   height: 100%;
 }
-.whyGetnighthawk-text {
-  font-size: 20px;
+
+.hero-section_content,
+.text {
+  font-size: 21px;
   text-align: left;
+  padding-left: 0px;
+  padding-top: 10px;
+  padding: 0px 40px;
+  line-height: 32px;
+  align-items: center;
 }
-.hero-section_content .text {
-  font-weight: normal;
-  font-size: 20px;
-  text-align: left;
-  padding: 10px 95px;
-  font-family: Open Sans;
+.hero-section_bold {
+  font-family: Qanelas Soft;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 45px;
+  line-height: 50px;
+  text-align: center;
+  color: #000000;
+  padding: 20px 0px;
 }
+
 .whyGetnighthawk {
   justify-content: space-around;
   display: flex;
-  padding-top: 40px;
-  padding-left: 30px;
+  margin-top: 70px;
+  padding-left: 85px;
+  align-self: center;
 }
 
-.whyGetnighthawk .text {
-  padding: 0px 30px;
-  text-align: left;
-  font-family: Open Sans;
-  font-size: 20px;
-}
-.nighthawk-meshery-fig {
+.whyGetnighthawk,
+.text2 {
+  font-size: 21px;
+  line-height: 32px;
   display: flex;
-  justify-content: center;
-  padding-top: 40px;
-}
-.figbox {
-  margin: 0px 40px;
-  padding: 20px 0px;
-}
-.nighthawk-meshery-fig img {
-  padding: 0px 30px;
-  object-fit: cover;
-  width: 450px;
-  height: 100%;
-  border-radius: 20px;
+  text-align: left;
 }
 
-.whyGetnighthawk-bold h4 {
-  width: 430px;
+.whyGetnighthawk-bold {
+  width: 400px;
   font-family: Qanelas Soft;
   font-style: normal;
   font-weight: 600;
@@ -60,27 +57,51 @@
   overflow-wrap: normal;
 }
 
-.hero-section_bold {
-  font-family: Qanelas Soft;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 45px;
-  line-height: 50px;
-  text-align: center;
-  color: #000000;
+.nighthawk-meshery-fig {
+  display: flex;
+  justify-content: center;
+  padding-top: 40px;
+}
+.figbox {
+  margin: 0px 60px;
   padding-top: 30px;
+  width: 450px;
+}
+.figbox2 {
+  margin: 0px 10px;
+  padding: 10px 0px;
+  width: 450px;
+}
+.nighthawk-meshery-fig,
+img {
+  text-align: center;
+  border-radius: 20px;
 }
 
 @media only screen and (max-width: 768px) {
   .whyGetnighthawk {
     flex-wrap: wrap;
     padding: 50px;
+    text-align: center;
+  }
+  .whyGetnighthawk .text2 {
+    padding: 30px;
+    text-align: left;
   }
   .nighthawk-meshery-fig {
     flex-wrap: wrap;
     padding: 0px;
   }
   .hero-section {
-    margin: 20px;
+    margin: 100px;
+  }
+  .figbox {
+    width: 100%;
+    padding: 30px;
+  }
+  .figbox2 {
+    width: 80%;
+    padding: 30px;
+    margin: 0;
   }
 }

docs/pages/about.html

@@ -17,11 +17,12 @@
       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
+    <link href="http://fonts.cdnfonts.com/css/qanelas-soft" rel="stylesheet" />
+
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap"
       rel="stylesheet"
     />
-
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css" />
 
     <script
@@ -34,6 +35,41 @@
       integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
       crossorigin="anonymous"
     />
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
+      integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
+      integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css"
+    />
+    <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
+    <script
+      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <style>
     body {
@@ -54,7 +90,7 @@
       <div>
         <h3 class="hero-section_bold">What is Nighthawk?</h3>
       </div>
-      <div>
+      <div class="-text">
         <p class="text">
           Nighthawk is growing in popularity, but the core project only builds
           to one architecture / one Docker image. Recently, Nighthawk is being
@@ -67,12 +103,12 @@ <h3 class="hero-section_bold">What is Nighthawk?</h3>
       </div>
     </article>
     <article class="whyGetnighthawk">
-      <div class="whyGetnighthawk-bold">
-        <h4>Why GetNighthawk?</h4>
+      <div >
+        <h4 class="whyGetnighthawk-bold">Why GetNighthawk?</h4>
       </div>
 
       <div>
-        <p class="text">
+        <p class="text2">
           Nighthawk is growing in popularity, but the core project only builds
           to one architecture / one Docker image. Recently, Nighthawk is being
           improved so that it can be horizontally scalable - such that multiple
@@ -89,15 +125,18 @@ <h4>Why GetNighthawk?</h4>
           src="{{ site.baseurl }}/assets/images/nighthawk-meshery.png"
           alt="nighthawk-meshery"
           object-fit="cover"
+     
         />
       </figure>
-      <figure class="figbox">
+      <figure class="figbox2"  >
         <img
           src="{{ site.baseurl }}/assets/images/latency-at-scale.png"
           alt="latency-at-scale"
           object-fit="cover"
+          
         />
       </figure>
     </div>
   </section>
+  '/'
 </html>