Skip to content

Instantly share code, notes, and snippets.

@parzibyte

parzibyte/plantilla_bulma.html Secret

Last active January 8, 2021 20:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parzibyte/67aec56da2723149cf6b3d5b1b6d1c8f to your computer and use it in GitHub Desktop.
Save parzibyte/67aec56da2723149cf6b3d5b1b6d1c8f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
plantilla_bulma.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plantilla inicial de Bulma CSS - By Parzibyte</title>
<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
<nav class="navbar is-warning" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://parzibyte.me/blog">
<img alt=""
src="https://raw.githubusercontent.com/parzibyte/ejemplo-mern/master/src/img/parzibyte_logo.png"
style="max-height: 80px" />
</a>
<button class="navbar-burger is-warning button" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Enlace</a>
<a class="navbar-item" href="#">Otro enlace</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="#">Enlace a la derecha</a>
<div class="navbar-item">
<div class="buttons">
<a target="_blank" rel="noreferrer" href="https://parzibyte.me/l/fW8zGd"
class="button is-primary">
<strong>Soporte y ayuda</strong>
</a>
</div>
</div>
</div>
</div>
</nav>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
const boton = document.querySelector(".navbar-burger");
const menu = document.querySelector(".navbar-menu");
boton.onclick = () => {
menu.classList.toggle("is-active");
boton.classList.toggle("is-active");
};
});
</script>
<section class="section">
<div class="columns">
<div class="column has-text-centered">
<h1 class="is-size-1">Plantilla de Bulma CSS</h1>
<p>El contenido de una columna</p>
<a href="https://parzibyte.me/blog">By Parzibyte</a>
</div>
</div>
<div class="columns">
<div class="column">
Columna 1
</div>
<div class="column">
Columna 2
</div>
</div>
<div class="columns">
<div class="column">
Otra columna dentro de una nueva fila
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment