hero banner with html5 video background

hero-banner-with-html5-video-background.markdown

hero banner with html5 video background

A Pen by Dayna Blackwell on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lora|Stardos+Stencil" rel="stylesheet">


<header>
  <div id = 'header-container'>
    <div id = 'logo-container'>
      <h1 class = 'noSelect'>Corporation Inc.<h1>
    </div>
    
    <nav id = 'top-nav'>
      <ul class = 'noSelect neon-glow'>
        <li><a href = '#product-banner'>Products</a></li>
        <li><a href = '#'>Pricing</a></li>
        <li><a href = '#'>Company</a></li>
        <li><a href = '#'>Blog</a></li>
        <li><a href = '#'>Support</a></li>
      </ul>
    </nav>
    
    <div id = 'button-container' class = 'noSelect'>
      <button>Login</button>
      <button>Sign Up</button>
    </di>
    
    
  </div>
</header>

<section id = 'hero-banner'>
  
  <div id = 'video-box'>
    <video autoplay muted loop style>
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1607614/Architecture%20-%20303%20compressed.mp4" type="video/mp4">
  </video>
  </div>
  
  
  <div id = 'hero-content'>
    <h1>We Build Better Buildings</h1>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue elit ex, mattis ultricies enim congue ac. Nunc eleifend ligula dui, in finibus arcu commodo id.
    </p>
    <div id = 'hero-button-container'>
      <button>Sign Up</button>
      <button>Learn More</button>
    </div>
  </div>
    
</section>

<section id = 'product-banner'>
  <div id = 'product-grid-container'>
    <div class = 'product-grid'>
<h3>      <i class="material-icons">
straighten
</i>Thing1</h3>
      <p>Blurb about the thing</p>
      <a href = '#'>LEARN MORE</a>
    </div>
    <div class = 'product-grid'>
      <h3>
        <i class="material-icons">build</i>
        Thing2</h3>
      <p>Blurb about the thing</p>
      <a href = '#'>LEARN MORE</a>
    </div>
    <div class = 'product-grid'>
      <h3>
        <i class="material-icons">assignment_turned_in</i>
        Thing3</h3>
      <p>Blurb about the thing</p>
      <a href = '#'>LEARN MORE</a>
    </div>
  </div>
</section>
    
<section class = 'feature-panel'></section>

<footer>
  
</footer>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

*{
  margin: 0;
  padding: 0;
  user-select: none;
}

body,html{
  margin: 0;    
}

.neon-glow {
  // border: none;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  // text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  // white-space: pre;
  text-shadow: 0px -2px 0px rgba(0,0,0,1), 0 0 5px rgba(255,255,255,0.8),0 -4px 15px rgba(255,255,255,0.5);
  transition: all 350ms cubic-bezier(0.42, 0, 0.58, 1);
}

@mixin link-hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
  }

html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
  height: 100%;
  // width: 100%;
  // overflow: hidden;
  background-color: #282828;
  font-family: 'Open sans', sans-serif;
}

.noSelect{user-select: none;}

header{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: black;
  z-index: 99999;
  border-bottom: 1px solid palegoldenrod;
}  
  
#header-container{
    display: flex;
    justify-content: space-between;
    // padding-left: 20px;
    // padding-right: 20px;
    align-items: center;
    margin: 0 auto;
    // width: 85%;
    max-width: 960px;
    
    width: 960px;
    // background-color: #181818;
    height: 100%;
    // border-radius: 20px;
    // padding: 0px 30px;
  
//   @media only screen and (max-width: 1200px) {
//     display: flex;
//     justify-content: center;

//   }
}

#logo-container{
  

  
  // color: palegoldenrod;
}

#logo-container > h1 {
  color: azure;
  // color: ghostwhite;
  font-family: 'Stardos Stencil', cursive;
  // font-family: 'Lora', serif;
  // font-size: 1.8em;
  font-weight: 100;
  text-decoration: underline;

  
}

#top-nav{
  
  ul li{
    display: inline-block;
    // margin-left: 15px;
    margin: 10px;
    
    a{
      display: block;
      text-decoration: none;
      color: azure;
      font-size: 1em;
      transition: all .4s ease-out;

      &:hover{
        @include link-hover;}
    }
  }
  
}

