Fix background image pattern

.gitignore

@@ -18,3 +18,4 @@ profiles.clj
 *.ipr
 *.log
 resources/contracts
+node_modules

resources/public/dest/css/main.css

@@ -208,7 +208,14 @@ a {
   background-color: #57a7ed; }
 
 .header {
-  background-color: #57a7ed; }
+  background: linear-gradient(90deg, #57A7ED 50%, #54A3E8 50%); }
+
+.header-pattern {
+  background-image: url(../img/new-site/SOB_tile4@2x.png);
+  background-size: 20px;
+  background-position: left top;
+  background-repeat: repeat;
+  padding-bottom: 134px; }
 
 @media (min-width: 1230px) {
   .header {
@@ -217,8 +224,7 @@ a {
     border-radius: 10px;
     box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33);
     z-index: 900;
-    max-width: 1200px;
-    padding-bottom: 134px; } }
+    max-width: 1200px; } }
 
 .header__inner {
   display: -ms-flexbox;

resources/templates/index.html

@@ -57,6 +57,7 @@
   <div class="container-wrap">
     <div class="container">
       <div class="header">
+        <div class="header-pattern">
         <div class="header__inner">
           <div class="header-section header-section--left">
             <a class="logo" href="/">
@@ -109,6 +110,7 @@
         </div>
 
       </div>
+      </div>
 
 
       <div class="slides">
@@ -140,8 +142,7 @@
                     </div>
                     <h2>Find specialized talent worldwide</h2>
                     <div class="text">
-                      <p>To solve new challenges, you often need hard-to-find skillsets. If you can’t easily find local talent, Status Open Bounty makes it easy to leverage the best talent 
-                          in the world.</p>
+                      <p>To solve new challenges, you often need hard-to-find skillsets. If you can’t easily find local talent, Status Open Bounty makes it easy to leverage the best talent in the world.</p>
                     </div>
                   </div>
                 </div>
@@ -276,4 +277,3 @@
 </body>
 
 </html>
-

static_langing_page/dest/css/main.css

@@ -208,7 +208,14 @@ a {
   background-color: #57a7ed; }
 
 .header {
-  background-color: #57a7ed; }
+  background: linear-gradient(90deg, #57A7ED 50%, #54A3E8 50%); }
+
+.header-pattern {
+  background-image: url(../img/new-site/SOB_tile4@2x.png);
+  background-size: 20px;
+  background-position: left top;
+  background-repeat: repeat;
+  padding-bottom: 134px; }
 
 @media (min-width: 1230px) {
   .header {
@@ -217,8 +224,7 @@ a {
     border-radius: 10px;
     box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33);
     z-index: 900;
-    max-width: 1200px;
-    padding-bottom: 134px; } }
+    max-width: 1200px; } }
 
 .header__inner {
   display: -ms-flexbox;

static_langing_page/index.html

@@ -57,6 +57,7 @@
   <div class="container-wrap">
     <div class="container">
       <div class="header">
+        <div class="header-pattern">
         <div class="header__inner">
           <div class="header-section header-section--left">
             <a class="logo" href="/">
@@ -109,6 +110,7 @@
         </div>
 
       </div>
+      </div>
 
 
       <div class="slides">
@@ -140,8 +142,7 @@
                     </div>
                     <h2>Find specialized talent worldwide</h2>
                     <div class="text">
-                      <p>To solve new challenges, you often need hard-to-find skillsets. If you can’t easily find local talent, Status Open Bounty makes it easy to leverage the best talent 
-                          in the world.</p>
+                      <p>To solve new challenges, you often need hard-to-find skillsets. If you can’t easily find local talent, Status Open Bounty makes it easy to leverage the best talent in the world.</p>
                     </div>
                   </div>
                 </div>
@@ -276,4 +277,3 @@
 </body>
 
 </html>
-

static_langing_page/src/scss/header.scss

@@ -1,5 +1,13 @@
 .header {
-  background-color: #57a7ed;
+  background: linear-gradient(90deg, #57A7ED 50%, #54A3E8 50%);
+}
+
+.header-pattern {
+  background-image: url(../img/new-site/SOB_tile4@2x.png);
+  background-size: 20px;
+  background-position: left top;
+  background-repeat: repeat;
+  padding-bottom: 134px;
 }
 
 @media (min-width: 1230px) {
@@ -10,7 +18,7 @@
     box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33);
     z-index: 900;
     max-width: 1200px;
-    padding-bottom: 134px;
+
   }
 }