<!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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
