Dia 16

Practicas/Practicas HTML/Repaso/css/style.css

@@ -8,9 +8,11 @@
   outline: none;
 }
 
+/*Para dar efecto al scroll*/
 html{ 
   scroll-behavior: smooth;
 }
+/***************************/
 
 body {
   background-image: url("../imagenes/fondo_plano.jpg");
@@ -23,10 +25,11 @@ body {
   position: sticky;
   top: 0;
   background-color: white;
-  padding:1em;
+  padding: 0.5em;
   display: flex;
   align-items: end;
   justify-content: space-between;
+  box-shadow: 0px 4px 5px 0px;
 }
 
 #cabecera img {
@@ -34,27 +37,20 @@ body {
   height: 60px;
 }
 
-/* nav {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  background-color: white;
-} */
-
-nav hr {
-  box-shadow: 0px 4px 5px 0px;
-}
-
 main {
   padding: 1em;
 }
 
+/* Para que el nav no oculte los elementos donde esta el ancla */
+/* en versiones modernas mejor utilizar   scroll-margin-top: 80px; */
 #servicios,
 #productos,
 #contacto {
-  padding-top: 100px;
-  margin-top: -20px;
+  /* padding-top: 100px;
+  margin-top: -20px; */
+  scroll-margin-top: 60px;
 }
+/*******************************************/
 
 .menu {
   padding-left: 1em;
@@ -86,21 +82,44 @@ h2 {
   color: #1a89dc;
 }
 
-table {
+
+
+/* Bloque definicion de las clases de tabla flex */
+.table_flex{
   width: 80%;
+  max-width: 1024px;
   margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
 }
 
-table tr td img {
-  width: 100%;
-  max-width: 300px;
+.table_flex_item, .table_flex_item_b{
+  flex-direction: column;
+  margin-bottom: 1em;
 }
-
-table tr td {
+.table_flex_item p {
+  padding: 0;
+  text-align: center;
   color: #1a89dc;
   font-weight: bold;
-  text-align: center;
 }
+.table_flex_item img {
+  max-width: 300px;
+  justify-content: center;
+}
+.table_flex_item_b img {
+  max-width: 230px;
+  justify-content: center;
+}
+.table_flex_item_b p {
+  padding: 0;
+  text-align: center;
+  color: #1a89dc;
+  font-weight: bold;
+}
+/*****************************************/
+
 
 dl {
   font-weight: bold;
@@ -133,6 +152,8 @@ iframe {
   box-sizing: border-box;
 }
 
+
+/* Definiciones para el boton de subir pagina*/
 #subircaja {
   position: fixed;
   right: 10px;
@@ -142,6 +163,7 @@ iframe {
   width: 64px;
   height: 64px;
 }
+/*********************************************/
 
 .lista_menu {
   /* display: inline; */
@@ -152,6 +174,7 @@ iframe {
   float: left;
 }
 
+/*Media Querys para aplicar a dispositivos moviles*/
 @media (max-width: 550px) {
   .lista_menu li {
     list-style-type: square;
@@ -164,8 +187,7 @@ iframe {
   #servicios,
   #productos,
   #contacto {
-    padding-top: 120px;
-    margin-top: -60px;
+    scroll-margin-top: 80px;
   }
 
   .contacto_info{