Ensaladas
basico---1
.contenedor { margin: auto; display: flex; flex-wrap: wrap; } .sub-div { margin: 3px; text-align: center; font-size: 1rem; width: 31%; box-sizing: border-box; padding: 3px 0 4px 0; border: 5px solid rgba(255, 255, 255, 0.46); height: 100px; max-height: 150px; background: #9900ff; border-radius: 10px; /* Esquinas redondeadas */ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); } .sub-div a { font-size: 1rem; color:azure; text-decoration: none; } .titulo tr{ background: linear-gradient(180deg, #e699ff, #730099); color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); mix-blend-mode: multiply; font-size: 1.35rem; line-height: 1rem; padding: 0.15rem; } @media (min-width: 80px){ body { margin: 0; align-content: center; } hr { border: 0.5px solid; color: #f2ccff; margin: 5px; padding: 0; } h4 { letter-spacing: -0.05em; word-spacing: -0.05em; text-align: left; display: block; vertical-align: top; font-size: 1.25rem; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: 400; } .titulo tr{ letter-spacing: -0.05em; line-height: 1rem; padding: 0.15rem; font-size: 1.35rem; background: linear-gradient(180deg, #e699ff, #730099); color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); mix-blend-mode: multiply; } h5 {text-align: left; letter-spacing: -0.05em; word-spacing: -0.05em; display: block; vertical-align: top; font-size: 0.9rem; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: normal; } h6 {letter-spacing: -0.05em; word-spacing: -0.05em; display: block; vertical-align: baseline; font-size: 0.95rem; /*margin: 15px 0; padding-left: 8px;*/ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bolder; } body { padding: 0; text-align: center; } h2, h3 { color: #464646; } section { margin-bottom: 40px; } @media screen and (max-width: 768px) { .input { font-size: 2rem; line-height: 2.5rem; min-width: 100%; max-width: 100%; padding: 1rem; margin: 0; } .bg { background-image: url("images/agotado.jpg"); background-position: top; background-size: contain; } h6 { display: block; vertical-align: top; font-size: 0.95rem; /*margin-right: 15px; padding-left: 8px;*/ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bolder; } } .estadoAgotado { background: url("images/agotado.jpg") repeat; background-position: top; background-size: contain; }
azul---2
.contenedor { margin: auto; display: flex; flex-wrap: wrap; } .sub-div { margin: 3px; text-align: center; font-size: 1rem; width: 31%; box-sizing: border-box; padding: 35px 0 40px 0; border: 5px solid rgba(255, 255, 255, 0.46); height: 100px; max-height: 150px; background: blue; border-radius: 10px; /* Esquinas redondeadas */ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); } .sub-div a { font-size: 1rem; color:azure; text-decoration: none; } .titulo tr{ letter-spacing: -0.05em; background: blue; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); mix-blend-mode: multiply; font-size: 1.35rem; line-height: 1.75rem; padding: 0.15rem; } @media (min-width: 80px){ body { margin: 0; align-content: center; } hr { border: 0.5px solid; color: #f2ccff; margin: 5px; padding: 0; } h4 { letter-spacing: -0.05em; word-spacing: -0.05em; text-align: left; display: block; vertical-align: top; font-size: 1.25rem; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: 400; } .titulo tr{ letter-spacing: -0.05em; line-height: 1.75rem; padding: 0.15rem; font-size: 1.35rem; background: blue; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); mix-blend-mode: multiply; } h5 {text-align: left; letter-spacing: -0.05em; word-spacing: -0.05em; display: block; vertical-align: top; font-size: 0.9rem; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: normal; } h6 {letter-spacing: -0.05em; word-spacing: -0.05em; display: block; vertical-align: baseline; font-size: 0.95rem; /*margin: 15px 0; padding-left: 8px;*/ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bolder; } body { padding: 0; text-align: center; } h2, h3 { color: #464646; } section { margin-bottom: 40px; } /* @media screen and (max-width: 768px) { .input { font-size: 2rem; line-height: 2.5rem; min-width: 100%; max-width: 100%; padding: 1rem; margin: 0; } .bg { background-image: url("images/agotado.jpg"); background-position: top; background-size: contain; } h6 { display: block; vertical-align: top; font-size: 0.95rem; /*margin-right: 15px; padding-left: 8px;*/ /* margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bolder; } }*/ .estadoAgotado { background: url("images/agotado.jpg") repeat; background-position: top; background-size: contain; }
auto 3---3
.contenedor { display: grid; grid-template-columns: repeat(3, 1fr); /* Tres columnas */ width:100%; min-width: 360px; max-width: 900px; margin: auto; padding: 5px;; background-color: #f0f0f0; /* Fondo claro */ } .sub-div { margin: 5px; text-align: center; font-size: 0.8rem; width: 80%; padding: 5px; border: 3px solid #cccccc; /* Borde más sutil */ background: #ff9999; /* Fondo rosado */ border-radius: 15px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .sub-div a { color: #333333; /* Color de texto más oscuro */ text-decoration: underline; /* Subrayar enlaces */ } .titulo tr { background: #ff6666; /* Fondo rojizo */ color: black; /* Texto en negro */ text-shadow: none; /* Sin sombra de texto */ }
auto 4---4
.contenedor { margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); /* Usar grid */ } .sub-div { font-size: 1rem; max-width: 90%; /* Mayor ancho */ padding: 5px; border: 2px dashed #007bff; /* Borde discontinuo azul */ background: #e9ecef; /* Fondo gris claro */ border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); } .sub-div a { color: #007bff; /* Color azul */ text-decoration: none; /* Sin subrayado */ } .titulo tr { background: #007bff; /* Fondo azul */ color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }
auto 5---5
.contenedor { display: grid; grid-template-columns: repeat(3, 1fr); /* Tres columnas */ width:100%; min-width: 360px; max-width: 900px; margin: auto; padding: 5px; } .subir { background-color: #f5f5f5; /* Gris claro */ padding: 5px 10px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave */ color: #000000; /* Color del texto, puedes cambiarlo */ border-radius: 5px; margin-top: 50px; top: 25px; } .sub-div { margin: 0px; text-align: center; /* Alineación a la derecha */ font-size: 0.8rem; width: 80%; padding: 2rem 0 2rem 0; border: 4px solid #28a745; /* Borde verde */ background: #d4edda; /* Fondo verde claro */ border-radius: 20px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); } .sub-div a { color: #28a745; /* Color verde */ } .titulo tr { background: #28a745; /* Fondo verde */ color: #fff; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }
auto 6---6
.contenedor { display: grid; grid-template-columns: repeat(3, 1fr); /* Tres columnas */ width:100%; min-width: 360px; max-width: 900px; margin: 0; margin: auto; padding: 5px; background-color: #f8f9fa; /* Fondo muy claro */ } .sub-div { text-align: center; /* Justificar texto */ font-size: 1rem; max-width: 90%; /* Mayor ancho */ padding: 5px; border: 1px solid #17a2b8; /* Borde azul claro */ background: #d1ecf1; /* Fondo azul claro */ border-radius: 25px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); } .sub-div a { color: #17a2b8; /* Color azul claro */ /* Tachado */ } .titulo tr { background:
auto 7---7
.contenedor { display: grid; grid-template-columns: repeat(3, 1fr); /* Tres columnas */ gap: 15px; /* Espacio entre columnas */ margin: auto; padding: 10px; } .sub-div { text-align: center; padding: 5px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); font-size: 1rem; background: linear-gradient(45deg, #6dd5ed, #2193b0); /* Fondo degradado azul */ color: white; /* Texto blanco para mejor contraste */ border: none; } .sub-div a { color: white; text-decoration: none; } .titulo tr { background: #2193b0; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
auto 8---8
.contenedor { display: grid; grid-template-columns: repeat(3, 1fr); /* Tres columnas */ gap: 10px; /* Espacio entre columnas */ margin: auto; padding: 5px; } .sub-div { text-align: center; padding: 5px; border-radius: 15px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-size: 1rem; background: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%); /* Fondo degradado rosa */ color: white; /* Texto blanco */ border: none; } .sub-div a { color: white; text-decoration: none; } .titulo tr { background: #ff758c; color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); }
verde---9
.contenedor { margin: auto; display: flex; flex-wrap: wrap; } .sub-div { margin: 3px; text-align: center; font-size: 1rem; width: 31%; box-sizing: border-box; padding: 35px 0 40px 0; border: 5px solid rgba(255, 255, 255, 0.46); height: 100px; max-height: 150px; background: #578000 ; border-radius: 10px; /* Esquinas redondeadas */ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); } .sub-div a { font-size: 1rem; color:azure; text-decoration: none; } .titulo tr{ background: linear-gradient(180deg, #578000 , #466600); color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); mix-blend-mode: multiply; font-size: 1.5rem; line-height: 1rem; padding: 0.15rem; } @media (min-width: 80px){ body { margin: 0; align-content: center; } hr { border: 0.5px solid; color: #f2ccff; margin: 5px; padding: 0; } h4 { letter-spacing: -0.05em; word-spacing: -0.05em; text-align: left; display: block; vertical-align: top; font-size: 1.25rem; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: 400; } .titulo tr{ line-height: 1rem; padding: 0.15rem; font-size: 1.5rem; background: linear-gradient(180deg, #578000 , #466600); color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); mix-blend-mode: multiply; } h5 {text-align: left; letter-spacing: -0.05em; word-spacing: -0.05em; display: block; vertical-align: top; font-size: 0.9rem; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: normal; } h6 {letter-spacing: -0.05em; word-spacing: -0.05em; display: block; vertical-align: baseline; font-size: 0.95rem; /*margin: 15px 0; padding-left: 8px;*/ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bolder; } body { padding: 0; text-align: center; } h2, h3 { color: #464646; } section { margin-bottom: 40px; }