<div class="grid">
<div class="card">
<span class="icon">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5 3.5C14.5 3.5 14.5 5.5 12 5.5C9.5 5.5 9.5 3.5 9.5 3.5H7.5L4.20711 6.79289C3.81658 7.18342 3.81658 7.81658 4.20711 8.20711L6.5 10.5V20.5H17.5V10.5L19.7929 8.20711C20.1834 7.81658 20.1834 7.18342 19.7929 6.79289L16.5 3.5H14.5Z"
/>
</svg>
</span>
<h4>Products</h4>
<p>
Standard chunk of Lorem Ipsum used since the 1500s is showed below
for those interested.
</p>
<div class="shine"></div>
<div class="background">
<div class="tiles">
<div class="tile tile-1"></div>
<div class="tile tile-2"></div>
<div class="tile tile-3"></div>
<div class="tile tile-4"></div>
<div class="tile tile-5"></div>
<div class="tile tile-6"></div>
<div class="tile tile-7"></div>
<div class="tile tile-8"></div>
<div class="tile tile-9"></div>
<div class="tile tile-10"></div>
</div>
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</div>
<div class="card">
<span class="icon">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 9.5V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5H9.5C10.0523 4.5 10.5 4.94772 10.5 5.5V9.5C10.5 10.0523 10.0523 10.5 9.5 10.5H5.5C4.94772 10.5 4.5 10.0523 4.5 9.5Z"
/>
<path
d="M13.5 18.5V14.5C13.5 13.9477 13.9477 13.5 14.5 13.5H18.5C19.0523 13.5 19.5 13.9477 19.5 14.5V18.5C19.5 19.0523 19.0523 19.5 18.5 19.5H14.5C13.9477 19.5 13.5 19.0523 13.5 18.5Z"
/>
<path d="M4.5 19.5L7.5 13.5L10.5 19.5H4.5Z" />
<path
d="M16.5 4.5C18.1569 4.5 19.5 5.84315 19.5 7.5C19.5 9.15685 18.1569 10.5 16.5 10.5C14.8431 10.5 13.5 9.15685 13.5 7.5C13.5 5.84315 14.8431 4.5 16.5 4.5Z"
/>
</svg>
</span>
<h4>Categories</h4>
<p>
Standard chunk of Lorem Ipsum used since the 1500s is showed below
for those interested.
</p>
<div class="shine"></div>
<div class="background">
<div class="tiles">
<div class="tile tile-1"></div>
<div class="tile tile-2"></div>
<div class="tile tile-3"></div>
<div class="tile tile-4"></div>
<div class="tile tile-5"></div>
<div class="tile tile-6"></div>
<div class="tile tile-7"></div>
<div class="tile tile-8"></div>
<div class="tile tile-9"></div>
<div class="tile tile-10"></div>
</div>
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</div>
</div>
<label class="day-night">
<input type="checkbox" checked />
<div></div>
</label>
<!-- twitter -->
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>body {
--background-color: #18181B;
--text-color: #A1A1AA;
--card-background-color: rgba(255, 255, 255, .015);
--card-border-color: rgba(255, 255, 255, 0.1);
--card-box-shadow-1: rgba(0, 0, 0, 0.05);
--card-box-shadow-1-y: 3px;
--card-box-shadow-1-blur: 6px;
--card-box-shadow-2: rgba(0, 0, 0, 0.1);
--card-box-shadow-2-y: 8px;
--card-box-shadow-2-blur: 15px;
--card-label-color: #FFFFFF;
--card-icon-color: #D4D4D8;
--card-icon-background-color: rgba(255, 255, 255, 0.08);
--card-icon-border-color: rgba(255, 255, 255, 0.12);
--card-shine-opacity: .1;
--card-shine-gradient: conic-gradient(from 205deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10B981 25deg, rgba(52, 211, 153, 0.18) 295deg, rgba(16, 185, 129, 0) 360deg);
--card-line-color: #2A2B2C;
--card-tile-color: rgba(16, 185, 129, 0.05);
--card-hover-border-color: rgba(255, 255, 255, 0.2);
--card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
--card-hover-box-shadow-1-y: 5px;
--card-hover-box-shadow-1-blur: 10px;
--card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
--card-hover-box-shadow-2-y: 15px;
--card-hover-box-shadow-2-blur: 25px;
--card-hover-icon-color: #34D399;
--card-hover-icon-background-color: rgba(52, 211, 153, 0.1);
--card-hover-icon-border-color: rgba(52, 211, 153, 0.2);
--blur-opacity: .01;
&.light {
--background-color: #FAFAFA;
--text-color: #52525B;
--card-background-color: transparent;
--card-border-color: rgba(24, 24, 27, 0.08);
--card-box-shadow-1: rgba(24, 24, 27, 0.02);
--card-box-shadow-1-y: 3px;
--card-box-shadow-1-blur: 6px;
--card-box-shadow-2: rgba(24, 24, 27, 0.04);
--card-box-shadow-2-y: 2px;
--card-box-shadow-2-blur: 7px;
--card-label-color: #18181B;
--card-icon-color: #18181B;
--card-icon-background-color: rgba(24, 24, 27, 0.04);
--card-icon-border-color: rgba(24, 24, 27, 0.1);
--card-shine-opacity: .3;
--card-shine-gradient: conic-gradient(from 225deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10B981 25deg, #EDFAF6 285deg, #FFFFFF 345deg, rgba(16, 185, 129, 0) 360deg);
--card-line-color: #E9E9E7;
--card-tile-color: rgba(16, 185, 129, 0.08);
--card-hover-border-color: rgba(24, 24, 27, 0.15);
--card-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
--card-hover-box-shadow-1-y: 3px;
--card-hover-box-shadow-1-blur: 6px;
--card-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
--card-hover-box-shadow-2-y: 8px;
--card-hover-box-shadow-2-blur: 15px;
--card-hover-icon-color: #18181B;
--card-hover-icon-background-color: rgba(24, 24, 27, 0.04);
--card-hover-icon-border-color: rgba(24, 24, 27, 0.34);
--blur-opacity: .1;
}
&.toggle .grid * {
transition-duration: 0s !important;
}
}
.grid {
display: grid;
grid-template-columns: repeat(2, 240px);
grid-gap: 32px;
position: relative;
z-index: 1;
}
.card {
background-color: var(--background-color);
box-shadow: 0px var(--card-box-shadow-1-y) var(--card-box-shadow-1-blur) var(--card-box-shadow-1), 0px var(--card-box-shadow-2-y) var(--card-box-shadow-2-blur) var(--card-box-shadow-2), 0 0 0 1px var(--card-border-color);
padding: 56px 16px 16px 16px;
border-radius: 15px;
cursor: pointer;
position: relative;
transition: box-shadow .25s;
&::before {
content: '';
position: absolute;
inset: 0;
border-radius: 15px;
background-color: var(--card-background-color);
}
.icon {
z-index: 2;
position: relative;
display: table;
padding: 8px;
&::after {
content: '';
position: absolute;
inset: 4.5px;
border-radius: 50%;
background-color: var(--card-icon-background-color);
border: 1px solid var(--card-icon-border-color);
backdrop-filter: blur(2px);
transition: background-color .25s, border-color .25s;
}
svg {
position: relative;
z-index: 1;
display: block;
width: 24px;
height: 24px;
transform: translateZ(0);
color: var(--card-icon-color);
transition: color .25s;
}
}
h4 {
z-index: 2;
position: relative;
margin: 12px 0 4px 0;
font-family: inherit;
font-weight: 600;
font-size: 14px;
line-height: 2;
color: var(--card-label-color);
}
p {
z-index: 2;
position: relative;
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--text-color);
}
.shine {
border-radius: inherit;
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
opacity: 0;
transition: opacity .5s;
&:before {
content: '';
width: 150%;
padding-bottom: 150%;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: 55%;
filter: blur(35px);
opacity: var(--card-shine-opacity);
transform: translateX(-50%);
background-image: var(--card-shine-gradient);
}
}
.background {
border-radius: inherit;
position: absolute;
inset: 0;
overflow: hidden;
-webkit-mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
.tiles {
opacity: 0;
transition: opacity .25s;
.tile {
position: absolute;
background-color: var(--card-tile-color);
animation-duration: 8s;
animation-iteration-count: infinite;
opacity: 0;
&.tile-4,
&.tile-6,
&.tile-10 {
animation-delay: -2s;
}
&.tile-3,
&.tile-5,
&.tile-8 {
animation-delay: -4s;
}
&.tile-2,
&.tile-9 {
animation-delay: -6s;
}
&.tile-1 {
top: 0;
left: 0;
height: 10%;
width: 22.5%;
}
&.tile-2 {
top: 0;
left: 22.5%;
height: 10%;
width: 27.5%;
}
&.tile-3 {
top: 0;
left: 50%;
height: 10%;
width: 27.5%;
}
&.tile-4 {
top: 0;
left: 77.5%;
height: 10%;
width: 22.5%;
}
&.tile-5 {
top: 10%;
left: 0;
height: 22.5%;
width: 22.5%;
}
&.tile-6 {
top: 10%;
left: 22.5%;
height: 22.5%;
width: 27.5%;
}
&.tile-7 {
top: 10%;
left: 50%;
height: 22.5%;
width: 27.5%;
}
&.tile-8 {
top: 10%;
left: 77.5%;
height: 22.5%;
width: 22.5%;
}
&.tile-9 {
top: 32.5%;
left: 50%;
height: 22.5%;
width: 27.5%;
}
&.tile-10 {
top: 32.5%;
left: 77.5%;
height: 22.5%;
width: 22.5%;
}
}
}
@keyframes tile {
0%,
12.5%,
100% {
opacity: 1;
}
25%,
82.5% {
opacity: 0;
}
}
.line {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .35s;
&:before,
&:after {
content: '';
position: absolute;
background-color: var(--card-line-color);
transition: transform .35s;
}
&:before {
left: 0;
right: 0;
height: 1px;
transform-origin: 0 50%;
transform: scaleX(0);
}
&:after {
top: 0;
bottom: 0;
width: 1px;
transform-origin: 50% 0;
transform: scaleY(0);
}
&.line-1 {
&:before {
top: 10%;
}
&:after {
left: 22.5%;
}
&:before,
&:after {
transition-delay: .3s;
}
}
&.line-2 {
&:before {
top: 32.5%;
}
&:after {
left: 50%;
}
&:before,
&:after {
transition-delay: .15s;
}
}
&.line-3 {
&:before {
top: 55%;
}
&:after {
right: 22.5%;
}
}
}
}
&:hover {
box-shadow: 0px 3px 6px var(--card-hover-box-shadow-1), 0px var(--card-hover-box-shadow-2-y) var(--card-hover-box-shadow-2-blur) var(--card-hover-box-shadow-2), 0 0 0 1px var(--card-hover-border-color);
.icon {
&::after {
background-color: var(--card-hover-icon-background-color);
border-color: var(--card-hover-icon-border-color);
}
svg {
color: var(--card-hover-icon-color);
}
}
.shine {
opacity: 1;
transition-duration: .5s;
transition-delay: 0s;
}
.background {
.tiles {
opacity: 1;
transition-delay: .25s;
.tile {
animation-name: tile;
}
}
.line {
opacity: 1;
transition-duration: .15s;
&:before {
transform: scaleX(1);
}
&:after {
transform: scaleY(1);
}
&.line-1 {
&:before,
&:after {
transition-delay: .0s;
}
}
&.line-2 {
&:before,
&:after {
transition-delay: .15s;
}
}
&.line-3 {
&:before,
&:after {
transition-delay: .3s;
}
}
}
}
}
}
.day-night {
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
opacity: .3;
input {
display: none;
&+div {
border-radius: 50%;
width: 20px;
height: 20px;
position: relative;
box-shadow: inset 8px -8px 0 0 var(--text-color);
transform: scale(1) rotate(-2deg);
transition: box-shadow .5s ease 0s, transform .4s ease .1s;
&:before {
content: '';
width: inherit;
height: inherit;
border-radius: inherit;
position: absolute;
left: 0;
top: 0;
transition: background-color .3s ease;
}
&:after {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
margin: -3px 0 0 -3px;
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 -23px 0 var(--text-color), 0 23px 0 var(--text-color), 23px 0 0 var(--text-color), -23px 0 0 var(--text-color), 15px 15px 0 var(--text-color), -15px 15px 0 var(--text-color), 15px -15px 0 var(--text-color), -15px -15px 0 var(--text-color);
transform: scale(0);
transition: all .3s ease;
}
}
&:checked+div {
box-shadow: inset 20px -20px 0 0 var(--text-color);
transform: scale(.5) rotate(0deg);
transition: transform .3s ease .1s, box-shadow .2s ease 0s;
&:before {
background: var(--text-color);
transition: background-color .3s ease .1s;
}
&:after {
transform: scale(1);
transition: transform .5s ease .15s;
}
}
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center
body {
min-height: 100vh;
display: flex;
font-family: 'Inter', Arial;
justify-content: center;
align-items: center;
background-color: var(--background-color);
overflow: hidden;
&:before {
content: '';
position: absolute;
inset: 0 -60% 65% -60%;
background-image: radial-gradient(ellipse at top, #10B981 0%, var(--background-color) 50%);
opacity: var(--blur-opacity);
}
.twitter {
position: fixed;
display: block;
right: 12px;
bottom: 12px;
svg {
width: 32px;
height: 32px;
fill: #fff;
}
}
}// Dark & Light toggle
document.querySelector(".day-night input").addEventListener("change", () => {
document.querySelector("body").classList.add("toggle");
setTimeout(() => {
document.querySelector("body").classList.toggle("light");
setTimeout(
() => document.querySelector("body").classList.remove("toggle"),
10
);
}, 5);
});
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.