Skip to content

Instantly share code, notes, and snippets.

@kevinacuna1
Last active December 16, 2022 15:27
Show Gist options
  • Select an option

  • Save kevinacuna1/9a006a791cc7775f7697c69e8e93c043 to your computer and use it in GitHub Desktop.

Select an option

Save kevinacuna1/9a006a791cc7775f7697c69e8e93c043 to your computer and use it in GitHub Desktop.
Base HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecommerce - Nombre Página</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lexend&family=Playfair+Display:wght@700&family=Raleway:wght@400;700;900&family=Slackey&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<header class="py-5">
<h1 class="text-center">Tienda <span class="text-primary">Muebles</span></h1>
</header>
<div class="border-top py-4">
<div class="container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand nombre-sitio d-lg-none fs-2 fw-bold text-uppercase" href="index.html">Tienda
Muebles</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navegacion">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navegacion" class="collapse navbar-collapse">
<nav class="navbar-nav container d-flex flex-md-row justify-content-md-between text-center">
<a class="text-dark text-decoration-none" href="index.html">Inicio</a>
<a class="text-dark text-decoration-none" href="nosotros.html">Nosotros</a>
<a class="text-dark text-decoration-none" href="tienda.html">Tienda</a>
<a class="text-dark text-decoration-none" href="blog.html">Blog</a>
<a class="text-dark text-decoration-none" href="galeria.html">Galería</a>
<a class="text-dark text-decoration-none" href="contacto.html">Contacto</a>
</nav>
</div>
</div>
</div>
<main class="container-xl py-5">
<h2 class="text-center py-5">Nombre de la Página</h2>
</main>
<footer class="pt-5 mt-5 border-top">
<div class="container-xl mt-5">
<div class="row">
<div class="col-md-4 mb-4 text-center">
<h3 class="mb-4">Categorías</h3>
<nav class="d-flex flex-column">
<a class="text-dark text-decoration-none" href="#">Cocina</a>
<a class="text-dark text-decoration-none" href="#">Oficina</a>
<a class="text-dark text-decoration-none" href="#">Jardin</a>
<a class="text-dark text-decoration-none" href="#">Cochera</a>
<a class="text-dark text-decoration-none" href="#">Dormitorios</a>
</nav>
</div>
<div class="col-md-4 mb-4 mb-md-0 text-center">
<h3 class="mb-4">Sobre Nosotros</h3>
<nav class="d-flex flex-column">
<a class="text-dark text-decoration-none" href="#">Nuestra Historia</a>
<a class="text-dark text-decoration-none" href="#">Misión, Visión y Valores</a>
<a class="text-dark text-decoration-none" href="#">Carreras</a>
<a class="text-dark text-decoration-none" href="#">Política de Privacidad</a>
<a class="text-dark text-decoration-none" href="#">Terminos del Servicio</a>
</nav>
</div>
<div class="col-md-4 mb-4 text-center">
<h3 class="mb-4">Soporte</h3>
<nav class="d-flex flex-column">
<a class="text-dark text-decoration-none" href="#">Preguntas Frecuentes</a>
<a class="text-dark text-decoration-none" href="#">Ayuda en Línea</a>
<a class="text-dark text-decoration-none" href="#">Confianza y Seguridad</a>
</nav>
</div>
</div>
<p class="mt-5 text-center fs-2">Todos los Derechos Reservados. Tienda Muebles. &#169</p>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment