<div class="intro">
<div class="sides">
<div class="side monkey">
<h2 class="name">Monkey</h2>
<div class="emoji">🐒</div>
</div>
<div class="versus">
<span>vs.</span>
</div>
<div class="side robot">
<h2 class="name">Robot</h2>
<div class="emoji">🤖</div>
</div>
</div>
</div>
.sides {
animation: 0.7s curtain cubic-bezier(.86,0,.07,1) 0.4s both;
display: grid;
grid-template-columns: 50vw 50vw;
}
@keyframes curtain {
0% {
grid-gap: 100vw;
}
100% {
grid-gap: 0;
}
}
html,
body {
height: 100%;
margin: 0;
font-family: "Arial Black", sans-serif;
}
.intro {
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
}
.sides {
position: relative;
}
.side {
display: flex;
flex-direction: column;
align-items: center;
font-size: 6vw;
}
.monkey {
background-color: #dcc9a1;
color: #534325;
}
.robot {
background-color: #1b636f;
color: #ffffff;
flex-direction: column-reverse;
}
.name {
margin: 0.3em;
}
.emoji {
font-size: 3em;
}
.versus {
position: absolute;
width: 8vw;
height: 8vw;
background: #ffffff;
border-radius: 50%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.4vw;
color: #123456;
border-width: 10px;
border-style: solid;
border-color: #1b636f #dcc9a1 #dcc9a1 #1b636f;
transform: rotate(-45deg);
}
.versus span {
transform: rotate(35deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.