suroegin
9/14/2018 - 12:18 PM
bulma.io__templates__2and3-cols-with-footer-navbar-title-and-subtitle.md
[templates bulma.io] #templates #bulma
| Mobile and Tablet | Desktop and larger |
|---|---|
 |  |
Requirements:
- Bulma.io (v0.7.1)
- Font Awesome Free (v5.1.0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="css/bulma.css">
<script defer src="js/fontawesome.js"></script>
</head>
<body>
<section class="section-narrow-top-and-bottom">
<nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<a role="button" class="navbar-burger" onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Home
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="button">
<span class="icon">
<i class="fas fa-twitter" aria-hidden="true"></i>
</span>
<span>Tweet</span>
</a>
</p>
<p class="control">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-download" aria-hidden="true"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Home
</a>
</div>
</div>
</nav>
</section>
<section class="section-narrow-top-and-bottom">
<div class="container">
<h1 class="title">Hello</h1>
<h2 class="subtitle">Simple web-site.</h2>
</div>
</section>
<section class="section-no-left-and-right">
<div class="columns">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit congue purus, non posuere quam tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit congue purus, non posuere quam tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit congue purus, non posuere quam tincidunt sed.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit congue purus, non posuere quam tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit congue purus, non posuere quam tincidunt sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit congue purus, non posuere quam tincidunt sed.
</div>
</div>
</section>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item" aria-label="reply">
<span class="icon is-small">
<i class="fas fa-reply" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="like">
<span class="icon is-small">
<i class="fas fa-heart" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<section class="section-narrow-top-and-bottom">
<div class="container">
<div class="columns">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit congue purus, non posuere quam tincidunt sed. Suspendisse auctor efficitur iaculis. Aliquam lorem nisl, egestas sit amet mattis et, scelerisque ac lacus. Morbi aliquam libero mi, ut ultrices sapien egestas id. Aliquam erat volutpat. Etiam venenatis, eros sit amet dapibus sagittis, urna nunc dignissim tellus, vitae ornare lorem turpis eget diam. In et tortor et leo dapibus rutrum ac non massa.
</div>
<div class="column">
Curabitur sed lectus aliquam, convallis velit eget, lacinia erat. Nunc eleifend tortor massa, at maximus arcu mollis eu. Pellentesque ut enim molestie, euismod eros vel, tincidunt purus. Fusce sed sapien sapien. Cras euismod augue at metus pellentesque elementum. Vestibulum et sollicitudin odio. Nam rutrum purus sed nibh viverra tempor. Morbi nulla elit, laoreet nec dolor vel, dictum varius libero. Vivamus quis elit ut odio imperdiet mattis sed nec justo. Duis id quam convallis, interdum dui ac, suscipit ante. Sed accumsan sit amet lectus quis consectetur. Nulla magna nisi, imperdiet ut nibh vitae, luctus cursus ipsum. Mauris eget imperdiet nisi. Quisque porta bibendum augue finibus scelerisque. Donec dignissim quam sed commodo viverra. Suspendisse vehicula elit quis quam vehicula viverra.
</div>
<div class="column">
<div class="columns">
<div class="column">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In auctor dictum ligula. Praesent faucibus ultricies risus, laoreet suscipit libero vehicula non. Sed congue, ex sed sollicitudin lacinia, ligula lectus euismod velit, vitae feugiat nisi magna ac neque. Nulla convallis erat ac urna maximus, vel convallis lorem porta. Nunc porttitor mi aliquam diam vestibulum volutpat. Ut id augue ullamcorper, sollicitudin orci sit amet, vehicula tellus. Integer lobortis est est, non efficitur tellus laoreet et. Suspendisse nec placerat felis. Ut lacinia purus id sapien condimentum tristique. Nam id congue turpis, sit amet lacinia leo. Curabitur sem leo, porttitor quis vulputate vel, dapibus ut nibh. Pellentesque malesuada vehicula lorem, vitae fringilla arcu ultrices et. Nulla rhoncus tellus eget tellus lobortis, posuere bibendum felis efficitur. Sed ac urna ante.
</div>
<div class="column">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In auctor dictum ligula. Praesent faucibus ultricies risus, laoreet suscipit libero vehicula non. Sed congue, ex sed sollicitudin lacinia, ligula lectus euismod velit, vitae feugiat nisi magna ac neque. Nulla convallis erat ac urna maximus, vel convallis lorem porta. Nunc porttitor mi aliquam diam vestibulum volutpat. Ut id augue ullamcorper, sollicitudin orci sit amet, vehicula tellus. Integer lobortis est est, non efficitur tellus laoreet et. Suspendisse nec placerat felis. Ut lacinia purus id sapien condimentum tristique. Nam id congue turpis, sit amet lacinia leo. Curabitur sem leo, porttitor quis vulputate vel, dapibus ut nibh. Pellentesque malesuada vehicula lorem, vitae fringilla arcu ultrices et. Nulla rhoncus tellus eget tellus lobortis, posuere bibendum felis efficitur. Sed ac urna ante.
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div>
</footer>
</body>
</html>
Clear (generally) style
Stretched from PSD templates
- Wait...