.split-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: relative;
width: 100%;
height: 500px;
background: #333;
overflow: hidden;
}
.split {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
transition: width 1s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.split.left {
left: 0;
background: url("https://placehold.co/1000x800/2563eb/ffffff?text=Design") center center/cover no-repeat;
}
.split.left::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(37, 99, 235, 0.7);
}
.split.right {
right: 0;
background: url("https://placehold.co/1000x800/1f2937/ffffff?text=Code") center center/cover no-repeat;
}
.split.right::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(31, 41, 55, 0.8);
}
.split h1 {
font-size: 3rem;
color: #fff;
position: relative;
z-index: 10;
white-space: nowrap;
}
.btn {
position: relative;
z-index: 10;
text-decoration: none;
color: #fff;
border: 2px solid #fff;
padding: 15px 30px;
font-weight: 700;
text-transform: uppercase;
margin-top: 20px;
transition: background 0.2s;
}
.btn:hover {
background: rgba(255,255,255,0.2);
}
/* Hover Effects */
.split-container:hover .split {
width: 30%;
}
.split-container .split:hover {
width: 70%;
}
@media(max-width: 800px) {
.split-container {
height: 700px;
}
.split h1 {
font-size: 2rem;
}
.split, .split-container:hover .split, .split-container .split:hover {
width: 100%;
height: 50%;
position: relative;
}
}