hero background image bulma
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Hero Banner Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Full Height Hero
</span>
<br>
<br>
<section class = "hero is-primary is-medium">
<!-- Hero head at the top -->
<div class = "hero-head">
<nav class = "navbar">
<div class = "container">
<div class = "navbar-brand">
<a class = "navbar-item">
<img alt="tutorialspoint" src = "https://www.tutorialspoint.com/bootstrap/images/logo.png" height = "300" width = "200">
</a>
<span class = "navbar-burger burger" data-target = "navbarmenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id = "navbarmenu" class = "navbar-menu">
<div class = "navbar-end">
<a class = "navbar-item is-active">Home</a>
<a class = "navbar-item">AboutUs</a>
<a class = "navbar-item">Services</a>
</div>
</div>
</div>
</nav>
</div>
<!-- Hero content in the middle -->
<div class = "hero-body">
<div class = "container has-text-centered">
<h1 class = "title">Tutorialspoint (Main title)</h1>
<h2 class = "subtitle">Online Learning (Subtitle)</h2>
</div>
</div>
<!-- Hero footer at the bottom -->
<div class = "hero-foot is-info">
<nav class = "tabs">
<div class = "container">
<ul>
<li class = "is-active"><a>Help</a></li>
<li><a>FAQ's</a></li>
<li><a>Privacy</a></li>
<li><a>Feedback</a></li>
<li><a>Terms</a></li>
</ul>
</div>
</nav>
</div>
</section>
</div>
</section>
</body>
</html>Are there any code examples left?
New code examples in category Other
