<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Negocio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #575757;
}
.tab-content {
display: none;
padding: 20px;
}
.active {
display: block;
}
img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
video {
max-width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<nav>
<a href="#" onclick="showTab('inicio')">Inicio</a>
<a href="#" onclick="showTab('producto')">Producto</a>
<a href="#" onclick="showTab('nosotros')">Nosotros</a>
<a href="#" onclick="showTab('contacto')">Contacto</a>
</nav>
<div id="inicio" class="tab-content active">
<h1>Bienvenido a Mi Negocio</h1>
<p>Describe aquí tu idea de negocio y lo que ofrece.</p>
<img src="https://via.placeholder.com/600x300?text=Imagen+de+Inicio" alt="Imagen de bienvenida">
<video controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Tu navegador no soporta el video.
</video>
</div>
<div id="producto" class="tab-content">
<h1>Producto o Servicio</h1>
<p>Explica qué vendes, sus beneficios y por qué es único.</p>
<img src="https://via.placeholder.com/600x300?text=Imagen+del+Producto" alt="Imagen del producto">
</div>
<div id="nosotros" class="tab-content">
<h1>Sobre Nosotros</h1>
<p>Cuenta quién eres, tu misión y visión.</p>
<video controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Tu navegador no soporta el video.
</video>
</div>
<div id="contacto" class="tab-content">
<h1>Contacto</h1>
<p>Agrega tu correo, redes sociales o un formulario.</p>
<img src="https://via.placeholder.com/600x300?text=Redes+Sociales" alt="Redes sociales">
</div>
<script>
function showTab(tabId) {
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.remove('active'));
document.getElementById(tabId).classList.add('active');
}
</script>
</body>
</html>
Bienvenido a Mi Negocio
Describe aquí tu idea de negocio y lo que ofrece.
Producto o Servicio
Explica qué vendes, sus beneficios y por qué es único.
Sobre Nosotros
Cuenta quién eres, tu misión y visión.
Contacto
Agrega tu correo, redes sociales o un formulario.
