maxidato

Entradas

Mostrando las entradas de enero 19, 2025

Creo miniproyecto grid5

- enero 23, 2025

Aquí tienes un diseño de secciones apiladas verticalmente con espacios definidos utilizando Grid. Este diseño asegura que las secciones tengan una separación clara y ordenada: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid Apilado</title> <style> body { margin: 0; font-family: Arial, sans-serif; display: grid; grid-template-rows: repeat(5, minmax(100px, auto)); gap: 20px; /* Espacio entre secciones */ padding: 20px; background-color: #f4f7fa; } div { display: flex; justify-content: center; align-items: center; color: #fff; ...

Creo miniproyecto grid4

- enero 23, 2025

Aquí está el diseño completo para un dashboard moderno, asegurando que sea funcional y adaptable tanto en dispositivos grandes como pequeños: La idea es quitar el viewport para que se aprecie en celular <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Moderno</title> <style> body { margin: 0; font-family: Arial, sans-serif; display: grid; grid-template-areas: "header header header" "sidebar main main" "sidebar charts charts" "footer footer footer"; grid-template-rows: 80px auto auto 50px; grid-template-columns: 200px 1fr 1fr; gap: 10px; ...

Creo miniproyecto grid3

- enero 23, 2025

Aquí tienes un diseño tipo tablero con Grid, utilizando colores modernos y agradables. Las secciones tienen diferentes tamaños y se adaptan a dispositivos móviles: Desde celular pero con la opcion visualizacion de sitio web Asi se ve desde normal celular, no se aprecia el grid <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Diseño Tipo Tablero</title> <style> body { margin: 0; font-family: Arial, sans-serif; display: grid; grid-template-areas: "a a b b" "c d d e" "f f g h"; grid-template-rows: 150px 200px 150px; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; padding: 10px; height: 100vh; background-color: #f7f9fc; } div { display: flex; justify-content: cen...

Creo miniproyecto grid2

- enero 23, 2025

Aquí tienes un ejemplo de código HTML y CSS que utiliza Grid con áreas definidas, incluye un diseño con header , footer y bonitos colores. Este diseño es completamente adaptable a dispositivos móviles: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Plantilla con Grid</title> <style> body { margin: 0; font-family: Arial, sans-serif; display: grid; grid-template-areas: "header" "main" "aside" "footer"; grid-template-rows: auto 1fr auto auto; height: 100vh; background-color: #f7f9fc; } header { grid-area: header; background-color: #3c82d6; color: #fff; text-align: center; padding: 20px; } main { grid-area: main; background-...

Creo miniproyecto grid1

- enero 23, 2025

Aquí tienes un ejemplo básico de una galería en CSS Grid, con imágenes y títulos alineados debajo de cada imagen: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Galería en CSS Grid</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; padding: 20px; } .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; } .item { text-align: center; } .item img { width: 100%; height:...

Creo miniproyecto flexbox5

- enero 23, 2025

Aquí tienes un ejemplo en HTML con CSS integrado que utiliza Flexbox para apilar secciones verticalmente con espacios definidos entre ellas: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ejemplo Flexbox con Espacios Verticales</title> <style> /* Estilo general del cuerpo */ body { margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; /* Flexbox para que el contenedor ocupe todo el alto */ justify-content: center; /* Centrar horizontalmente el contenedor */ align-items: center; /* Centrar verticalmente el contenedor */ height: 100vh; /* Ocupa toda la altura de la ventana */ } /* Conte...

Creo miniproyecto flexbox4

- enero 23, 2025

Este código crea un menú desplegable básico en HTML y CSS. Aquí te detallo los componentes que lo forman: 1. Estructura del HTML Declaración inicial: <!DOCTYPE html> y <html lang="es"> definen que el documento es HTML5 y que el idioma es español. Encabezado <head>: <meta charset="UTF-8">: Define la codificación de caracteres como UTF-8 para soportar caracteres especiales. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que el diseño sea responsive. <title>: Establece el título de la página, "Menú Desplegable Simple". <style>: Contiene las reglas CSS para el diseño del menú. Cuerpo <body>: <div class="menu">: Contiene el menú principal con las opciones principales. Opciones principales: Cada <div class="menu-item"> representa una opción del menú. Ejemplo: "Inicio", "Servicios" y "Contacto". Submenús: ...

creo miniproyecto flexbox3

- enero 22, 2025

Aquí tienes un ejemplo claro de una rejilla simple con elementos distribuidos equitativamente utilizando Flexbox . Esto es ideal para crear diseños con filas de elementos uniformemente espaciados: https://maxidato.github.io/web/miniproyectos/flexbox3.html Explicación: Distribución equitativa con justify-content: space-between : Esto asegura que los elementos tengan un espacio igual entre ellos, dejando un espacio limpio en los extremos. Tamaño de los elementos dinámico : La propiedad flex: 1 1 calc(33.33% - 20px) hace que cada elemento ocupe aproximadamente un tercio del ancho del contenedor, descontando el espacio entre columnas ( gap ). Responsividad : Con las media queries, los elementos cambian su tamaño según el ancho de la pantalla: En pantallas medianas ( max-width: 768px ), ocupan la mitad del ancho ( calc(50% - 20px) ). En pantallas pequeñas ( max-width: 480px ), ocupan todo el ancho disponible. Diseño limpio y espacioso : Los espacios entre filas y columnas se manejan ...

diseño flexbox: columnas responsibas vs rejillas simples

- enero 22, 2025

La diferencia conceptual entre el ejemplo de rejilla simple con elementos distribuidos equitativamente y el de columnas responsivas con elementos alineados al centro radica en cómo se distribuyen y alinean los elementos dentro del contenedor. Aquí te lo explico: 1. Columnas responsivas con elementos alineados al centro Propósito : Crear un diseño vertical u horizontal donde los elementos estén centrados en su fila o columna y sean responsivos (se ajustan en pantalla pequeña ocupando todo el ancho). Distribución : Los elementos se centran horizontalmente dentro de su contenedor usando justify-content: center . Hay un enfoque más en la alineación central y el espaciado uniforme en filas o columnas. Responsividad : Se asegura que las columnas se apilen en pantallas pequeñas, ocupando el 100% del ancho del contenedor ( flex: 1 1 100% ). Uso típico : Menús, tarjetas alineadas en el centro, diseño de elementos que priorizan el centrado visual. 2. Rejilla simple con elementos distrib...

creo miniproyecto flexbox2

- enero 22, 2025

Aquí tienes un ejemplo simple y claro de columnas responsivas con elementos alineados al centro , usando Flexbox para la alineación y un diseño básico que se adapta a pantallas pequeñas (responsive): Explicación: Diseño de Flexbox : El contenedor .contenedor usa display: flex para crear un diseño flexible. flex-wrap: wrap permite que las columnas pasen a la siguiente línea si no caben en una fila. Alineación y espaciado : justify-content: center alinea las columnas al centro horizontalmente. gap: 20px agrega un espaciado uniforme entre las columnas. Columnas flexibles : La regla flex: 1 1 300px permite que cada columna tenga un ancho base de 300px, pero que se ajuste según el espacio disponible. max-width: 300px asegura que las columnas no crezcan demasiado en pantallas grandes. Diseño responsivo : La media query @media (max-width: 600px) asegura que, en pantallas pequeñas, cada columna ocupe el 100% del ancho disponible ( flex: 1 1 100% ). Este diseño funciona bien para ...

creo miniproyecto flexbox1

- enero 22, 2025

Vamos a hacer que el menú se vea más grande y más profesional, pero manteniendo el código simple. Esto incluirá un tamaño de fuente más grande, botones más espaciados y una mejor apariencia visual. Aquí va: https://maxidato.github.io/web/miniproyectos/flexbox1.html Cambios realizados: Mayor tamaño de letra : font-size: 20px en los enlaces para que sean más legibles. Botones más grandes : Se añadieron padding: 10px 20px a los enlaces para que parezcan botones amplios y cómodos de presionar. Diseño moderno : Fondo oscuro para el menú ( background-color: #333 ) y texto blanco ( color: white ). Bordes redondeados en los enlaces con border-radius: 5px . Un efecto al pasar el cursor con transition: background-color 0.3s . Espaciado más amplio : Aumenté margin-right a 30px para separar los elementos. Este menú es más visible, atractivo y profesional, sin complicar el código.

creo miniproyectos body5

- enero 22, 2025

Aquí tienes un diseño de cuerpo HTML utilizando colores vibrantes para un enfoque más dinámico y juvenil. Este diseño incluye tonos brillantes y tipografía audaz para transmitir energía. https://maxidato.github.io/web/miniproyectos/body5.html Características del Diseño Fondo vibrante: Utiliza un degradado brillante de naranja y amarillo , evocando energía y vitalidad. Esto le da al diseño una estética juvenil y moderna. Tipografía: Se usó una fuente moderna y limpia ( Poppins ). El título ( h1 ) utiliza un degradado en el texto para mayor impacto visual. Botones dinámicos: Los botones tienen un diseño redondeado y transiciones suaves en el color y tamaño cuando se pasa el cursor por encima. Texto juvenil: Mensajes claros, amigables y motivadores para conectar con una audiencia joven. Responsivo y limpio: Un diseño centrado, con elementos equilibrados que se adaptan bien a diferentes tamaños de pantalla

creo miniproyectos body4

- enero 22, 2025

Aquí tienes un diseño inspirado en revistas, con secciones bien definidas. Este estilo utiliza un diseño de cuadrícula (grid) para dividir el contenido en áreas claras, similar a cómo se presentan los artículos en revistas físicas. pagina web Características del Diseño Encabezado (Header): Un título principal en la parte superior, centrado y llamativo. Fondo oscuro para darle contraste con el resto del diseño. Barra lateral (Sidebar): Incluye enlaces a artículos destacados, simulando la típica barra lateral de revistas físicas. Fondo claro y bordes redondeados para darle un toque moderno. Sección Principal (Main): Área dedicada al artículo principal. Estilo minimalista con un fondo blanco y algo de sombra para que resalte sobre el fondo general. Pie de página (Footer): Espacio para derechos de autor e información adicional. Diseño Responsivo: Gracias a la cuadrícula de CSS (grid), el diseño se adapta bien a diferentes tamaños de pantalla.

seccion hero, que es en frontend?

- enero 22, 2025

a "sección hero" (o simplemente "hero") es un término muy utilizado en diseño web y desarrollo frontend. No tiene nada que ver con "héroes" literales, sino que se refiere a la sección destacada o principal de una página web. ¿Por qué se llama "hero"? El término proviene del diseño gráfico y web, donde esta sección "heroica" tiene el objetivo de captar la atención del usuario de manera inmediata. Es como el protagonista de la página, la primera impresión visual que ayuda a comunicar la idea principal o propósito del sitio. Características de la sección "hero": Ubicación prominente: Suele estar en la parte superior de la página (above the fold). Contenido clave: Un título destacado o "headline" que resume el propósito de la página. Texto descriptivo o un subtítulo. Botones de llamada a la acción (CTAs, como "Contactar" o "Ver más"). Estética llamativa: Suele incluir imágenes de fondo, videos, ...

creo miniproyectos body3

- enero 22, 2025

un diseño con imágenes de fondo y degradados que resaltan distintas secciones del contenido. El enfoque está en crear un diseño visualmente atractivo utilizando fondos y transiciones suaves. link de la pagina web Características del diseño: Sección Hero: Imagen de fondo de alta calidad que ocupa toda la pantalla. Degradado semitransparente superpuesto ( linear-gradient ) para mejorar la legibilidad del texto. Efectos de sombra en el texto y los botones para destacar los elementos clave. Botón llamativo: Color de fondo vibrante ( #ff5722 ) con efecto hover que cambia de color y da la sensación de "elevación" ( transform ). Sección con degradado: Fondo en degradado horizontal que utiliza colores cálidos ( #ff5722 a #ff9800 ). Texto centrado para mantener la claridad y el equilibrio visual. Diseño adaptativo: Uso de unidades relativas y flexbox para asegurar que los elementos se vean bien en pantallas de diferentes tamaños.

creo miniproyectos body2

- enero 22, 2025

n diseño enfocado en una estética oscura , que resalta los elementos de texto y botones. El diseño usa un esquema de colores oscuros con detalles contrastantes para destacar los elementos interactivos: link web Características del diseño: Colores oscuros: Fondo principal del <body> en negro grisáceo ( #121212 ). Fondo del contenedor en gris más claro ( #1e1e1e ). Contraste en los elementos: Texto en tonos claros ( #e0e0e0 , #ffffff , #bbbbbb ) para destacar sobre el fondo oscuro. Botón en un color naranja brillante ( #ff9800 ) que contrasta y capta la atención. Interactividad: Efecto hover en el botón con cambio de color y elevación para hacerlo visualmente más atractivo. Diseño responsivo: Todo centrado en el viewport con flexbox .

creo mini proyectos body1

- enero 22, 2025

body1: https://maxidato.github.io/web/miniproyectos/body1.html Características del diseño: 1. Colores neutros: * Fondo gris claro para la página general (#f7f7f7). * Fondo blanco para el contenedor principal (#fff). * Texto en tonos oscuros (#333 y #222). 2. Tipografía moderna: * Se utiliza la fuente "Arial", que es limpia y minimalista. 3. Diseño responsivo: * Uso de flexbox en el <body> para centrar el contenido tanto vertical como horizontalmente. 4. Detalles interactivos: * Botón con efecto hover para mejorar la experiencia del usuario.

Si usas flexbox usar overflow

- enero 21, 2025

overflow: hidden; Osea esta propiedad en el contenedor hace que se corte y no haya desbordamiento Ejemplo:

notion dicen que es como google keep de notas pero mas editable

- enero 20, 2025

Luego probare, ya que x.com no me gusta