A Pen by Roderick Sandoval

Thumbnail
This awesome code was written by rodericksandoval, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rodericksandoval ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Roderick Sandoval</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
  <div class="l-header-background-img">
    <img src="http://www.costaricacinefest.go.cr/sites/default/files/media/pruebas/christos-barbalis-232683.jpg">
  </div>

  <div class="l-header-background-mask"></div>

  <div class="l-header-background-gradient">
    <svg class="gradient" xmlns="http://www.w3.org/2000/svg" width="100%" height="700" viewBox="0 0 1440 700" preserveAspectRatio="none">
      <defs><linearGradient id="gradient-1"><stop offset="0" stop-color="#fc837a"/><stop offset="1" stop-color="#feaf86"/></linearGradient></defs>
      <path fill="url(#gradient-1)" d="M0 0h592.697C820 320 1060-200 1440 197.11V700c-611.06-356.81-541.422-59.91-967.757-24.64C235.057 677.263 260 340 0 345.476z"/>
    </svg>
  </div>

</header>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/rodericksandoval/a-pen-by-roderick-sandoval-oZrWBg */
header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}

header div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
header div img {
  width: 100%;
  max-width: 100%;
}

.l-header-background-img {
  z-index: 1;
}

.l-header-background-mask {
  z-index: 2;
  background: rgba(18, 133, 152, 0.75);
}

.l-header-background-gradient {
  z-index: 3;
}

Comments