Skip to content

Instantly share code, notes, and snippets.

@ffmit

ffmit/bulma_laravel_starter_navigation.blade.php

Created September 6, 2019 12:16
Show Gist options
  • Save ffmit/d458ebb4e9d8153ed1ba72b922f35c24 to your computer and use it in GitHub Desktop.
Save ffmit/d458ebb4e9d8153ed1ba72b922f35c24 to your computer and use it in GitHub Desktop.
Download ZIP
Bulma Starter template for Laravel. Modified source from https://codepen.io/hunzaboy/pen/yoPKQW?editors=1000
Raw
bulma_laravel_starter_navigation.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello MSD!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<nav class="navbar ">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox"
width="112" height="28">
</a>
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-twitter"></i>
</span>
</a>
</div>
<div class="navbar-item has-dropdown is-hoverable is-mega">
<div class="navbar-link">
Menu
</div>
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
<div class="container is-fluid">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title"><i class="fas fa-sort-amount-down"></i> Statistics</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-history"></i> Last 4 weeks</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-calendar-week"></i> Last 3 months</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-globe-europe"></i> Last year</p>
</div>
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title"><i class="fas fa-folder"></i> Entries</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-list"></i> List entries</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-edit"></i> Edit entry</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-plus"></i> Add entry</p>
</div>
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title"><i class="fas fa-random"></i> Practices</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-list"></i> List practices</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-edit"></i> Edit practice</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p><i class="fas fa-plus"></i> Add practice</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
User
</div>
<div id="moreDropdown" class="navbar-dropdown ">
<a class="navbar-item " href="http://bulma.io/extensions/">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Settings</strong>
<br>
<small>Choose your preferences</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon has-text-info">
<i class="fa fa-plug"></i>
</span>
</div>
</div>
</div>
</a>
</div>
</div>
{{-- <div class="navbar-end">--}}
{{-- <a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">--}}
{{-- <span class="icon" style="color: #333;">--}}
{{-- <i class="fa fa-github"></i>--}}
{{-- </span>--}}
{{-- </a>--}}
{{-- <a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">--}}
{{-- <span class="icon" style="color: #55acee;">--}}
{{-- <i class="fa fa-twitter"></i>--}}
{{-- </span>--}}
{{-- </a>--}}
{{-- <div class="navbar-item">--}}
{{-- <div class="field is-grouped">--}}
{{-- <p class="control">--}}
{{-- <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet"--}}
{{-- data-social-target="http://bulma.io" target="_blank"--}}
{{-- href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">--}}
{{-- <span class="icon">--}}
{{-- <i class="fa fa-twitter"></i>--}}
{{-- </span>--}}
{{-- <span>Tweet</span>--}}
{{-- </a>--}}
{{-- </p>--}}
{{-- <p class="control">--}}
{{-- <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">--}}
{{--<span class="icon">--}}
{{-- <i class="fa fa-download"></i>--}}
{{-- </span>--}}
{{-- <span>Download</span>--}}
{{-- </a>--}}
{{-- </p>--}}
{{-- </div>--}}
{{-- </div>--}}
{{-- </div>--}}
{{-- </div>--}}
</nav>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
MSD
</h1>
<h2 class="subtitle">
Log it all
</h2>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment