index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			name="description"
			content="PC Games es una tienda de videojuegos de PC"
		/>
		<link
			rel="shortcut icon"
			href="src/assets/icons/favicon.ico"
			type="image/x-icon"
		/>
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link rel="stylesheet" href="src/css/styles.css" />
		<link rel="stylesheet" href="src/css/media.css" />
		<link rel="stylesheet" href="src/css/spiner.css" />
		<title>PC Games</title>
	</head>

	<body>
		<header id="header">
			<div class="header-container">

				<div class="header-logo">
					<a href="#hero">
						<img src="src/assets/img/logo.png" alt="Logo de PC Games" />
					</a>
				</div>
	
				<nav>
					<ul id="nav-menu" class="nav-menu">
						<li><a href="#hero">Inicio</a></li>
						<li><a href="#about">Nosotros</a></li>
						<li><a href="#products">Productos</a></li>
						<li><a href="#contact">Contacto</a></li>
						<li><a href="src/pages/login.html">Iniciar Sesión</a></li>
						<li><a href="src/pages/sigin.html">Registrarse</a></li>
					</ul>
				</nav>

				<!-- Cart Menu -->
				<div id="cart-menu" class="cart-menu ">
					<h3 class="cart-title">Tu Carrito</h3>
					<ul id="cart-items" class="cart-items">
						<li class="cart-container">	
						</li>
					</ul>
					<div class="cart-total">
	 					 <p>Total:</p>
  						<span class="cart-total-amount">$10.00</span>
					</div>
					<div class="cart-actions">
					 	 <button id="buy-cart-btn" class="cart-btn">Comprar</button>
 						 <button id="empty-cart-btn" class="cart-btn">Vaciar</button>
					</div>
 				 </div>
	
				<div class="header-actions">
					<div class="shopping-cart" id="cart-btn">
					  🛒<span>(<span class="cart-count">0</span>)</span>
					</div>
					<button id="menu-btn" class="menu-btn">☰</button>
				  </div>
			</div>
	
			
			
			<div class="overlay"></div>
		</header>

		<main id="main">
			<section id="hero">
				<aside class="hero-image-opacity">
					<div class="hero-content">
						<h1>Bienvenidos<br />a tu sitio de Juegos</h1>
						<a class="btn" href="#products">Explorar Juegos</a>
					</div>
				</aside>
			</section>

			<section id="about" class="section-global">
				<h2 class="about-title">¿Por qué elegir PC Games?</h2>
				<div class="about-content">
					<p>
						Somos apasionados por la diversión y la emoción de los juegos de PC.
						Nuestra misión es proporcionar a los jugadores de todas partes una
						experiencia excepcional en el mundo de los videojuegos. Ofrecemos
						una amplia selección de juegos que abarcan diversos géneros, desde
						acción trepidante hasta emocionantes aventuras, épicos juegos de
						rol, emocionantes deportes, emocionantes combates y experiencias
						multijugador que te conectarán con jugadores de todo el mundo.
					</p>
					<p>
						Nuestra dedicación a la calidad y la satisfacción del cliente es
						insuperable. Trabajamos arduamente para asegurarnos de que cada
						juego que ofrecemos sea una experiencia increíble. Además, estamos
						comprometidos con mantenernos actualizados con las últimas
						tendencias y lanzamientos para que siempre tengas acceso a los
						juegos más emocionantes y novedosos.
					</p>
					<p>
						En PC GAMES, no solo vendemos juegos, sino que también construimos
						comunidades. Creemos que los juegos son una forma poderosa de
						conectarse y compartir experiencias con amigos y jugadores de todo
						el mundo. Únetenos en nuestra búsqueda para crear una comunidad de
						jugadores apasionados y disfrutar juntos de la emoción de los
						videojuegos. Gracias por elegirnos como tu destino de juegos.
						Esperamos que encuentres los juegos que amas y que disfrutes de
						horas interminables de diversión. ¡Bienvenido a la aventura de PC
						GAMES!
					</p>
					<ul>
						<li>Gran variedad de juegos</li>
						<li>Precios competitivos</li>
						<li>Excelente servicio al cliente</li>
					</ul>
				</div>
			</section>

			<section id="products" class="section-global">
				<h2 class="products-title">Juegos PC</h2>
				<div class="categories-container">
					<button class="category card-btn active">Todas</button>
					<button class="category card-btn" data-category="aventuras">
						Aventuras
					</button>
					<button class="category card-btn" data-category="deportes">
						Deportes
					</button>
					<button class="category card-btn" data-category="estrategia">
						Estrategia
					</button>
					<button class="category card-btn" data-category="coperativo">
						Coperativo
					</button>
					<button class="category card-btn" data-category="multijugador">
						Multijudador
					</button>
					<button class="category card-btn" data-category="rol">Rol</button>
					<button class="category card-btn" data-category="carreras">
						Carreras
					</button>
					<button class="category card-btn" data-category="futbol">
						Futbol
					</button>
					<button class="category card-btn" data-category="lucha">Lucha</button>
				</div>
				<div class="cards-container"></div>
				<button class="card-btn btn-load">Ver más</button>
			</section>

			<section id="contact" class="section-global">
				<h2 class="contact-title">Contáctanos</h2>
					<div class="contact-container">
						<div class="form-container">
							<form id="contact-form" class="contact-form">
								<div class="form-group">
									<label for="nombre">Nombre:</label>
									<input
										type="text"
										id="nombre"
										name="nombre"
										placeholder="Escribe tu nombre"
									/>
								</div>
								<div class="form-group">
									<label for="apellido">Apellido:</label>
									<input
										type="text"
										id="apellido"
										name="apellido"
										placeholder="Escribe tu apellido (opcional)"
									/>
								</div>
								<div class="form-group">
									<label for="email">Email:</label>
									<input
										type="email"
										id="email"
										name="email"
										placeholder="Escribe tu email"
									/>
								</div>
								<div class="form-group">
									<label for="mensaje">Mensaje:</label>
									<textarea
										id="mensaje"
										name="mensaje"
										rows="4"
										placeholder="Mensaje de Email"
									></textarea>
								</div>

								<div class="button-group">
									<button class="submit-button" type="submit" disabled>
										Enviar
									</button>
									<button class="reset-button" type="reset">Borrar</button>
								</div>
							</form>
							<div id="spinner" class="spinner-container">
								<div class="sk-chase">
									<div class="sk-chase-dot"></div>
									<div class="sk-chase-dot"></div>
									<div class="sk-chase-dot"></div>
									<div class="sk-chase-dot"></div>
									<div class="sk-chase-dot"></div>
									<div class="sk-chase-dot"></div>
								</div>
							</div>
						</div>

						<div class="contact-info">
							<p>Correo electrónico: contacto@pcgames.com</p>
							<p>Teléfono: +55 5555 5555</p>
							<p>Dirección: Chile 1199 - PLaza Independencia - Mza</p>
						</div>

						<div class="responsive-iframe-container">
							<iframe
								src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d26798.04777036753!2d-68.8606224246806!3d-32.90461967287454!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1splaza%20independencia%20mendoza!5e0!3m2!1ses-419!2sar!4v1722574139769!5m2!1ses-419!2sar"
								width="600"
								height="450"
								style="border: 0"
								allowfullscreen=""
								loading="lazy"
								referrerpolicy="no-referrer-when-downgrade"
								title="Google Maps - Plaza Independencia, Mendoza"
							></iframe>
						</div>
					</div>
				</section>
			</section>
		</main>
		<footer id="footer">
			<div class="container-social-and-copy">
				<ul class="social-media-icon">
					<li>
						<a href="https://www.instagram.com/" target="_blank">
							<img src="src/assets/icons/instagram.svg" alt="instagram" />
						</a>
					</li>
					<li>
						<a href="https://www.facebook.com/" target="_blank">
							<img src="src/assets/icons/facebook.svg" alt="facebook" />
						</a>
					</li>
					<li>
						<a href="https://twitter.com/" target="_blank">
							<img src="src/assets/icons/twitter.svg" alt="twitter" />
						</a>
					</li>
				</ul>
				<p class="row-copyright">
					Copyright &copy; 2024 - <span>by RMD</span> - Todos los derechos
					reservados
				</p>
			</div>
		</footer>
		<div id="show-msg" class=" modal-success"></div>
		<script type="module" src="./src/js/data.js"></script>
		<script type="module" src="./main.js"></script>
	</body>
</html>