Video -BG Vrs. 03 (with bottom divider)

by davidxmartins

HTML

<div class="video-overlay">
<div class="hero-content">


  <video autoplay muted loop poster="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Sample_Floorplan.jpg/640px-Sample_Floorplan.jpg">
    <source src="https://homemverde.pt/videobg-01.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <div class="header">
    <h1>Blueberry Cheesecake</h1>
    <a>Recipe here</a>
  </div>
  
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 220.711" style="display:block">
      <path d="M1566.064,1.864,405.207,218.842a109.486,109.486,0,0,1-64.817-7.677L0,58.92v161.79H1920V141.723L1631.7,9.913A109.484,109.484,0,0,0,1566.064,1.864Z" style="fill:#f2f2f2"/>
      <path d="M1631.7,9.913a109.484,109.484,0,0,0-65.64-8.05L558.173,190.251,603.89,210.7a109.486,109.486,0,0,0,64.817,7.677L1675.9,30.119Z" style="fill:#c0dfd5"/>
    </svg>
    
</div>

<div style="height: 100vh; background: #f2f2f2;">

</div>

CSS

html, body {
  margin: 0;
}

video {
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
}

.video-overlay {
  width: 100%;
  height: auto;
  background: rgba(14, 143, 118, 0.7);


}
.hero-content {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  height: 100vh;
}
.header{
  color: white;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
  padding: 0 3vw;
}

a {
  padding: 20px 40px;
  background: #aaa;
  color: white;
}