HTML CSS PROJECT: Floating cards with neon light effect by Code Studio
In this post we will develop the "Floating Cards with Neon Light Effect" using only HTML and CSS.
Preview: Output
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale
=1.0">
<link rel="stylesheet" href="style.css">
<title>Project 09 By Mayur Dehade</title>
</head>
<body>
<div class="container">
<div class="box">
<span></span>
<div class="content">
<h2>Python</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Assumenda hic earum voluptate distinctio nihil, dicta ullam animi
facilis fugiat iusto.</p>
<a href="#">Get Course</a>
</div>
</div>
<div class="box">
<span></span>
<div class="content">
<h2>Java </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Assumenda hic earum voluptate distinctio nihil, dicta ullam animi
facilis fugiat iusto.</p>
<a href="#">Get Course</a>
</div>
</div>
<div class="box">
<span></span>
<div class="content">
<h2>Java Script</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Assumenda hic earum voluptate distinctio nihil, dicta ullam animi
facilis fugiat iusto.</p>
<a href="#">Get Course</a>
</div>
</div>
<div class="footer">
Coded By Mayur
</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
}
.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
flex-wrap: wrap;
}
.container .box{
position: relative;
width: 320px;
height: 400px;
color: #ffff;
background: #111;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 30px;
transition: 0.5s;
}
.container .box:hover{
transform: translateY(-20px);
}
.container .box::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ffbc00, #ff0058);
}
.container .box::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ffbc00, #ff0058);
filter: blur(30px);
}
.container .box:nth-child(2)::before,
.container .box:nth-child(2)::after{
background: linear-gradient(315deg, #03a9f4, #ff0058);
}
.container .box:nth-child(3)::before,
.container .box:nth-child(3)::after{
background: linear-gradient(315deg, #4dff03, #00d0ff);
}
.container .box span{
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background: rgba(0,0,0,0.6);
z-index: 2;
}
.container .box span::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,0.1);
pointer-events: none;
}
.container .box .content{
position: relative;
z-index: 10;
padding: 20px 40px;
}
.container .box .content h2{
font-size: 2em;
color: #fff;
margin-bottom: 10px;
}
.container .box .content p{
font-size: 1.1em;
color: #fff;
margin-bottom: 10px;
line-height: 1.4em;
}
.container .box .content a{
display: inline-block;
font-size: 1.1em;
text-align: center;
color: #fff;
padding: 4px;
width: 130px;
text-decoration: none;
font-weight: 700;
}
.container .box .content a:hover{
color: #000;
background: #fff;
border: 3px solid #fff;
border-radius: 30px;
transition: 0.8s;
}
.footer{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
margin-top: 80vh;
color: rgba(219, 219, 219, 0.9);
font-size: large;
}
Download all the files from this link:
https://drive.google.com/file/d/1MIrxINt9Ct4cy2OCZvxFSbC6PzTOP7OJ/view?usp=sharing
-- By Code Studio