jmnyarega/background-image.html

## background-image.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Images</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet">
    <style>
      :root {
        --color1: rgba(255, 255, 255, 0.8);
        --gradient: linear-gradient(to left, #703091, #2b7be5);
        --white: white;
      }

    *{
        font-family: 'Roboto', sans-serif;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .news-section {
        margin: 15px auto;
        border-radius: 0.5rem;
        background: url('https://i.picsum.photos/id/866/200/300.jpg') no-repeat;
        height: 300px;
        background-color: #444;
        background-blend-mode: multiply;
        color: white;
        width: 700px;
        background-size: cover;
        padding: 10px;
      }

      button {
        border: none;
        padding: 5px 10px;
        color: var(--white);
        background-image: var(--gradient);
        cursor: pointer;
        border-radius: 0.5em;
      }

      .header-section {
        margin: 10px 0;
        word-spacing: 2px;
      }

      .header-section:after {
        content: "";
        background-image: var(--gradient);
        margin-top: 10px;
        width: 100px;
        height: 3px;
        border-radius: 0.5em;
        display: block;
        opacity: 0.6;
      }

      .title-section {
        margin: 20px 0;
        font-weight: bolder;
        letter-spacing: 1px;
      }

      .availability {
        margin: 10px 0;
        font-weight: bold;
        font-size: 0.7rem;
      }
      .content-section {
        margin: 10px 0;
        text-align: justify;
        line-height: 1.6;
        width: 50ch;
      }
    </style>
  </head>
  <body>
    <div class="news-section">
      <div class="content-area">
        <h5 class="header-section">
          On demand Webinar
        </h5>
        <h4 class="title-section">
          DevOps to NoOps- Digital Transformation is not just about technology, 80% is culture - a CTO Perspective
        </h4>
        <p class="availability"> Available now</p>
        <p class="content-section">
          Hear from the mastermind behind the vision and execution, our CEO Bern Greifender, on what it took to
          radically change the culture, sell and deliver on what is today's market leading Software Intelligence
          platform
        </p>
        <button>Watch now</button>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Background Images</title>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet">
	<style>
	:root {
	--color1: rgba(255, 255, 255, 0.8);
	--gradient: linear-gradient(to left, #703091, #2b7be5);
	--white: white;
	}

	*{
	font-family: 'Roboto', sans-serif;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	.news-section {
	margin: 15px auto;
	border-radius: 0.5rem;
	background: url('https://i.picsum.photos/id/866/200/300.jpg') no-repeat;
	height: 300px;
	background-color: #444;
	background-blend-mode: multiply;
	color: white;
	width: 700px;
	background-size: cover;
	padding: 10px;
	}

	button {
	border: none;
	padding: 5px 10px;
	color: var(--white);
	background-image: var(--gradient);
	cursor: pointer;
	border-radius: 0.5em;
	}

	.header-section {
	margin: 10px 0;
	word-spacing: 2px;
	}

	.header-section:after {
	content: "";
	background-image: var(--gradient);
	margin-top: 10px;
	width: 100px;
	height: 3px;
	border-radius: 0.5em;
	display: block;
	opacity: 0.6;
	}

	.title-section {
	margin: 20px 0;
	font-weight: bolder;
	letter-spacing: 1px;
	}

	.availability {
	margin: 10px 0;
	font-weight: bold;
	font-size: 0.7rem;
	}
	.content-section {
	margin: 10px 0;
	text-align: justify;
	line-height: 1.6;
	width: 50ch;
	}
	</style>
	</head>
	<body>
	<div class="news-section">
	<div class="content-area">
	<h5 class="header-section">
	On demand Webinar
	</h5>
	<h4 class="title-section">
	DevOps to NoOps- Digital Transformation is not just about technology, 80% is culture - a CTO Perspective
	</h4>
	<p class="availability"> Available now</p>
	<p class="content-section">
	Hear from the mastermind behind the vision and execution, our CEO Bern Greifender, on what it took to
	radically change the culture, sell and deliver on what is today's market leading Software Intelligence
	platform
	</p>
	<button>Watch now</button>
	</div>
	</div>
	</body>
	</html>