Add css for banner text

joshsoftware · Dec 24, 2020 · 4e12eee · 4e12eee
1 parent 47a7de1
commit 4e12eee
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/src/assets/stylesheets/pages/_home.scss b/src/assets/stylesheets/pages/_home.scss
@@ -674,10 +674,45 @@
   }
   @include media-breakpoint-down(sm) {
     min-height: 150px;
-    max-height: 150px
+    max-height: 150px;
+  }
+}
+
+#page-wrap {
+  @include media-breakpoint-down(sm) {
+    padding-top: 54px;
+  }
+  @include media-breakpoint-up(sm) {
+    padding-top: 76px;
   }
 }
 
 .bg-light-gray {
   background-color: $gray-96;
 }
+
+.banner-wrapper-mb {
+  height: 384px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: transparent url('../images/home/banner_mb.png') no-repeat top center;
+  background-size: cover;
+  flex-direction: column;
+  padding-bottom: 48px;
+}
+
+.banner-wrapper {
+  height: 384px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: transparent url('../images/home/banner.png') no-repeat top center;
+  background-size: cover;
+  flex-direction: column;
+  padding-bottom: 48px;
+}
+
+.btn-banner-contact-us {
+
+}
diff --git a/src/components/home/HomePageBanner.js b/src/components/home/HomePageBanner.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import { Row, Col } from 'reactstrap';
-import Banner from '../../assets/images/home/banner.png';
-import BannerMob from '../../assets/images/home/banner_mb.png';
 import Santa from '../../assets/images/home/santa.png';
 import Media from 'react-media';
 
@@ -11,12 +9,23 @@ const HomePageBanner = () => {
       {matches =>
         matches ? (
           <section className="bg-light-gray justify-content-center">
-            <img src={BannerMob} alt="banner-mobile" />
-
-            <div className="text-center">
+            <div className="banner-wrapper-mb">
+                <h2 className="font-weight-bold text-white">
+                  INNOVATION & DISRUPTION
+                </h2>
+                <h5 className="font-weight-bold text-white">
+                  is the way We change the Game
+                </h5>
+                <a href="/contact_us" className="btn btn-xs btn-danger rounded-pill mb-1 btn-banner-contact-us">
+                  Contact us
+                </a>
+                <h6 className="text-white">
+                    to change yours
+                </h6>
+            </div>
+            <div className="text-center banner-text" style={{ marginTop: '-4px' }}>
               <img src={Santa} alt="santa-mobile" />
             </div>
-
             <Row className="justify-content-center m-auto p-md-3">
               <Col>
                 <p className="text-center disruption-margin">
@@ -29,23 +38,22 @@ const HomePageBanner = () => {
           </section>
         ) : (
           <section className="bg-light-gray justify-content-center">
-            <img src={Banner} alt="banner" />
-            <div className="text-center">
+            <div className="banner-wrapper">
                 <h2 className="font-weight-bold text-white">
                   INNOVATION & DISRUPTION
                 </h2>
-                <h5 className="text-white">
+                <h5 className="font-weight-bold text-white">
                   is the way We change the Game
                 </h5>
-                <a href="/contact_us" className="btn btn-danger rounded-pill btn-xs">
+                <a href="/contact_us" className="btn btn-danger rounded-pill mb-1 btn-banner-contact-us">
                   Contact us
                 </a>
                 <h6 className="text-white">
                     to change yours
                 </h6>
             </div>
-            <div className="text-center">
-              <img src={Santa} alt="santa-mobile" />
+            <div className="text-center" style={{ marginTop: '-4px' }}>
+              <img src={Santa} alt="santa" />
             </div>
             <Row className="justify-content-center m-auto p-md-3">
               <Col>

diff --git a/src/components/home/index.js b/src/components/home/index.js
@@ -14,7 +14,6 @@ const Home = () => {
 
   return (
     <>
-      <div className="main-container" />
       <main id="page-wrap">
         <HomePageBanner />
         <DomainExpertise />