CSS
.icon{
display: inline-block;
animation: animated 5s ease-in-out infinite;
color: #fff;
right: 0;
cursor: pointer;
font-size: 1.3em;
transition: 0.3s;
}
#insta{
animation-delay: 1s;
}
#tiktok{
animation-delay: 2s;
}
@keyframes animated {
0%
{
transform: translateY(0);
}
50%
{
transform: translateY(-15px);
}
100%
{
transform: translateY(0);
}
}

HTML
<div class="box">
<i class="fab fa-apple logo" aria-hidden="true"></i>
</div>
<script src="https://kit.fontawesome.com/95a02bd20d.js"></script>


CSS
body{
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
position : relative ;
color : #fff ;
font-size : 5em ;
text-shadow : 0 0 50px #0f0,
0 0 100px #0f0,
0 0 150px #0f0,
0 0 200px #0f0,
0 0 250px #0f0;
animation: animate 5s linear infinite;
}
@keyframes animate
{
0%
{
filter: hue-rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
}
}

CSS
.icons{
display: inline-flex;
}
.icons a{
margin: 0 14px;
text-decoration: none;
color: #fff;
display: block;
position: relative;
}
.icons a .layer{
width: 55px;
height: 55px;
transition: transform 0.3s;
}
.icons a:hover .layer{
transform: rotate(-35deg) skew(20deg);
}
.icons a .layer span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #fff;
border-radius: 5px;
transition: all 0.3s;
}
.icons a .layer span.fab{
font-size: 30px;
line-height: 55px;
text-align: center;
}
.icons a:hover .layer span:nth-child(1){
opacity: 0.2;
}
.icons a:hover .layer span:nth-child(2){
opacity: 0.4;
transform: translate(5px, -5px);
}
.icons a:hover .layer span:nth-child(3){
opacity: 0.6;
transform: translate(10px, -10px);
}
.icons a:hover .layer span:nth-child(4){
opacity: 0.8;
transform: translate(15px, -15px);
}
.icons a:hover .layer span:nth-child(5){
opacity: 1;
transform: translate(20px, -20px);
}
.icons a:nth-child(1) .layer span,
.icons a:nth-child(2){
color: #2fa7f1;
border-color: #2fa7f1;
}
.icons a:nth-child(2) .layer span,
.icons a:nth-child(2){
color: #ec467f;
border-color: #ec467f;
}
.icons a:hover:nth-child(1) .layer span{
box-shadow: -1px 1px 3px #1DA1F2;
}
.icons a:hover:nth-child(2) .layer span{
box-shadow: -1px 1px 3px #E1306C;
}
.icons a .text{
position: absolute;
left: 50%;
bottom: -5px;
opacity: 0;
font-weight: 500;
transform: translateX(-50%);
transition: bottom 0.3s ease, opacity 0.3s ease;
}

CSS
body {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #111;
}
.product {
cursor:pointer;
position:relative;
height:275px;
z-index:1;
}
.product:before {
content: ' ';
display:block;
width:440px;
height:180px;
position:absolute;
left:-40px;
top:-20px;
background: linear-gradient(to right, #5f7ad5, #914fff);
z-index:-1;
transition: all 0.5s ease-in-out;
}
.mattress {
margin-top:0;
transition: all 0.5s ease-in-out;
position:relative;
z-index:1;
}
.product:hover .mattress {
margin-top:-16px;
}
.product:after {
content:' ';
display:block;
height:271px;
width:383px;
position:absolute;
top: 3px;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
z-index:0;
opacity:.8;
transition: all 0.5s ease-in-out;
}
.product:hover:after {
top:10px;
left:2%;
background-size: 97% 97%;
opacity:0.35;
}
.product:hover:before {
height:325px;
}
.copy {
position:absolute;
top:230px;
left:0;
font-family: "Nunito", sans-serif;
color:#1f56e1;
letter-spacing: 0.3px;
transition: all 0.5s ease-in-out;
}
.copy p, .copy h4 {
margin:0;
}
.product:hover .copy {
color:#fff;
}
.cta {
opacity:0;
position:absolute;
top:230px;
right:15px;
background-color: #fff;
color: #243F81;
border-radius: 50px;
padding: 12px 48px;
font-family: 'Nunito', sans-serif;
font-size: 16px;
font-weight: 200;
text-decoration: none;
box-shadow: 0 16px 32px 0 rgba(0, 40, 120, .35);
transition: all 0.7s ease;
}
.cta:hover {
box-shadow: 0 0px 0px 0 rgba(0, 40, 120, 0);
background-color: #243F81;
color: #fff;
}
.product:hover .cta {
opacity:1;
}

CSS
.login {
position: relative;
height: 560px;
width: 405px;
margin: auto;
padding: 60px 60px;
background: #222;
box-shadow: 0px 30px 60px -5px #000;
}
form {
padding-top: 60px;
}
.active {
border-bottom: 2px solid #1161ed;
}
h2 {
padding-left: 12px;
font-size: 22px;
text-transform: uppercase;
padding-bottom: 5px;
letter-spacing: 2px;
display: inline-block;
font-weight: 100;
}
h2:first-child {
padding-left: 0px;
}
span {
text-transform: uppercase;
font-size: 12px;
opacity: 0.4;
display: inline-block;
position: relative;
top: -60px;
left: 15px;
transition: all 0.5s ease-in-out;
}
.text {
width: 100%;
height: 40px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0);
margin-top: 15px;
transition: all 0.5s ease-in-out;
}
input {
color: #fff;
padding: 7px;
}
label {
display: inline-block;
padding-top: 10px;
}
.sign {
background-color: #1161ed;
color: #FFF;
width: 100%;
padding: 10px 20px;
display: block;
height: 39px;
border-radius: 20px;
margin-top: 30px;
transition: all 0.5s ease-in-out;
border: none;
text-transform: uppercase;
}
.signin:hover {
background: #4082f5;
box-shadow: 0px 4px 35px -5px #4082f5;
cursor: pointer;
}
hr {
border: 1px solid rgba(255, 255, 255, 0.1);
top: 85px;
position: relative;
}
a {
text-align: center;
display: block;
top: 120px;
position: relative;
text-decoration: none;
color: rgba(255, 255, 255, 0.2);
}

CSS
body {
background-color: #2C3A47;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
}
.container{
position: relative;
height: 500px;
width: 400px;
overflow: hidden;
box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
}
.container:hover{
box-shadow: 1px 2px 10px rgba(0,0,0,0.5);
}
.img-container{
background-color: #000;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
transition: transform 0.3s ease-out;
z-index: 2;
}
.img-container:hover{
cursor: pointer;
}
.container:hover .img-container{
transform: translateY(-100px);
}
.img-container > img {
height: 100%;
width: 100%;
transition: opacity 0.3s ease-out;
}
.container:hover > .img-container > img{
opacity: 0.5;
}
.social-media {
display: flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
margin: 0;
padding: 0;
}
.social-media > li{
list-style: none;
}
.social-media > li > a{
display: block;
height: 50px;
width: 50px;
background-color: #FFF;
text-align: center;
color: #262626;
margin: 0 5px;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease-out;
}
.container:hover > .social-media > li > a{
opacity: 1;
}
.social-media > li > a > ion-icon {
font-size: 24px;
margin: 13px 0;
transition: transform 0.3s ease-out;
}
.social-media > li > a:hover > ion-icon {
transform: rotateY(360deg);
}
.container:hover .social-media li:nth-child(2) a{
transition-delay: 0.1s;
}
.container:hover .social-media li:nth-child(3) a{
transition-delay: 0.2s;
}
.container:hover .social-media li:nth-child(4) a{
transition-delay: 0.3s;
}
.container:hover .social-media li:nth-child(5) a{
transition-delay: 0.4s;
}
.user-info{
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
height: 100px;
width: 100%;
box-sizing: border-box;
padding: 10px;
text-align: center
}
.user-info > h2{
margin: 10px 0;
}
.user-info > span{
color: #262626;
font-size: 16px;
}

CSS

body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d061a;
font-family: consolas;
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}
.box{
position: relative;
width: 320px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 30px;
transition: 0.5s;
}
.box::before{
content:' ';
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%;
text-decoration: none;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
}
.box::after{
content:'';
position: absolute;
top: 0;
left: 50;
width: 50%;
height: 100%;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
filter: blur(30px);
}
.box:hover:before,
.box:hover:after{
transform: skewX(0deg);
left: 20px;
width: calc(100% - 90px);
}
.box:nth-child(1):before,
.box:nth-child(1):after{
background: linear-gradient(315deg, #ffbc00, #ff0058)
}
.box:nth-child(2):before,
.box:nth-child(2):after{
background: linear-gradient(315deg, #03a9f4, #ff0058)
}
.box:nth-child(3):before,
.box:nth-child(3):after{
background: linear-gradient(315deg, #4dff03, #00d0ff)
}
.box span{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
pointer-events: none;
}
.box span::before{
content:'';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
opacity: 0;
transition: 0.1s;
animation: animate 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}
.container .box:hover span::before{
top: -50px;
left: 50px;
width: 100px;
height: 100px;
opacity: 1;
}
.container .box span::after{
content:'';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
opacity: 0;
transition: 0.5s;
animation: animate 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
animation-delay: -1s;
}
.container .box:hover span:after{
bottom: -50px;
right: 50px;
width: 100px;
height: 100px;
opacity: 1;
}
@keyframes animate{
0%, 100%
{
transform: translateY(10px);
}
50%
{
transform: translate(-10px);
}
}
.box .content{
position: relative;
left: 0;
padding: 20px 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1;
transform: 0.5s;
color: #fff;
}
.box:hover .content{
left: -25px;
padding: 60px 40px;
}
.box .content h2{
font-size: 2em;
color: #fff;
margin-bottom: 10px;
}
.box .content p{
font-size: 1.1em;
margin-bottom: 10px;
line-height: 1.4em;
}
.box .content a{
display: inline-block;
font-size: 1.1em;
color: #111;
background: #fff;
padding: 10px;
border-radius: 4px;
text-decoration: none;
font-weight: 700;
margin-top: 5px;
}
.box .content a:hover{
background: #ffcf4d;
border: 1px solid rgba(255, 0, 88, 0.4);
box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
}

CSS

body{
display:flex;
margin:0;
padding:0;
min-height: 100vh;
background: #444;
justify-content: center;
align-items: center;
font-family: arial;
}
.container{
width: 1000px;
position: relative;
display: flex;
justify-content: space-between;
flex-wrap:wrap;
}
.card{
position: relative;
}
.face{
width:300px;
height: 200px;
transition:.4s;
}
.face1{
position: relative;
background: #333;
display: flex;
justify-content: center;
align-content:center;
align-items: center;
z-index: 1;
transform: translateY(100px);
}
.card:hover .face.face1{
transform: translateY(0);
box-shadow:
inset 0 0 60px whitesmoke,
inset 20px 0 80px #f0f,
inset -20px 0 80px #0ff,
inset 20px 0 300px #f0f,
inset -20px 0 300px #0ff,
0 0 50px #fff,
-10px 0 80px #f0f,
10px 0 80px #0ff;
}
.face.face1 .content{
opacity: .2;
transition: 0.5s;
text-align: center;
}
.card:hover .face.face1 .content{
opacity: 1;
}
.face.face1 .content i{
font-size: 3em;
color: white;
display: inline-block;
}
.face.face1 .content h3{
font-size: 1em;
color: white;
text-align: center;
}
.face.face1 .content a{
transition: .5s;
}
.face.face2{
position: relative;
background: whitesmoke;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0,0,0,.8);
transform: translateY(-100px);
}
.card:hover .face.face2{
transform: translateY(0);
}
p, a{
font-size: 10pt;
margin: 0 ;
padding: 0;
color:#333;
}
a{
text-decoration:none;
color: black;
box-sizing: border-box;
outline : 1px dashed #333;
padding: 10px;
margin: 15px 0 0;
display: inline-block;
}
a:hover{
background: #333 ;
color: whitesmoke;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

CSS

body{
margin:0;
padding:0;
background:#222;
}
ul{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
display:flex;
font-family: sans-serif;
}
ul li{
list-style:none;
margin:0 5px;
}
ul li a .fa{
font-size: 40px;
color: #262626;
line-height:80px;
transition: .5s;
padding-right: 14px;
}
ul li a span{
position:absolute;
top: 30px;
color: #262626;
letter-spacing: 4px;
transition: .5s;
}
ul li a{
text-decoration: none;
display:block;
width:210px;
height:80px;
background: #fff;
text-align:left;
padding-left: 20px;
transform: rotate(-30deg) skew(25deg) translate(0,0);
transition:.5s;
box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}
ul li a:before{
content: '';
position: absolute;
top:10px;
left:-20px;
height:100%;
width:20px;
background: #b1b1b1;
transform: .5s;
transform: rotate(0deg) skewY(-45deg);
}
ul li a:after{
content: '';
position: absolute;
bottom:-20px;
left:-10px;
height:20px;
width:100%;
background: #b1b1b1;
transform: .5s;
transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover{
transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
}
ul li:hover .fa{
color:#fff;
}
ul li:hover span{
color:#fff;
}
ul li:hover:nth-child(1) a{
background: #3b5998;
}
ul li:hover:nth-child(1) a:before{
background: #365492;
}
ul li:hover:nth-child(1) a:after{
background: #4a69ad;
}
ul li:hover:nth-child(2) a{
background: #00aced;
}
ul li:hover:nth-child(2) a:before{
background: #097aa5;
}
ul li:hover:nth-child(2) a:after{
background: #53b9e0;
}
ul li:hover:nth-child(3) a{
background: #dd4b39;
}
ul li:hover:nth-child(3) a:before{
background: #b33a2b;
}
ul li:hover:nth-child(3) a:after{
background: #e66a5a;
}
ul li:hover:nth-child(4) a{
background: #e4405f;
}
ul li:hover:nth-child(4) a:before{
background: #d81c3f;
}
ul li:hover:nth-child(4) a:after{
background: #e46880;
}

CSS

body {
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
height: 90vh;
font-family: 'Courier New', Courier, monospace;
}
.container{
margin: 10px;
}
.btn{
line-height: 50px;
height: 50px;
text-align: center;
width: 300px;
cursor: pointer;
}
.btn-two{
color: #fff;
transition: all 0.5s;
position: relative;
}
span{
display: block;
position: absolute;
width: 100%;
}
.btn-two::before{
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
transition: all 0.5s;
border: 1px solid rgba(255,255,255,0.2);
background-color: rgba(255,255,255,0.1);
}
.btn-two::after{
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
transition: all 0.5s;
border: 1px solid rgba(255,255,255,0.2);
background-color: rgba(255,255,255,0.1);
}
.btn-two:hover::before{
transform: rotate(-45deg);
background-color: rgba(255,255,255,0);
}
.btn-two:hover::after{
transform: rotate(45deg);
background-color: rgba(255,255,255,0);
}

CSS

body{
background: #222;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
box-sizing: border-box;
}
.flex{
display: flex;
justify-content: center;
}
h2{
color: #fff;
letter-spacing: 1px;
}
.btn{
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
width: 120px;
font-weight: bold;
height: 50px;
transition: 0.08s;
border: none;
background: #fff;
border-radius: 10px;
cursor: pointer;
margin: 40px 5px;
}