<h1 class="header">
Splitting code by
<div class="header__option header__option--languages">how it looks. 👀</div>
<div class="header__option header__option--components">what it does. 🎉</div>
</h1>
<div class="grid grid--tiles">
<div class="gridItem">button.html</div>
<div class="gridItem">button.css</div>
<div class="gridItem">button.js</div>
<div class="gridItem">nav.html</div>
<div class="gridItem">nav.css</div>
<div class="gridItem">nav.js</div>
<div class="gridItem">modal.html</div>
<div class="gridItem">modal.css</div>
<div class="gridItem">modal.js</div>
</div>
<div class="grid grid--languages">
<div class="gridSection gridSection--html"></div>
<div class="gridSection gridSection--css"></div>
<div class="gridSection gridSection--js"></div>
</div>
<div class="grid grid--components">
<div class="gridSection gridSection--button"></div>
<div class="gridSection gridSection--nav"></div>
<div class="gridSection gridSection--modal"></div>
</div>
body {
font-family: sans-serif;
font-weight: bold;
}
.grid {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
position: fixed;
top: 50%;
left: 50%;
transform: translateY(40px) translate(-50%, -50%);
}
.grid--languages {
grid-column-gap: 30px;
animation: languagesFade 10s linear infinite;
}
.grid--components {
grid-row-gap: 30px;
animation: componentsFade 10s linear infinite;
}
.grid--tiles {
animation: tilesMovement 10s linear infinite;
z-index: 5;
}
.gridItem {
--bg: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 5px;
background: var(--bg);
color: #fff;
}
.gridItem:nth-of-type(3n - 2)::after,
.gridItem:nth-of-type(3n - 1)::after {
content: '';
position: absolute;
top: 50%;
left: 100%;
width: 30px;
height: 4px;
transform: translateY(-50%);
background: var(--bg);
box-shadow: 0 8px 0 var(--bg), 0 -8px 0 var(--bg);
animation: stringWidth 10s linear infinite;
}
.gridSection {
border-radius: 5px;
box-shadow: 0 0 0 10px currentColor;
position: relative;
}
.grid--languages .gridSection {
grid-row: span 3;
}
.grid--components .gridSection {
grid-column: span 3;
}
.gridSection--html {
background: #f48042;
color: #f48042;
}
.gridSection--css {
background: #4192f4;
color: #4192f4;
}
.gridSection--js {
background: #ead33c;
color: #ead33c;
}
.gridSection--button {
background: #1a9937;
color: #1a9937;
}
.gridSection--nav {
background: #611999;
color: #611999;
}
.gridSection--modal {
background: #bc1297;
color: #bc1297;
}
.grid--languages .gridSection::before {
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
.gridSection--html::before {
content: 'HTML';
}
.gridSection--css::before {
content: 'CSS';
}
.gridSection--js::before {
content: 'JS';
}
.grid--components .gridSection::before {
position: absolute;
left: -30px;
top: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
font-size: 24px;
}
.gridSection--button::before {
content: 'Button';
}
.gridSection--nav::before {
content: 'Nav';
}
.gridSection--modal::before {
content: 'Modal';
}
@keyframes languagesFade {
0%, 35%, 100% {
opacity: 1;
}
40%, 95% {
opacity: 0;
}
}
@keyframes componentsFade {
0%, 45%, 90%, 100% {
opacity: 0;
}
50%, 85% {
opacity: 1;
}
}
@keyframes tilesMovement {
0%, 40%, 95%, 100% {
grid-column-gap: 30px;
grid-row-gap: 10px;
}
45%, 90% {
grid-row-gap: 30px;
grid-column-gap: 10px;
}
}
@keyframes stringWidth {
0%, 40%, 95%, 100% {
width: 30px;
}
45%, 90% {
width: 10px;
}
}
.header {
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-200px) translate(-50%, -100%);
text-align: center;
font-size: 32px;
white-space: nowrap;
}
.header__option {
display: inline;
}
.header__option--languages {
margin-top: 24px;
animation: languagesFade 10s linear infinite;
margin-right: -256px;
}
.header__option--components {
animation: componentsFade 10s linear infinite;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.