<div class="container">
<div class="row one">
<div class="column one">
<div class="text set1">
<h2>OBSERVE</h2>
<h2 style="letter-spacing: 7px">OPPOSE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
</div>
<div class="text set2">
<h2>OBSERVE</h2>
<h2 style="letter-spacing: 7px">OPPOSE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
</div>
<div class="text set3">
<h2>OBSERVE</h2>
<h2 style="letter-spacing: 7px">OPPOSE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
<h2>UPSCALE</h2>
</div>
</div>
<div class="column two">
<div class="rects set1">
<div class="rect one"></div>
<div class="rect two"></div>
<div class="rect three"></div>
<div class="rect four"></div>
<div class="rect five"></div>
<div class="rect six"></div>
</div>
<div class="rects set2">
<div class="rect one"></div>
<div class="rect two"></div>
<div class="rect three"></div>
<div class="rect four"></div>
<div class="rect five"></div>
<div class="rect six"></div>
</div>
<div class="rects set3">
<div class="rect one"></div>
<div class="rect two"></div>
<div class="rect three"></div>
<div class="rect four"></div>
<div class="rect five"></div>
<div class="rect six"></div>
</div>
</div>
</div>
<div class="row two">
<a href="https://twitter.com/juxtopposed" class="column one" target="_blank">
<div class="button set1">CONNECT</div>
<div class="button set2">CONNECT</div>
<div class="button set3">CONNECT</div>
</a>
<a href="https://dribbble.com/shots/21293580-Daily-Design-Code-6-Retro-Glitch-Effect-Colors-RGB" target="_blank" class="column two">
<div class="button set1">VIEW DESIGN</div>
<div class="button set2">VIEW DESIGN</div>
<div class="button set3">VIEW DESIGN</div>
</a>
</div>
<div class="border">
<div class="border set1"></div>
<div class="border set2"></div>
<div class="border set3"></div>
</div>
</div>
:root {
--red: #FF0000;
--green: #00FF00;
--blue: #0000FF;
--black: #000000;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 5em auto;
height: 100vh;
font-family: 'Inter';
background-color: var(--black);
}
body > * {
filter: blur(4px);
}
.container {
display: flex;
flex-direction: column;
width: 840px;
height: 800px;
gap: 2em;
position: relative;
padding: 3em;
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
position: relative;
gap: 2em;
}
.column {
display: flex;
flex-direction: column;
position: relative;
}
.row.one {
height: 80%;
width: 100%
}
.row.two {
height: 20%;
width: 100%;
}
.column.one {
width: 40%;
}
.column.two {
width: 60%;
}
/* text */
h2 {
font-size: 60px;
margin: 0;
}
a {
font-size: 45px;
text-decoration: none;
color: inherit;
z-index: 5;
}
a > * {
display: flex;
height: 100%;
justify-content: center !important;
align-items: center;
}
.text.set1 {
color: var(--red);
}
.text.set2 {
color: var(--green);
}
.text.set3 {
color: var(--blue);
}
.set1 {
position: absolute;
mix-blend-mode: screen;
transform: translate(4px, 4px);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: space-between;
box-sizing: border-box;
animation: set1 1s infinite;
}
.set2 {
position: absolute;
mix-blend-mode: screen;
transform: translate(0,0);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: space-between;
box-sizing: border-box;
animation: set2 1s infinite;
}
.set3 {
position: absolute;
mix-blend-mode: screen;
transform: translate(-4px, -4px);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: space-between;
box-sizing: border-box;
animation: set3 1s infinite;
}
.rects.set1, .rects.set2, .rects.set3 {
padding: 0.5em;
}
.rects.set1 > * {
background-color: var(--red);
}
.rects.set2 > * {
background-color: var(--green);
}
.rects.set3 > * {
background-color: var(--blue);
}
.rect {
width: 100%;
position: relative;
}
.rect.one {
height: 2%;
}
.rect.two {
height: 4%;
}
.rect.three {
height: 7%;
}
.rect.four {
height: 10%;
}
.rect.five {
height: 15%;
}
.rect.six {
height: 30%;
}
.border {
top: 0;
left: 0;
}
.border.set1 {
border: 12px solid var(--red);
}
.border.set2 {
border: 12px solid var(--green);
}
.border.set3 {
border: 12px solid var(--blue);
}
.button {
width: 100%;
}
.button.set1 {
color: var(--red);
border: 12px solid var(--red);
}
.button.set2 {
color: var(--green);
border: 12px solid var(--green);
}
.button.set3 {
color: var(--blue);
border: 12px solid var(--blue);
}
@keyframes set1 {
0% {transform: translate(4px, 4px)}
15% {transform: translate(5px, 6px)}
30% {transform: translate(4px, 4px)}
45% {transform: translate(5px, 6px)}
60% {transform: translate(4px, 4px)}
75% {transform: translate(6px, -2px)}
100% {transform: translate(4px, 4px)}
}
@keyframes set2 {
0% {transform: translate(0px, 0px)}
15% {transform: translate(-1px, -2px)}
30% {transform: translate(0px, 0px)}
45% {transform: translate(-1px, -2px)}
60% {transform: translate(0px, 0px)}
75% {transform: translate(-1px, 1px)}
100% {transform: translate(0px, 0px)}
}
@keyframes set3 {
0% {transform: translate(-4px, -4px)}
15% {transform: translate(-6px, -6px)}
30% {transform: translate(-4px, -4px)}
45% {transform: translate(0px, 0px)}
60% {transform: translate(-4px, -4px)}
75% {transform: translate(-3px, -5px)}
100% {transform: translate(-4px, -4px)}
}
a:hover > .set1 {
animation: none;
transform: translate(0,0);
}
a:hover > .set2 {
animation: none;
transform: translate(0,0);
}
a:hover > .set3 {
animation: none;
transform: translate(0,0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.