Hero Template

hero-template.markdown

Hero Template

This is a profile template that most people use, speaking from my experience. So there's quick template to grab on.

A Pen by Wildan M on CodePen.

License.

index.html

<div class="navbar" style="--theme: #07c;">
  <a class="navbar-brand" href="#">
    <img src="https://blog.codepen.io/wp-content/uploads/2012/06/codepen-wordmark-display-inside-white@10x.png" class="navbar-icon">
  </a>
  <div class="navbar-menu">
    <a class="navbar-item" href="#">Home</a>
    <a class="navbar-item" href="#">Products</a>
    <a class="navbar-item" href="#">About</a>
  </div>
</div>
<div class="hero hero-has-background" style="--background: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg); --overlay: #000a">
  <h1>Hello World</h1>
  <p>Let's Get Started</p>
</div>
<div class="hero container">
    <h2>This is Hello World</h2>
    <p>I can use Lorem Ipsum but it's boring so I just made up word here, just assume it's an example of one-liner paragraph.</p>
</div>
<div class="hero row no-gutters">
  <div class="col-md-6 hero">
    <h2>Splendid Content</h2>
    <p>This is a hero, but in split mode. Tweaked to work with responsive grid from Bootstrap.</p>
  </div>
  <div class="col-md-6 hero hero-has-background" style="--background: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg); --overlay: linear-gradient(#0148, #014)">Type whatever caption that comes up your mind speak best.</div>
</div>
<div class="hero row flex-md-row-reverse no-gutters">
  <div class="col-md-6 hero">
    <h2>Another Splendid Content</h2>
    <p>This is a hero, but in split mode, and reversed, although still consistent with mobile view!</p>
  </div>
  <div class="col-md-6 hero hero-has-background" style="--background: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg); --overlay: linear-gradient(#4108, #410)">Type whatever another caption that comes up your mind speak best.</div>
</div>
<div class="hero row no-gutters">
  <div class="col-md-6 hero">
    <h2>Clean Splendid Content</h2>
    <p>This is a hero, but in split mode and no weird caption, so just let the image speak</p>
  </div>
  <div class="col-md-6 hero hero-has-background" style="--background: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg);"></div>
</div>
<footer class="p-5 d-flex bg-dark text-white">
  <div class="mr-2">This is a very simple footer.</div>
  <div class="ml-auto text-muted">Copyright title here or just ❤</div>
</footer>

script.js

 
$(function(){
	// Navbar expansion
	$('.navbar').addClass('navbar-dark navbar-expand-md')
	$('.navbar-menu').before($(`<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	  <span class="navbar-toggler-icon"></span>
	</button>`)) 
  $('.navbar-item').replaceWith(function () {
    var attrs = { };

$.each($(this)[0].attributes, function(idx, attr) {
    attrs[attr.nodeName] = attr.nodeValue;
});
    attrs['class'] = 'nav-link'
    return $(`<a></a>`, attrs).append($(this).html())
  })
  $('.nav-link').wrap('<li class="nav-item navbar-item"></li>')
	$('.navbar-menu').wrap(`<div class="collapse navbar-collapse" id="navbarSupportedContent"></div>`)
  $(".navbar-menu").replaceWith(function () {
    return $("<ul class='ml-auto navbar-menu navbar-nav'/>").append($(this).contents());
});
  })

scripts

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

style.scss

.navbar {
  color: white;
  padding: 0 1em;
  font-size: 1rem;
  position: absolute;
  width: 100%;
  z-index: 1;
  a {
    color: white;
    text-decoration: none;
  }
  .navbar-brand {
    font-weight: bold;
    .navbar-icon {
      max-height: 2rem;
      margin-right: 1rem;
    }
  }
  .navbar-menu {
    display: flex;
    margin-left: auto;
    .navbar-item {
      display: flex;
      align-items: center;
      padding: 1em;
      a {
      padding: 0;        
      }
      transition: all 0.2s;
      &:hover {
        background-color: var(--theme);
      }
    }
  }
}

.hero {
  &:not(.no-gutters) {
    padding: 3rem 1rem;    
  }
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--overlay);
  &.hero-has-background {
    color: white;    
    min-height: 24rem;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      background: var(--background) center/cover;
      top: 0; bottom: 0; left: 0; right: 0;
      z-index: -1;
      pointer-events: none;
    }
  }
  &.row {
    flex-direction: row;
  }
}

styles

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />