do jumbotron instead

diff --git a/static/css/style.css b/static/css/style.css
index a4658469ee59dd5a4bc29a55bd1cd472416b6a60..4ec7478b3fa23d7850b0f145b6225b20c0beb93d 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -94,25 +94,6 @@ footer {
       margin-bottom: 15px;
   }
 
-  /* PICS */
-
-  .pic1, .pic2 {
-      overflow: hidden;
-      position: relative;
-      -webkit-background-size: cover;
-      -moz-background-size: cover;
-      -o-background-size: cover;
-      background-size: cover;
-  }
-
-  .pic1 {
-      background: url(../images/australia.jpeg) no-repeat center center;
-  }
-
-  .pic2 {
-      background: url(../images/conference.jpg) no-repeat center center;
-  }
-
   /* PAGE */
 
   section#main {
@@ -125,15 +106,19 @@ footer {
       padding-bottom: 4rem;
   }
 
-  .row.display-flex {
-      display: flex;
-      flex-wrap: wrap;
-  }
+   #banner {
+       background-image: url(../images/australia.jpeg);
+       background-position: center center;
+       background-size: cover;
+       background-repeat: no-repeat;
+     background-attachment: fixed;
+       color: #ffffff;
+       padding: 12em 0;
+       text-align: center;
+       -webkit-transform: translate3d(0,0,0);
+   }
 
-  .row.display-flex > [class*='col-'] {
-      display: flex;
-      flex-direction: column;
-  }
+  
 
   /* NAVIGATION */
 

diff --git a/templates/pages/index.html b/templates/pages/index.html
index ab1bd47e483c9f84fdbe96fe7a31147af9a79823..d30460e5356b0ecfa1abbdfc6cd29daa1fa1eec1 100644 (file)
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -3,6 +3,8 @@
 {%block pagetitle%}PgDU 2018{%endblock%}
 {%block content%}
 
+<section id="banner" class="jumbotron"></section>
+
 <div class="container" id="main">
 
   <div class="row display-flex">
@@ -18,11 +20,7 @@
         The name “Down Under” refers to Australia, due to its position in the lower latitudes of the southern hemisphere. Before Australia was discovered, it was called “Terra Australis Incognita” or the Unknown Southern Land.
       </p>
     </div>
-    <div class="col-lg-6 pic1"></div>
-  </div>
-
-  <div class="row display-flex">
-    <div class="col-lg-6 pic2"></div>
+    
     <div class="col-lg-6">
       <h2>Audience</h2>
       <p>