body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  text-align: center;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.btn {
  background-color: black;
  color: white;
  padding: 20px 40px;
  border: 4px solid;
  font-size: 25px;
  cursor: pointer;
  transition: 1s background-color;
  white-space: nowrap;
}

.btn:hover {
  background-color: white;
  color: black;
}

h1{
  font-size: 100px;
  color: aliceblue;
  backdrop-filter: brightness(.5);
  letter-spacing: 4px;
}
.split{
  width: 50%;
  height: 100%;
  top: 0;
  
}

.split.left {
  position: absolute;
  left: 0;
  background-color: pink;
  background-image: url("https://cdn-images.dzcdn.net/images/artist/e4feeda1395b8bd277ec97d4038ec1a2/500x500-000000-80-0-0.jpg");
  background-size: cover;
}

.split.right {
  position: absolute;
  right: 0;
  background-color: lightblue;
  background-image: url("https://cdn-images.dzcdn.net/images/cover/b12cc17dec4117eeeffa1496fb50f705/500x500-000000-80-0-0.jpg");
  background-size: cover;
}

.active-left .left{
  width: 75%;
}

.active-left .right{
  width: 25%;
}
.active-right .left{
  width: 25%;
}
.active-right .right{
  width: 75%;
}