Skip to content

Instantly share code, notes, and snippets.

@ychevarrias

ychevarrias/index-bulma.html

Created May 10, 2024 00:31
Show Gist options
  • Save ychevarrias/629c38cda320c386468c43dd4f741c35 to your computer and use it in GitHub Desktop.
Save ychevarrias/629c38cda320c386468c43dd4f741c35 to your computer and use it in GitHub Desktop.
Download ZIP
Bulma CSS layout
Raw
index-bulma.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout con Bulma CSS</title>
<!-- Enlace al archivo CSS de Bulma -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<!-- Barra de navegación -->
<nav class="navbar is-primary" role="navigation" aria-label="main navigation" style="position: sticky; top:0">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<strong>Mi Sitio</strong>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Inicio
</a>
<a class="navbar-item" href="#">
Acerca de
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Más
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">
Contacto
</a>
<a class="navbar-item" href="#">
Ayuda
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="#">
Reportar un problema
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-info" href="#">
Iniciar sesión
</a>
<a class="button is-primary" href="#">
Registrarse
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Contenido principal -->
<section class="section">
<div class="container">
<h1 class="title">Bienvenido a mi sitio</h1>
<p class="subtitle">Aquí puedes encontrar información interesante.</p>
</div>
</section>
<!-- Sección de contenido adicional -->
<section class="section">
<div class="container">
<h2 class="title is-4">Contenido Adicional</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec lectus magna. Ut non ex eleifend, lobortis nisi vel, pharetra felis. Fusce dapibus eros id mi dapibus, nec molestie enim dapibus. Nulla ac purus dolor. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec suscipit nulla vitae purus maximus, et interdum lorem placerat. Phasellus id ultricies urna. Integer consequat faucibus purus, et suscipit eros commodo eu. Sed gravida dolor non felis cursus, at ultrices elit aliquet.</p>
</div>
</section>
<!-- Pie de página -->
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Mi Sitio</strong> by Usuario
</p>
</div>
</footer>
<!-- Script para activar el menú de navegación en dispositivos móviles -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// Obtener todos los elementos de la clase "navbar-burger"
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Verificar si hay elementos navbar-burger
if ($navbarBurgers.length > 0) {
// Agregar eventos de clic a cada uno
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Obtener el "target" del atributo "data-target" del navbar-burger
const target = el.dataset.target;
const $target = document.getElementById(target);
// Alternar la clase "is-active" en el navbar-burger y en el "target"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment