<h1>Choose Your Weapon</h1>
<div class="container">
<div class="product">
<div class="effect-1"></div>
<div class="effect-2"></div>
<div class="content">
<div class="exercise"></div>
</div>
<span class="title">
Exercise
<span>Boost Endorphins</span>
</span>
</div>
<div class="product">
<div class="effect-1"></div>
<div class="effect-2"></div>
<div class="content">
<div class="sleep"></div>
</div>
<span class="title">
Sleep
<span>Restore Balance</span>
</span>
</div>
<div class="product">
<div class="effect-1"></div>
<div class="effect-2"></div>
<div class="content">
<div class="meditation"></div>
</div>
<span class="title">
Meditation
<span>Practice gratitude</span>
</span>
</div>
</div>
<div class="twitter"><i class="fab fa-twitter"></i><a href="https://twitter.com/fitriirl">@FITRIIRL</a></div>
body {
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
font-family: "Josefin Slab";
height: 100vh;
}
h1 {
font-size: 2.2rem;
margin-top: 80px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 1vw auto;
position: relative;
text-align: center;
width: 94vw;
}
.product {
flex: auto;
font-size: 1.5rem;
margin: 0 1vw calc(1vw + 50px) 1vw;
min-width: calc(33% - 2vw);
position: relative;
}
.product:before {
content: "";
float: left;
padding-top: 100%;
}
.content {
background: white;
border-radius: 30%;
height: 84%;
margin: 8%;
position: absolute;
width: 84%;
vertical-align: middle;
z-index: 5000;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
@keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {
top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
.title {
position: relative;
top: calc(100% + 16px);
}
.title span {
display: block;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 0.6rem;
letter-spacing: 0.1rem;
margin-top: 8px;
text-transform: uppercase;
}
.exercise {
background-image: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
border-radius: 5px;
height: 50%;
margin: 25%;
width: 50%;
}
.sleep {
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
border-radius: 50%;
height: 50%;
margin: 25%;
width: 50%;
}
.meditation {
background-image: linear-gradient(
to top,
#f3e7e9 0%,
#e3eeff 99%,
#e3eeff 100%
);
border-radius: 5px;
height: 40%;
margin: 30%;
transform: rotate(45deg);
width: 40%;
}
.twitter {
background-image: linear-gradient(
to top,
#1e3c72 0%,
#1e3c72 1%,
#2a5298 100%
);
border-radius: 14px;
bottom: 20px;
color: #fff;
font-weight: 400;
letter-spacing: 0.1rem;
line-height: 28px;
padding: 0 12px;
position: fixed;
right: 20px;
z-index: 5000;
}
.twitter i {
margin-right: 6px;
position: relative;
top: 2px;
}
.twitter a {
color: #fff;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 0.7rem;
text-decoration: none;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.