added background image

src/App.js

@@ -1,13 +1,12 @@
 import React, { Fragment } from "react";
-import Header from "./components/Header";
 import Info from "./components/Info";
 import Speakers from "./components/Speakers";
 import Tickets from "./components/Tickets";
 
 function App() {
   return (
     <Fragment>
-      <Header />
+      {/* <Header /> */}
       <Info />
       <br />
       <br />

src/components/Info.js

@@ -1,11 +1,22 @@
-import React from 'react'
+import React from "react";
+import Header from "./Header";
 
-function InfoContent(){
-    return(
-        <p className='text-center' aria-label="page-info">
-            some lots of text here
-        </p>
-    )
+function InfoContent() {
+  return (
+    <div className="masthead">
+      <Header />
+      <div className="container h-100">
+        <div className="row h-100 align-items-center">
+          <div className="col-12 text-center">
+            <h1 className="font-weight-light">DevConZM</h1>
+            <button type="button" className="btn btn-primary">
+              Register Now
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default InfoContent
+export default InfoContent;

src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-
+import './style.css'
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change

src/style.css

@@ -0,0 +1,21 @@
+.masthead {
+    height: 100vh;
+    min-height: 500px;
+    background-image: url('assets/background.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .product-holder {
+    position: relative;
+    display: block;
+}
+
+.plus-image {
+    left: 50%;
+    top: 50%;
+    position: absolute;
+    margin-top: -25px;
+    margin-left: -25px;
+}