dpkreativ/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <section class="image-section">
        <div class="image-box"></div>
      </section>
      <section class="info-section">
        <div class="info-box">
          <p>AUG 18 AT 12 AM UTC+01 - AUG 21 AT 2 PM UTC+01</p>
          <h1>ABLAZE CONFERENCE 2021</h1>
          <p>Free <span class="dot"></span> Online Event</p>
        </div>
        <div class="cta-box">
          <button>Join Event</button>
        </div>
      </section>
      <hr />
      <section class="actions-section">
        <div class="more-info">
          <p>About</p>
          <p>Discussion</p>
        </div>
        <div class="actions">
          <button>Interested</button>
          <button>Going</button>
          <button>Invite</button>
          <button>Share</button>
          <button>...</button>
        </div>
      </section>
    </main>
  </body>
</html>

## style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  justify-items: center;
}

main {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  max-width: 80vw;
  /* background-color: rgba(211, 211, 211, 0.248); */
}

button {
  border: none;
  border-radius: 5px;
  padding: 0.5rem;
}

.image-section {
  display: grid;
  justify-items: center;
}

.image-box {
  height: 20rem;
  width: 80%;
  background-color: black;
}

.info-section,
.actions-section {
  display: grid;
  grid-template-columns: repeat(2, auto);
  padding: 1rem 0;
}

.cta-box,
.actions {
  place-self: end;
}
.more-info {
  display: flex;
}

.more-info p {
  margin-right: 1rem;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<main>
	<section class="image-section">
	<div class="image-box"></div>
	</section>
	<section class="info-section">
	<div class="info-box">
	<p>AUG 18 AT 12 AM UTC+01 - AUG 21 AT 2 PM UTC+01</p>
	<h1>ABLAZE CONFERENCE 2021</h1>
	<p>Free <span class="dot"></span> Online Event</p>
	</div>
	<div class="cta-box">
	<button>Join Event</button>
	</div>
	</section>
	<hr />
	<section class="actions-section">
	<div class="more-info">
	<p>About</p>
	<p>Discussion</p>
	</div>
	<div class="actions">
	<button>Interested</button>
	<button>Going</button>
	<button>Invite</button>
	<button>Share</button>
	<button>...</button>
	</div>
	</section>
	</main>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	display: grid;
	justify-items: center;
	}

	main {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	max-width: 80vw;
	/* background-color: rgba(211, 211, 211, 0.248); */
	}

	button {
	border: none;
	border-radius: 5px;
	padding: 0.5rem;
	}

	.image-section {
	display: grid;
	justify-items: center;
	}

	.image-box {
	height: 20rem;
	width: 80%;
	background-color: black;
	}

	.info-section,
	.actions-section {
	display: grid;
	grid-template-columns: repeat(2, auto);
	padding: 1rem 0;
	}

	.cta-box,
	.actions {
	place-self: end;
	}
	.more-info {
	display: flex;
	}

	.more-info p {
	margin-right: 1rem;
	}