<html>
<head>
<style>
html, body {
display: flex;
flex-direction: column;
margin: 0;
height: 100%;
overflow: auto;
}
footer {
background: rgb(41, 47, 66);
background-clip: padding-box;
border-top: 200px solid rgba(0, 0, 0, 0);
border-image: linear-gradient(297.2deg, rgb(134, 190, 38), rgb(196, 229, 139)) 50;
border-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 100 100" fill="none" \
xmlns="http://www.w3.org/2000/svg">\
<defs>\
<linearGradient id="grad" x1="100%" y1="0%" x2="0%" y2="0%">\
<stop offset="0%" style="stop-color:rgb(134, 190, 38);stop-opacity:1" />\
<stop offset="100%" style="stop-color:rgb(196, 229, 139);stop-opacity:1" />\
</linearGradient>\
</defs>\
<path d="M 0 0 Q 10 60 50 59 Q 90 50 100 90 V 100 H 0 z" fill="url(%23grad)"/>\
<path d="M 0 10 Q 10 60 50 60 Q 90 60 100 100 H 0 z" fill="rgb(41, 47, 66)"/>\
</svg>');
border-image-slice: 100% 0 0 0 fill;
border-image-width: 200px 0 0 0;
border-image-outset: 0;
border-image-repeat: stretch round;
padding: 1em;
color: white;
}
main {
flex: 1;
}
</style>
</head>
<body>
<header></header>
<main></main>
<footer>Stay in touch</footer>
</body>
</html>