Enhanced Registration Interface - Copy this Html, Tailwind Component to your project
Me puedes mejorar esta pagina web :<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <meta name="description" content="CompuMart Tu tienda de tecnología y electrodomésticos"> <title>CompuMart Inicio</title> <style> :root { primary color: #2563eb; secondary color: #1e40af; text color: #1f2937; light bg: #f3f4f6; white: #ffffff; shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box sizing: border box; } body { font family: system ui, apple system, sans serif; line height: 1.6; color: var( text color); } .nav container { background color: var( primary color); padding: 1rem; position: sticky; top: 0; z index: 100; } nav { max width: 1200px; margin: 0 auto; display: flex; justify content: space between; align items: center; } nav ul { display: flex; list style: none; gap: 2rem; align items: center; } nav a { color: var( white); text decoration: none; font weight: 500; transition: color 0.3s ease; } nav a:hover { color: var( light bg); } .login btn { background color: var( white); color: var( primary color); padding: 0.5rem 1rem; border radius: 4px; transition: all 0.3s ease; } .login btn:hover { background color: var( light bg); color: var( primary color); } .container { max width: 1200px; margin: 0 auto; padding: 2rem; } .header { display: flex; align items: center; gap: 2rem; margin bottom: 3rem; } .logo { max width: 150px; height: auto; } h1 { font size: 2.5rem; color: var( primary color); } .banner { background: var( light bg); padding: 2rem; border radius: 8px; margin bottom: 3rem; text align: center; } .banner h2 { color: var( primary color); margin bottom: 1rem; } .categorias grid { display: grid; grid template columns: repeat(auto fit, minmax(300px, 1fr)); gap: 2rem; margin top: 2rem; } .categoria { background: var( white); border radius: 8px; overflow: hidden; box shadow: var( shadow); transition: transform 0.3s ease; } .categoria:hover { transform: translateY( 5px); } .categoria a { text decoration: none; color: inherit; } .categoria h2 { background: var( primary color); color: var( white); padding: 1rem; text align: center; } .producto { padding: 1.5rem; } .producto img { width: 100%; height: 200px; object fit: cover; border radius: 4px; margin bottom: 1rem; } .producto p { color: var( text color); font size: 1rem; } footer { background: var( primary color); color: var( white); text align: center; padding: 2rem; margin top: 3rem; } footer a { color: var( white); text decoration: none; font weight: 500; } /* Estilos del carrito flotante */ .cart icon { position: fixed; bottom: 1rem; right: 1rem; background color: #2563eb; color: white; border radius: 50%; width: 50px; height: 50px; display: flex; align items: center; justify content: center; font size: 24px; cursor: pointer; box shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.1); transition: background color 0.3s ease; } .cart icon:hover { background color: #1e40af; } /* Modal de carrito */ .cart modal { position: fixed; top: 0; right: 0; background color: rgba(0, 0, 0, 0.5); width: 400px; height: 100%; display: none; flex direction: column; padding: 1rem; z index: 100; } .cart modal.active { display: flex; } .cart modal header { display: flex; justify content: space between; align items: center; padding bottom: 1rem; border bottom: 1px solid #ccc; } .cart modal header h3 { font size: 1.5rem; } .close cart { font size: 24px; cursor: pointer; } .cart items { flex grow: 1; overflow y: auto; margin top: 1rem; } .cart item { display: flex; margin bottom: 1rem; align items: center; border bottom: 1px solid #ccc; padding bottom: 1rem; } .cart item img { width: 50px; height: 50px; object fit: cover; margin right: 1rem; } .cart item p { flex grow: 1; } .cart item .price { font weight: bold; } .cart total { margin top: 1rem; text align: right; font weight: bold; } </style> </head> <body> <div class="nav container"> <nav> <ul> <li><a href="contacto.html">Contacto</a></li> <li><a href="sobrenosotros.html">Sobre Nosotros</a></li> </ul> <ul> <li><a href="login.html" class="login btn">Iniciar Sesión</a></li> </ul> </nav> </div> <div class="container"> <header class="header"> <img src="imagenes/logotipo removebg preview.png" alt="Logo de CompuMart" class="logo"> <h1>CompuMart</h1> </header> <div class="banner"> <h2>¡Bienvenido a CompuMart!</h2> <p>Descubre nuestra amplia selección de productos tecnológicos y electrodomésticos.</p> <p>Inicia sesión para acceder a ofertas exclusivas y seguimiento de pedidos.</p> </div> <main class="categorias grid"> <! Categoría Electrodomésticos > <div class="categoria"> <a href="pagina_electrodomesticos.html"> <h2>Electrodomésticos</h2> <div class="producto"> <img src="imagenes/depositphotos_357356270 stock photo render home appliances collection set.jpg" alt="Imagen de electrodomésticos"> <p>Descubre nuestra amplia gama de electrodomésticos para equipar tu hogar con la última tecnología y hacer tu vida más cómoda y eficiente.</p> </div> </a> </div> <! Categoría Celulares > <div class="categoria"> <a href="pagina_celulares.html"> <h2>Celulares</h2> <div class="producto"> <img src="imagenes/16970838437716.jpg" alt="Imagen de celulares"> <p>Explora nuestra selección de los últimos modelos de smartphones de las marcas más reconocidas. Mantente conectado y disfruta de la última tecnología en tus manos.</p> </div> </a> </div> <! Categoría Portátiles > <div class="categoria"> <a href="pagina_portatiles.html"> <h2>Portátiles</h2> <div class="producto"> <img src="imagenes/lado perspectiva portatiles fondo negro_187299 13750.avif" alt="Imagen de portátiles"> <p>Encuentra el portátil perfecto para ti, ya sea para trabajar, estudiar o entretenerte. Descubre nuestra variedad de modelos con diferentes especificaciones para satisfacer tus necesidades.</p> </div> </a> </div> </main> </div> <! Carrito flotante > <div class="cart icon" onclick="toggleCart()"> 🛒 </div> <! Modal de carrito > <div class="cart modal" id="cart modal"> <div class="cart modal header"> <h3>Carrito de Compras</h3> <span class="close cart" onclick="toggleCart()">×</span> </div> <div class="cart items" id="cart items"> <! Aquí se agregarían los productos al carrito > </div> <div class="cart total" id="cart total"> Total: $0.00 </div> </div> <footer> <p>© 2024 CompuMart. Todos los derechos reservados.</p> <p><a href="privacidad.html">Política de Privacidad</a> | <a href="terminos.html">Términos y Condiciones</a></p> </footer> <script> let cart = []; // Función para mostrar/ocultar el carrito function toggleCart() { const cartModal = document.getElementById("cart modal"); cartModal.classList.toggle("active"); } // Función para agregar un producto al carrito (esto es solo un ejemplo) function addToCart(product) { cart.push(product); renderCart(); } // Función para renderizar el carrito function renderCart() { const cartItems = document.getElementById("cart items"); const cartTotal = document.getElementById("cart total"); cartItems.innerHTML = ""; let total = 0; cart.forEach(item => { const itemElement = document.createElement("div"); itemElement.classList.add("cart item"); itemElement.innerHTML = ` <img src="${item.image}" alt="${item.name}"> <p>${item.name} <span class="price">$${item.price}</span></p> `; cartItems.appendChild(itemElement); total += item.price; }); cartTotal.innerText = `Total: $${total.toFixed(2)}`; } </script> </body> </html>
