added header section, tied up css

css/styles.css

@@ -2,9 +2,55 @@
     display: flex;
     align-items: center;
     box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
-    width: 100vh;
+    width: 100vw;
+    position: fixed;
+    padding: 5px 70px;
+    background-color: #fff;
 }
 
 .sbi-logo {
     max-width: 150px;
+
+}
+
+.header-section {
+    display: flex;
+    height: 100vh;
+    background-image: url("../img/synergy.jpg");
+    background-size: cover;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+}
+
+.header-contents {
+    background-color: rgba(255, 255, 255, 0.7);
+    padding: 5%;
+    display: flex;
+    width: 80vh;
+    flex-direction: column;
+}
+/* Button code lifted from https://codepen.io/Colt/pen/RwWbKee*/
+.header-button {
+    border-radius:0;
+    padding: 5px;
+    text-align: center;
+  text-decoration: none;
+  font-weight: 800;
+  font-size: 1em;
+  text-transform: uppercase;
+  color: #fff;
+  border-radius: 6px;
+  margin: 10px;
+  padding: 1em 3em;
+  background-size: 300% 300%;
+  color: white;
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  background-image: linear-gradient(to right, #3694c0 0%, #94ddf3 50%, #068abe 100%);
+  transition: 0.5s;
+}
+
+.header-button:hover {
+        background-position: right center;
 }

index.html

@@ -14,5 +14,18 @@
             <img class="sbi-logo" src="./img/sbi-logo.png"></i>
         </a>
     </nav>
+    <div class="container">
+        <section class="header-section">
+            <div class="header-contents">
+            <p class="header-text">
+                Serious Business International
+                </p>
+                <p class="header-subtext">
+                 Your Headquarters for Intra-national Serious Business (Internationally)
+            </p>
+            <button class="header-button">Would you like to know more?</button>
+            </div>
+        </section>
+    </div>
 </body>
 </html>