responsive home banner

Author: Régis Melgaço de Andrade

css/style.css

@@ -13,7 +13,7 @@
 #index-banner {
   background-image: url("../images/banner.png"); /* The image used */
   background-color: #ffffff; /* Used if the image is unavailable */
-  background-position: center; /* Center the image */
+  background-position: bottom; /* Center the image */
   background-repeat: no-repeat; /* Do not repeat the image */
   background-size: contain; /* Resize the background image to cover the entire container */
 }

index.html

@@ -42,19 +42,21 @@
   </div>
 
   <!--   Main Section   -->
-  <div class="aspect-ratio-container">
-    <div class="aspect-ratio-content section no-pad-bot grey lighten-5" id="index-banner">
-      <div class="container">
+  <div class="section no-pad-bot grey lighten-5" id="index-banner">
+    <div id="banner-content" class="container">
+      <br><br>
+      <div class="row">
+        <h1 class="header grey-text text-darken-3">Python<br>Nordeste 2020</h1>
+        <h5 class="header col s12 light">Fortaleza, Ceará | 17, 18 e 19 de Julho</h5>
+      </div>
+      <div class="row center">
+        <a href="#evento" class="btn-floating btn-large waves-effect waves-light grey darken-3"><i class="fa fa-angle-double-down"></i></a>
+      </div>
+      <br><br>
+      <div class="hide-on-small-only">
         <br><br>
-        <h1 class="header grey-text text-darken-3">Python <br> Nordeste 2020</h1>
-        <div class="row">
-          <h5 class="header col s12 light">Fortaleza, Ceará | 17, 18 e 19 de Julho</h5>
-        </div>
         <br><br>
         <br><br>
-        <div class="row center">
-          <a href="#evento" class="btn-floating btn-large waves-effect waves-light grey darken-3"><i class="fa fa-angle-double-down"></i></a>
-        </div>
         <br><br>
       </div>
     </div>
@@ -128,7 +130,7 @@ <h4>
 
   <!--   About Section   -->
   <div class="parallax-container" style="height: auto">
-  <div class="parallax"><img src="images/pyne2019.jpg" style="background-size: cover; botton"></div>  
+  <div class="parallax"><img src="images/pyne2019.jpg" style="background-size: cover"></div>  
   <div class="container">
     <div id="evento" class="section white-text">
       <br><br>