header #button-container button{
  display: inline-block;
  height: 40px;
  width: 100px;
  border-radius: 20px;
  color: azure;
  background-color: black;
  margin: 5px;
  border: 1px solid #f0f0f0;
  user-select: none;
  outline: none;
  
  
  transition: all .3s;
  
  
}

header #button-container button:nth-of-type(1){
  &:hover{
    // background-color: #181818;
   border: 2px solid #f0f0f0;
    opacity: .8;

    
    
  }
}

header #button-container button:nth-of-type(2) {
  border: 2px solid #665dc3;
  transition: all .3s;
  
  &:hover{
    border: 3px solid #665dc3;
  }
}

#hero-banner{
  position: relative;
  top: 100px;
  display: flex;
  // flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 600px;
  // height: 100vh;
  // background-color: white;
  overflow: hidden;
  text-align: center;

  
  #video-box{
    height: 600px;
    width: 100%;
    opacity: .60;
    
    // z-index: 1111111111111111;
    filter: grayscale(.15);
  }
  
  video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
  }
}

hr{
  border-top: 1px solid red;
  width: 600px;
  margin-bottom: 16px;
}

#hero-content {
  position: absolute;
  // background-color: azure;
  width: 600px;
  height: 200px;
  z-index: 10000;
  // border: 3px solid darkslategray;
  // border: 5px solid yellow;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: azure;
  // color: palegoldenrod;
}

#hero-banner #hero-button-container {
  
  // position: absolute;
  // background-color: azure;
  padding: 40px;
  width: 600px;
  height: 200px;
  z-index: 10000;
  // border: 3px solid darkslategray;
  // border: 5px solid yellow;
  
  justify-content: center;
  color: azure;
  // display: flex;
  top: 120px;
  flex-direction: row;
  // background-color: red;
  width: 400px;
}

#hero-button-container button{
  // display: inline-block;
  height: 40px;
  width: 113px;
  border-radius: 20px;
  margin: 10px;
  background-color: transparent;
  border: 1px ridge darkslategray;
  border: none;
  user-select: none;
  outline: none;
  color: azure;
  font-weight: 600;
}

#hero-banner div button:nth-of-type(1){
  background-color: #665dc3;
  transition: opacity .1s;
  
  &:hover{
    opacity: .85;
  }
}

#hero-banner div button:nth-of-type(2){
  width: 142px;
  border: 1px solid #f0f0f0;
  
  
  &:hover{
    // background-color: #050505;
    opacity: .8;
  }
}

div{
  background-color: transparent;
}

#hero-banner div h1{
  color: black;
  font-size: 2.5em;
  margin-bottom: 16px;
  text-shadow: -1px 0 10px white, 0 1px black, 1px 0 goldenrod, 0 -1px goldenrod;
}

#product-banner{
  position: relative;
  background-color: #080808;
  top: 00px;
  height: 275px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: space-between;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1607614/darkpatterns.svg');
  // background-position: center right;
  border-top: 1px solid lightyellow;
  
}

#product-grid-container{
    display: flex;
    justify-content: space-evenly;
    justify-content: space-between;
    // padding-left: 20px;
    // padding-right: 20px;
    align-items: center;
    margin: 0 auto;
    width: 85%;
    max-width: 960px;
    // background-color: #080808;
    height: 100%;
  
  
}

.product-grid{
  // position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 220px;
  height: 80%;
  margin: 0 10px;
  // background-color: #000;
  // border: 1px solid darkslategray;
  // display: inline;
  
  color: white;
  text-align: left;
  
}

.product-grid > h3{
  margin-bottom: 16px;
  
  .material-icons{
    margin-right: 12px;
    vertical-align: middle;
    font-size: 2em;
  }
}

.product-grid > a {
  margin-top: 24px;
}


.feature-panel{
  // background-color: ghostwhite;
  background-color: #f0f0f0;
  width: 100%;
  height: 450px;
}

footer{
  height: 345px;
  background-color: black;
  border-top: 1px solid lightgoldenrodyellow;
}