HERO IMAGE

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
    body , html {
	  height: 100%;
	}
	.container {
	  position: relative;
	  background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png");
	  background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
	  height: 80%;

	}
	.text {
	  text-align: center;
      position: absolute;
      left : 30%;
	  top: 30%;
      width: 70%;
	  background-color: rgba(256 , 256,256,0.5);
	  font-size: 30px;
	}
	button {
	  background-color: blue;
	  font-size: 20px;
	  padding : 8px;
	  color: white;
	}
	button:hover {
	  background-color: #cccccc;
	  color: black;
	}
</style>
</head>
<body>
   <div class="container">
     <div class="text">
	    <h2> Hero image </h2>
		<p> Here we have created a hero image </p>
		<button> Explore more </button>
	 </div>
  </div>
</body>
</html>