Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here
338
1
						
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Butter Cake v4.0.0</title>


  <!-- FONT AWESOME 4.7.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- BUTTER CAKE CSS 4.0.0 -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/css/butterCake.min.css">

</head>

<body>

  <!-- HEADER -->
  <header>

    <!-- OVERLAY -->
    <div class="overlay"></div>

    <!-- VIDEO -->
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
    </video>

    <!-- CONTAINER -->
    <div class="container flex-center-center text-center">
      <div class="w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <p class="lead mb-0">
          With HTML5 Video and Butter Cake V3
        </p>
      </div>
    </div>
  </header>

  <!-- TEXT CONTAINER -->
  <section class="my-5">
    <div class="container">
      <div class="row">
        <div class="col-md-9 mx-auto">
          <p>
            The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background!
            The header text is vertically centered using flex utilities that are build into Butter Cake V3.
          </p>
          <p>
            The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code>
            class in the CSS.
          </p>
          <p>
            Set the mobile fallback image in the CSS by changing the background image of the header element within the
            media query at the bottom of the CSS snippet.
          </p>
          <p class="mb-0">
            Created by <a href="https://getbuttercake.com">Start Butter Cake</a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- STYLES -->
  <style>
    header {
      position: relative;
      background-color: black;
      height: 75vh;
      min-height: 500px;
      width: 100%;
      overflow: hidden;
    }

    header video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: 0;
      -ms-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }

    header .container {
      position: relative;
      z-index: 2;
      height: 100%;
    }

    header .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: black;
      opacity: 0.5;
      z-index: 1;
    }

@media (pointer: coarse) and (hover: none) {
      header {
        background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
      }

      header video {
        display: none;
      }
    }
  </style>


  <!-- JQUERY 3.3.1 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- BUTTER CAKE JS 4.0.0 -->
  <script src="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/js/butterCake.min.js"></script>

</body>
</html>						
					
Contact forms doesn't work yet, shoot a mail to contact@getbuttercake.com,
working really hard on it, feel free to show your love and support, Thank you