Segment Test

by Juan Kristoffer Sanio

HTML

<div class="segment">
  <div class="segment__left">
    <h2>Loren Ipsum</h2>
    <p class="details center--absolute">Donec cursus ipsum velit, id feugiat odio euismod vitae. Ut ac massa sed quam pellentesque interdum. Nam ornare tempus metus, at iaculis dui ultricies nec. Nulla odio dolor</p>
  </div>
  <div class="segment__right">
    <div class="image_container">
      <img src="" alt="">
    </div>
  </div>
</div>

CSS

body {
  margin: 0
}

.center--absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.details {
  width: 75%;
}

.segment {
  width: 100%;
  height: 400px;
  background: #fff;
}

.segment__left,
.segment__right {
  height: 100%;
  width: 50%;
}

.segment__left {
  position: relative;
  float: left;
  background: #eee;
}

.segment__left h2 {
  text-align: center;
}

.segment__right {
  position: relative;
  float: right;
}

.image_container {
  width: 95%;
  height: 70%;
  position: absolute;
  border: 5px solid #333;
  top: 50%;
  transform: translateY(-50%);
  left: -40px;
  background: #18bc9c;
}

.image_container img {
  width: 100%;
  height: 100%;
  border: none;
}