From f813cfb0393dfb1a48c64fedcc87126b8ecad5fa Mon Sep 17 00:00:00 2001
From: David Vales <david.tab2018@gmail.com>
Date: Sun, 3 Mar 2024 17:25:20 -0600
Subject: [PATCH] =?UTF-8?q?actualizaciones=20de=20dise=C3=B1o=20y=20funcio?=
 =?UTF-8?q?nes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

actualzacion de vista movil en ubicacion y oferta educativa
---
 home/data/img/mapa.png | Bin 0 -> 4594 bytes
 home/index.html        | 102 +++++++++++++++++++++++++++++++++++++----
 home/src/css/body.css  |   2 +-
 3 files changed, 93 insertions(+), 11 deletions(-)
 create mode 100644 home/data/img/mapa.png

diff --git a/home/data/img/mapa.png b/home/data/img/mapa.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb9a467fb7a003a03eb06c8b5907b4f2122e59dd
GIT binary patch
literal 4594
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

literal 0
HcmV?d00001

diff --git a/home/index.html b/home/index.html
index 6d18646..cfa0ea0 100644
--- a/home/index.html
+++ b/home/index.html
@@ -107,9 +107,9 @@
                         <!-- Botones del header, WhatsApp y SM Educamos -->
                         <div class="right item">
                             <div class="menu">
-                                <a href="https://institutotabasco.educamos.com" class="ui white button" target="_blank">
-                                    <i class="book icon"></i>
-                                    Educamos
+                                <a href="https://wa.me/+529933128843" class="ui green circular button" target="_blank">
+                                    <i class="whatsapp icon"></i>
+                                    WhatsApp
                                 </a>
                             </div>
                         </div>
@@ -231,11 +231,12 @@ <h1 class="ui header">
                             </h1>
                         </div>
                     </div>
-                    <div class="row">
+                    <!-- Fila es solo para computadora -->
+                    <div class="computer only row">
                         <div class="column">
                             <div id="ofertaPrimaria" class="ui inverted right floated circular segment">
                                 <h1 class="centrado header">Primaria</h1>
-                                <h2 class="centrado subtitle">Lo mejor para empezar el desarrollo</h2>
+                                <h2 class="centrado subtitle">Educación de calidad para el desarrollo de los niños</h2>
                                 <div class="ui special cards">
                                     <div class="ui centered card">
                                         <div class="blurring dimmable image">
@@ -277,6 +278,55 @@ <h2 class="centrado subtitle">Que la juventud sea aprovechada al máximo</h2>
                             </div>
                         </div>
                     </div>
+                    <!-- Fila sólo para móviles -->
+                    <div class="mobile only row">
+                        <div class="column">
+                            <div class="ui special cards">
+                                <div class="ui centered red card">
+                                    <div class="blurring dimmable image">
+                                        <div class="ui dimmer">
+                                            <div class="content">
+                                                <div class="center">
+                                                    <div class="ui inverted button">Saber Más</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="ui image">
+                                            <img src="./data/img/primaria1.jpg"/>
+                                        </div>
+                                    </div>
+                                    <div class="content">
+                                        <a href="#" class="centrado header">Primaria</a>
+                                    </div>
+                                    <div class="centrado extra content">
+                                        <i class="users icon"></i>
+                                        Educación de calidad para el desarrollo de los niños
+                                    </div>
+                                </div>
+                                <div class="ui centered red card">
+                                    <div class="blurring dimmable image">
+                                        <div class="ui dimmer">
+                                            <div class="content">
+                                                <div class="center">
+                                                    <div class="ui inverted button">Saber Más</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="ui image">
+                                            <img src="./data/img/primaria1.jpg"/>
+                                        </div>
+                                    </div>
+                                    <div class="content">
+                                        <a href="#" class="centrado header">Secundaria</a>
+                                    </div>
+                                    <div class="centrado extra content">
+                                        <i class="users icon"></i>
+                                        Que la juventud sea aprovechada al máximo
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <!-- div de visión y misión -->
@@ -361,8 +411,10 @@ <h1>Plataforma educativa</h1>
                     </div>
                 </div>
             </div>
+            <!-- Sección de ubicación -->
             <div class="ui center aligned teal inverted stackable segment">
-                <div class="ui grid container">
+                <!-- la sección de ubicación que es sólo para pc -->
+                <div class="computer only ui doubling grid container">
                     <div class="two column row">
                         <div class="column">
                             <h1 class="header">🗺️ Ubícanos</h1>
@@ -402,6 +454,37 @@ <h1 class="arcoiris header">
                         </div>
                     </div>
                 </div>
+                <div class="mobile only ui doubling grid">
+                    <div class="ui container">
+                        <h1 class="ui center aligned header">
+                            <img src="./data/img/mapa.png"></img>
+                            <div class="content">
+                                <p class="sangre">¡Ubícanos!</p>
+                            </div>
+                            <h3 class="subtitle">Hidalgo No. 2, Alcaldía Tlalpan</h3>
+                            <h3 class="subtitle">CDMX, C.P. 14000</h3>
+                        </h1>
+                        <div class="ui vertical segment">
+                            <iframe width="330" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=-99.16728883981708%2C19.287995519675135%2C-99.16503578424455%2C19.289838555672993&amp;layer=mapnik&amp;marker=19.288917040267616%2C-99.16616231203079" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=19.28892&amp;mlon=-99.16616#map=19/19.28892/-99.16616&amp;layers=N">Ver el mapa más grande</a></small>
+                        </div>
+                        <h1 class="arcoiris header">
+                            ¡Síguenos en todas nuestras redes sociales y
+                            entérate de todo!
+                        </h1>
+                        <div>
+                            <a class="ui circular facebook button" href="#"><i class="ui facebook icon"></i>Facebook</a>
+                            <div class="ui hidden divider"></div>
+                        </div>
+                        <div>
+                            <a class="ui circular pink button" href="#"><i class="ui instagram icon"></i>Instagram</a>
+                            <div class="ui hidden divider"></div>
+                        </div>
+                        <div>
+                            <a class="ui circular red button" href="#"><i class="ui youtube icon"></i>YouTube</a>
+                            <div class="ui hidden divider"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
             <!-- Píe de página -->
             <div id="pie" class="ui inverted vertical footer segment">
@@ -431,11 +514,10 @@ <h4 class="ui inverted header">Colegio Hernán Cortés – Sitio Web</h4>
                     </div>
                     <div class="ui inverted section divider"></div>
                     <img src="./data/ui/logo.png" class="ui centered mini image"/>
+                    <div>Colegio Hernán Cortés</div>
                     <div class="ui horizontal inverted small divided link list">
-                        <a class="item" href="#">Site Map</a>
-                        <a class="item" href="#">Contact Us</a>
-                        <a class="item" href="#">Terms and Conditions</a>
-                        <a class="item" href="#">Privacy Policy</a>
+                        <a class="item" href="#">Contáctanos</a>
+                        <a class="item" href="#">Política de Privacidad</a>
                     </div>
                 </div>
             </div>
diff --git a/home/src/css/body.css b/home/src/css/body.css
index 155f7f2..425d20c 100644
--- a/home/src/css/body.css
+++ b/home/src/css/body.css
@@ -76,7 +76,7 @@ body {
 .thirdhead.segment {
     min-height: 100px;
     padding: 1em 0em;
-    margin-bottom: ;
+    margin-bottom: 1em;
 }
 
 .masthead .logo.item img {