<header>
                <div class="overlay">
                    <h1>Proposed header to be considered</h1>
                    <h3>Why to use this header</h3>
                    <p>Here some text that introduces the website or covers major points of its content, its goals, and its intended audience<>
                        <br>
                    <button>read more</button>
                </div>
            </header>
            <style>
                header{background: url('../images/5.jpg'); text-align: center; width: 100%; height: auto; background-size: cover; background-attachment: fixed; position: relative; overflow: hidden; border-radius: 0% 0% 85% 85% / 50%;}
                header .overlay{ width: 100%; height: 100%; padding: 2.5vw; color: cyan; text-shadow: .1vw .1vw .1vw #333; background-image: linear-gradient(185deg, #9f05ff69 40%,#fd5e086b 100%);}
                h1 {font-family: Helvetica, cursive; font-size: 4vw; margin-bottom: 1vw;}
                h3, p {font-family: Helvetica , sans-serif; margin-bottom: 1vw;}
                button {border: none; outline: none; padding: 1vw 2vw; border-radius: 5vw;  color: black; background: seagreen; margin-bottom: 5vw; box-shadow: 0 .3vw 2vw 0 pink;}
                button:hover{cursor: pointer;}
            </style>
        

        <header class="header">
            <div class="brand-box"><span class="brand">Logo or brand</span></div>
            <div class="text-box">
                <h1 class="heading-primary">
                    <span class="heading-primary-main">Primary heading  - main heading</span>
                    <span class="heading-primary-sub">Secondary heading</span>
                </h1>
                <a href="#" class="btn btn-white btn-animated">Discover the web content</a>
            </div>
        </header>
        <style>
            .header {height: 60vh; background-image: linear-gradient(to left top,rgba(140, 211, 150, 0.8), rgba(44, 57, 49, 0.8)), url('../images/5.jpg'); background-size: cover; background-position: 
            top;position: relative;clip-path: polygon(0 0, 100% 0, 100% 35vh, 0 100%);}
            .brand-box {position: absolute; top: 4vw;left: 4vw;}
            .brand {font-size: 1.2vw;}
            .text-box {	position: absolute;	top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
            .heading-primary {color: white;text-transform: uppercase;backface-visibility: hidden; margin-bottom: 1.5vw;}
            .heading-primary-main {display: block; font-size: 2vw; font-weight: 300; letter-spacing: .25vw;}
            .heading-primary-sub {display: block;font-size: 1.25vw; font-weight: 700;letter-spacing: .74vw;}
            .btn:link, .btn:visited {text-transform: uppercase; text-decoration: none;	padding: .5vw 1vw; display: inline-block; border-radius: 10vw; transition: all .2s; position: relative;}
            .btn:hover {transform: translateY(-.3vw);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
            .btn:active {transform: translateY(-.1vw);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
            .btn-white {background-color: #fff;	color: #777;font-size: 1vw;}
        </style>
    
    

      <div class="container">
          <div class="item">
            <h3 class="h3">Uppercase Heading</h3>
            <h1 class="main">Main Title Here</h1>
            <p>Other text can come mere: to explain aim/goal of the website, to provide detailed information on the content, or to introduce the sections of the website.</p>
            <button class="btn btn-primary">Find Out More</button>
          </div>
      </div>
      <style>
        .main {color: red; text-align: center; font-family: Helvetica, sans-serif; font-size: 5vw;font-weight: normal;line-height: 3.5vw; }
        h3 .h3{font-size: 1.35vw;line-height: 2vw;text-transform: uppercase; letter-spacing: .1vw; color: lightgreen;}
        .container {margin: 0 auto;width: 100%;height: 65vh; display: flex; justify-content: center; align-items: center; background: url('2.jpg'); background-position: center center; 
        background-repeat: no-repeat; background-size: cover;}
        .item {padding: 0 3vw 0 3vw; text-align: center;}
        .btn {text-transform: uppercase;letter-spacing: .1vw; margin-top: 1vw; display: inline-block; line-height: 1.25vw; text-align: center;  white-space: nowrap; 
            vertical-align: middle; user-select: none; border: .1vw solid transparent;padding: .75vw 1.25vw; font-size: 1vw; border-radius: .25vw; transition: all .2s ease-in-out;}
        .btn-primary {color: #fff; background-color: #000; border-color: #666;}
        .btn:hover {color: #fff; background-color: #333; border-color: #666;}
                
        @media (min-width: 992px) {
          .item {width:80%;} 
        }
  
        @media (min-width: 1200px) {
          .item {width:60%;}
        }
      </style>