From ee55bd6bb34723598016bd0a5a7a49dabcf60856 Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Wed, 11 Sep 2019 12:01:57 -0300
Subject: [PATCH] Cambio, ya no uso el sistema grid, ahora lo hice con flexbox.

---
 src/app/components/home/home.component.html | 59 ++++++++++++-----------------
 1 file changed, 25 insertions(+), 34 deletions(-)

diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 3cb0219..aa3228f 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -2,44 +2,35 @@
   <img
     src="{{apiImagenes}}/imagenes/homeBackground.jpg"
     class="background-image vh-100 w-100">
-  <div class="row m-0">
-    <div class="col p-0">
-      <div
-        class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select"
-        [routerLink]="['/inicio']">
+  <div
+    class="fade-in vh-100 d-flex align-content-between flex-wrap disable-user-select"
+    [routerLink]="['/inicio']">
 
-        <!-- HEADER -->
-        <div class="row m-0 w-100 bg-primary-gradient-horizontal">
-          <div class="col-6 bg-white p-3 rounded-bottom-right">
-            <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
-          </div>
-        </div>
-
-        <!-- INFO DE BIENVENIDA -->
-        <div class="row my-auto mx-0 h-75 w-100">
-          <div class="col-6 col-lg-8 my-auto p-3 h-100">
-            <div class="embed-responsive embed-responsive-16by9">
-              <iframe
-                class="embed-responsive-item rounded fade-in"
-                src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
-              </iframe>
-            </div>            
-          </div>
-          <div class="col-6 col-lg-4 text-center text-white my-auto">
-            <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
-            <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
-          </div>          
-
-        </div>
+    <!-- HEADER -->
+    <div class="vh-15 d-flex flex-row flex-wrap m-0 w-100 bg-primary-gradient-horizontal">
+      <div class="h-100 w-50 bg-white rounded-bottom-right">
+        <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
+      </div>
+    </div>
 
-        <!-- FOOTER -->
-        <div class="row m-0 w-100 bg-gray">
-          <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
-            <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
-          </div>
-        </div>
+    <!-- INFO DE BIENVENIDA -->
+    <div class="d-flex h-50 flex-row flex-wrap justify-content-around align-items-center w-100 m-3">
+      <iframe
+        class="w-50 h-100 rounded fade-in"
+        src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
+      </iframe>
+      <div class="w-auto text-center text-white">
+        <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
+        <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
+      </div>
+    </div>
 
+    <!-- FOOTER -->
+    <div class="vh-15 d-flex flex-row-reverse flex-wrap w-100 bg-gray">
+      <div class="h-100 w-50 bg-white rounded-top-left">
+        <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
       </div>
     </div>
+
   </div>
 </div>
-- 
1.9.1