<body>
  <header>Logo</header>
  <section>Hoş geldiniz.</section>
  <main>
    <section>
      <img type="image/jpeg" alt="İstanbul" width="150" src="https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg">
      <h2>Lorem ipsum dolor</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas eum deserunt aperiam dolores a alias architecto consequuntur. Voluptas eum deserunt aperiam dolores a alias architecto consequuntur.</p>
      <a href="#">İncele</a>
    </section>
    <section>
      <img type="image/jpeg" src="https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg">
      <h2>Lorem ipsum dolor, sit amet consectetur</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <a href="#">İncele</a>
    </section>
    <section>
      <img type="image/jpeg" src="https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg">
      <h2>Lorem ipsum dolor, sit amet consectetur asd asdasdas</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas eum deserunt aperiam.</p>
      <a href="#">İncele</a>
    </section>
    <section>
      <img type="image/jpeg" src="https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg">

      <h2>Lorem ipsum dolor, sit amet consectetur</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <a href="#">İncele</a>
    </section>
  </main>
</body>
:root {
  --white: rgb(255,255,255);
}

body {
  display: grid;
  grid-template-columns: 100px 3fr 5fr;
  height: 100vh;
  background-color: rgb(45, 79, 100);
}

header {
  background-color: rgba(31, 31, 31, 0.3);
}

main {
  display: grid;
  gap-column: 20px;
  height: 100vh;
  grid-template-columns: repeat(4, 1fr);
}

section {
  padding: 60px 20px 10px 20px;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  
  img {
    width: 220px;
  }
}

section h2 {
  font-size: 20px;
}

section a {
  margin: 4px;
  padding: 7px 35px;
  font-size: 15px;
  background: transparent;
  border: 1px solid rgb(255, 255, 255);
  color: var(--white);
  text-decoration:none;
  text-align: center;
  display: grid;
  align-items: center;
  height: 30px;
  transition: .4s border, background linear;
}

section a:hover {
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
}

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:300,800');

body {
  font-family: 'Merriweather Sans', sans-serif;
  margin: 0;
  padding: 0;
  color: rgb(255,255,255);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.