<article>
  <h1>Lorem ipsum dolor sit amet</h1>
  <img src="https://lh3.googleusercontent.com/S6R3hlIIAUcaGWKadN2mp8myRdFDBFiS3TlLM4NMSSvzE49cMFin_ODX-W69biYjPrISBsvgtuhoYX-87AkXsEe1tgNc5hb2SH47aGM6EkWFyoy8xup8VDqv9g" alt="oyuncak">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
article {
  display: grid;
  grid-template-columns: 1fr minmax(0, 30ch) 1fr;
  grid-template-rows: 20% 2fr auto auto 1fr;
  width: 100%;
}

h1 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
  align-self: end;
  background: black;
  color: white;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: normal;
}

p {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  align-self: start;
  background: rgba(255,255,255,.7);
  padding: 0.5rem 1rem;
  margin: 0;
  font-size: 90%;
}

img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
  z-index: -1;
  width: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  filter: brightness(130%);
}

html,
body {
  height: 100%;
  margin: 10px 0;
  @import url("https://fonts.googleapis.com/css?family=Oswald&display=swap&subset=latin-ext");
  font-family: "Oswald", sans-serif;
}

body {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  background: #999;
}

body:after,
body:before {
  content: '';
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.