CORPORATIVO · Tailwind CSS · HTML5 · Vanilla JS

Laboris Tech – Servicios de laboratorio con resultados precisos

★★★★★4,7 2.437 descargas

Theme web para Laboris Tech, empresa de análisis y pruebas de laboratorio. Incluye header sticky, slider hero, sección sobre nosotros, video de fondo, marquee de palabras clave y tarjetas de servicios, todo con Tailwind y accesibilidad SEO.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia Laboris Tech, una empresa de servicios de laboratorio. Utiliza solo HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. La paleta de colores es: #0A2240 (azul oscuro), #1E3A8A (azul intenso), #3B82F6 (azul brillante), #F9FAFB (gris muy claro) y #FFFFFF. Tipografía: Inter (Google Fonts) para títulos y body. 

Estructura y requisitos:

1. HEADER (sticky) con logo a la izquierda, menú de navegación horizontal (Home, Services, Research, Blog, Contact) y botón "Appointment" a la derecha. El menú incluye un dropdown "Pages" con enlaces ficticios (About Us, Team, Pricing, FAQ, Privacy). En móvil colapsa a ícono hamburguesa.

2. HERO SECTION: slider automático de 3 slides, cada uno con fondo de imagen placeholder, subtítulo "welcome to laboratory", título grande en blanco, y botón CTA "book a lab visit" que enlaza a la sección Contact. Flechas laterales personalizadas con SVG y paginación de puntos.

3. ABOUT US SECTION: grid de dos columnas. Izquierda: subtítulo "Inside Our Laboratory". Derecha: título "We tackle key challenges in microbiology today.", párrafo descriptivo y botón "read more" que lleva a /about-us.

4. VIDEO SECTION: bloque a pantalla completa con video de fondo autoplay, loop, muted. Superpone un botón de play/pause con iconos SVG. Añade dos ondas decorativas animadas alrededor del botón.

5. MARQUEE BLOCK: dos capas de texto que se desplazan horizontalmente en sentido opuesto. Cada capa contiene 5 palabras clave (Scientific, Equipment, Immunology, Experiment, Medicine) con algunas destacadas en color #3B82F6.

6. SERVICES SECTION: título central "Testing and Lab Services for Better Health" y subtítulo "our services". Grid de 3 tarjetas, numeradas 01‑03, cada una con icono placeholder, título (Calibration, Analysis, Consultation) y enlace a detalle de servicio.

7. FOOTER: fondo #0A2240, dividido en 3 columnas: (a) Información de contacto (dirección ficticia, teléfono, email), (b) Enlaces rápidos (Home, Services, Blog, Contact), (c) Formulario breve de suscripción (email + botón). Incluye iconos de redes sociales (SVG) y texto de copyright.

8. COMPONENTES ADICIONALES: botón "Back to top" en esquina inferior derecha con animación de aparición al hacer scroll; cursor personalizado de estilo "mouse pointer"; animaciones suaves de entrada (fade/slide) usando Tailwind utilities y un pequeño script JS para el slider y el marquee.

9. SEO y accesibilidad: usar etiquetas semánticas (header, nav, main, section, footer), atributos alt en imágenes, roles ARIA en menús y botones.

Entrega el código listo para copiar‑pegar, sin dependencias externas más allá de Tailwind CDN y Google Fonts.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

3.043 caracteres · 40 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME