Alinhando texto header com flexbox

Author: mvfsillva

_includes/banner.html

@@ -1,14 +1,17 @@
 <div id="index-banner" class="parallax-container" role="banner">
-    <div class="section no-pad-bot">
-      <div class="container">               
-        <div class="row center">          
-          <img src="/assets/img/gdglogo.png" class="logo-gdg" alt="google developer group">
-          <!-- <h4 class="header yellow-text">Google Developer Group</h4>
-          <h1 class="header yellow-text">Salvador</h1> -->
-        </div>
+  <div class="section no-pad-bot">
+    <div class="container">
+      <div class="row center">
+        <!-- <img src="/assets/img/gdglogo.png" class="logo-gdg" alt="google developer group"> -->
       </div>
     </div>
-    <div class="color-overlay"></div>        
-    <div class="parallax">
+  </div>
+  <div class="color-overlay">
+    <div class="row center flex-center">
+      <h2 class="header white-text">Google Developer Group</h2>
+      <h3 class="header white-text">Salvador</h3>
     </div>
-  </div>
+  </div>
+  <div class="parallax">
+  </div>
+</div>

_includes/header.html

@@ -5,6 +5,7 @@
         <a id="logo-container" href="/" class="brand-logo yellow-text">#{{ site.title_min }}</a>
         <ul class="right hide-on-med-and-down">
           {% for page in site.pages %}
+          a
             <li><a href="{{ site.url_dev }}{{ page.url }}">{{ page.title }}</a></li>
           {% endfor %}
         </ul>

_src/sass/_variables.scss

@@ -1,4 +1,4 @@
-$bg: #fcfcfc;
+$bg: #F6F4F8;
 $blue-gray: #263238; 
 $primary-color: #4285F4;
 $second-color: #FBBC05;

_src/sass/main.scss

@@ -65,4 +65,20 @@ body{
     width: 9999px;
     height: 1px;
     background: $blue-gray;
+}
+
+
+.flex-center {
+  color: white;
+  border:none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+  resize: vertical;
+  overflow: auto;
+  h2, h3{
+    margin: 0;
+    padding: 20px;
+  }
 }

assets/css/main.css

@@ -1,5 +1,5 @@
 body {
-  background-color: #fcfcfc; }
+  background-color: #F6F4F8; }
 
 .parallax-container {
   min-height: 100vh;
@@ -51,3 +51,16 @@ body {
   width: 9999px;
   height: 1px;
   background: #263238; }
+
+.flex-center {
+  color: white;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+  resize: vertical;
+  overflow: auto; }
+  .flex-center h2, .flex-center h3 {
+    margin: 0;
+    padding: 20px; }