Prashant Neon 3D Footer
*{box-sizing:border-box}
.prashant-footer{
--cyan:#00d9ff;
--blue:#087bff;
--purple:#a000ff;
position:relative;
isolation:isolate;
overflow:hidden;
color:#edf5ff;
font-family:'Poppins',sans-serif;
background:
radial-gradient(ellipse at 10% 0%,#073b8b 0%,transparent 38%),
radial-gradient(ellipse at 95% 75%,#26045c 0%,transparent 35%),
linear-gradient(130deg,#010716,#06142d 52%,#010512);
border-top:2px solid #168cff;
box-shadow:0 -8px 35px #006aff25;
}
/* Neon top border */
.prashant-footer:before{
content:"";
position:absolute;
top:0;left:-100%;
width:100%;height:2px;
background:linear-gradient(90deg,transparent,#00eaff,#fff,#7a00ff,transparent);
animation:footerLine 6s linear infinite;
}
@keyframes footerLine{to{left:100%}}
/* Ambient background */
.footer-glow{
position:absolute;
z-index:-1;
width:250px;height:250px;
border-radius:50%;
background:#075dff;
filter:blur(100px);
opacity:.25;
top:15%;left:-130px;
animation:glowMove 8s ease-in-out infinite alternate;
}
.footer-glow.two{
left:auto;right:-120px;top:35%;
background:#9a00ff;
animation-delay:-4s;
}
@keyframes glowMove{
from{transform:translateY(-20px) scale(.8)}
to{transform:translateY(50px) scale(1.25)}
}
/* Floating particles */
.footer-particles{
position:absolute;inset:0;
overflow:hidden;pointer-events:none;z-index:-1;
}
.footer-particles i{
position:absolute;bottom:-15px;
width:4px;height:4px;border-radius:50%;
background:#00d9ff;
box-shadow:0 0 12px #00d9ff,0 0 24px #087bff;
animation:particleUp linear infinite;
}
@keyframes particleUp{
0%{transform:translateY(0) translateX(0);opacity:0}
15%{opacity:.9}
80%{opacity:.7}
100%{transform:translateY(-620px) translateX(50px);opacity:0}
}
.footer-main{
max-width:1500px;
margin:auto;
padding:75px 5% 48px;
display:grid;
grid-template-columns:1.5fr .85fr .95fr 1.15fr;
gap:40px;
}
/* 3D brand logo */
.footer-logo{
display:inline-block;
position:relative;
font-family:'Orbitron',sans-serif;
font-size:clamp(27px,3vw,43px);
font-weight:900;
letter-spacing:-1.5px;
text-decoration:none;
color:#fff;
line-height:1.3;
text-shadow:
1px 1px 0 #c3dfff,
2px 2px 0 #6599e4,
3px 3px 0 #2456a4,
4px 4px 0 #102d64,
0 0 15px #008cff,
0 0 30px #006eff65;
transform:perspective(500px) rotateY(-5deg);
transition:.4s;
}
.footer-logo:hover{
transform:perspective(500px) rotateY(8deg) translateY(-5px);
filter:brightness(1.3);
}
.footer-logo span{color:#00d9ff}
.logo-crown{
display:block;
color:#48cfff;
font-size:24px;
margin-left:60px;
margin-bottom:-4px;
text-shadow:0 0 15px #008cff;
}
.logo-orbit{
height:5px;
width:90%;
margin-top:12px;
border-radius:50%;
background:linear-gradient(90deg,transparent,#00d9ff,#fff,#176bff,transparent);
box-shadow:0 0 12px #00bfff,0 0 25px #005dff;
transform:skewX(-25deg);
animation:orbitPulse 3s ease-in-out infinite alternate;
}
@keyframes orbitPulse{
to{opacity:.5;transform:skewX(25deg) scaleX(.85)}
}
.footer-tagline{
color:#00d9ff;
font-size:12px;
letter-spacing:5px;
margin:20px 0 25px;
}
.footer-description{
color:#b5c7df;
font-size:13px;
line-height:1.9;
max-width:310px;
margin-bottom:25px;
}
/* Social links */
.footer-socials{
display:flex;
gap:13px;
flex-wrap:wrap;
}
.footer-socials a{
width:48px;height:48px;
display:grid;place-items:center;
border:1px solid #148dff;
border-radius:50%;
color:#fff;
font-size:20px;
text-decoration:none;
background:linear-gradient(145deg,#12396c,#020817);
box-shadow:0 0 12px #006dff45,inset 0 0 10px #00d9ff10;
transition:transform .35s,box-shadow .35s;
}
.footer-socials a:hover{
transform:translateY(-7px) rotateY(18deg) scale(1.08);
box-shadow:0 0 12px #00d9ff,0 0 28px #087bff75;
}
.footer-socials .youtube:hover{border-color:#ff163e;box-shadow:0 0 20px #ff163e}
.footer-socials .instagram:hover{border-color:#ff35c8;box-shadow:0 0 20px #ff35c8}
/* Columns */
.footer-column h3{
color:#fff;
font-size:19px;
font-weight:600;
margin:5px 0 30px;
}
.footer-column h3:after{
content:"";
display:block;
width:55px;height:4px;
margin-top:13px;
border-radius:5px;
background:linear-gradient(90deg,#00d9ff,#8b32ff);
box-shadow:0 0 12px #008dff70;
}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:0 0 16px}
.footer-links a{
display:inline-flex;
align-items:center;
gap:12px;
color:#c9d7ed;
text-decoration:none;
font-size:13px;
transition:color .3s,transform .3s;
}
.footer-links a i{
color:#00cfff;
font-size:17px;
transition:transform .3s,text-shadow .3s;
}
.footer-links a:hover{
color:#fff;
transform:translateX(5px);
}
.footer-links a:hover i{
transform:translateX(3px);
text-shadow:0 0 12px #00d9ff;
}
/* Contact details */
.footer-contact-item{
display:flex;
align-items:center;
gap:13px;
margin-bottom:21px;
color:#e1ebfa;
font-size:13px;
line-height:1.7;
min-width:0;
}
.contact-icon{
flex:0 0 43px;
width:43px;height:43px;
display:grid;place-items:center;
border-radius:50%;
color:#00d9ff;
border:1px solid #078dff;
background:linear-gradient(145deg,#10396c,#030b1c);
box-shadow:0 0 13px #007bff45,inset 0 0 12px #00cfff12;
font-size:16px;
transition:.3s;
}
.footer-contact-item:hover .contact-icon{
transform:rotateY(180deg);
box-shadow:0 0 20px #008dff;
}
.footer-contact-item a{
color:inherit;
text-decoration:none;
overflow-wrap:anywhere;
}
.footer-contact-item a:hover{color:#00d9ff}
.footer-contact-item small{color:#48bfff;font-size:11px}
/* Floating 3D social display */
.footer-social-art{
position:absolute;
right:2.5%;
top:22%;
width:145px;
height:250px;
pointer-events:none;
perspective:700px;
}
.social-cube{
position:absolute;
display:grid;place-items:center;
width:65px;height:65px;
border-radius:17px;
color:white;
font-size:32px;
border:1px solid #ffffff40;
box-shadow:inset 3px 3px 8px #ffffff40,
inset -5px -6px 12px #0006,
0 12px 22px #0008,
0 0 18px #007bff60;
animation:cubeFloat 4s ease-in-out infinite;
}
.social-cube.fb{top:0;left:0;background:linear-gradient(135deg,#3e9bff,#0751d5);transform:rotate(-12deg)}
.social-cube.xicon{top:42px;right:0;background:linear-gradient(135deg,#303642,#03060b);animation-delay:-1s}
.social-cube.yt{top:92px;left:8px;background:linear-gradient(135deg,#ff4c5c,#c90023);animation-delay:-2s}
.social-cube.ig{top:140px;right:0;background:linear-gradient(135deg,#ffb22c,#fa258b,#7a39e8);animation-delay:-.5s}
.social-cube.in{top:190px;left:20px;background:linear-gradient(135deg,#31baff,#0649bc);animation-delay:-1.5s}
@keyframes cubeFloat{
0%,100%{translate:0 0;rotate:0deg}
50%{translate:0 -10px;rotate:4deg}
}
/* Copyright strip */
.footer-bottom{
position:relative;
border-top:1px solid #087bff8a;
background:linear-gradient(90deg,#020714cc,#07152bcc,#020714cc);
padding:22px 5%;
}
.footer-bottom-inner{
max-width:1500px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
color:#bdc9dd;
font-size:12px;
}
.footer-bottom strong{color:#00cfff}
.footer-made{letter-spacing:2px;text-align:center}
.footer-made .heart{
color:#168dff;
display:inline-block;
animation:heartBeat 1.3s infinite;
}
@keyframes heartBeat{
50%{transform:scale(1.35)}
}
/* Tablet and mobile */
@media(max-width:1100px){
.footer-main{
grid-template-columns:repeat(2,minmax(0,1fr));
padding-right:6%;
gap:45px 35px;
}
.footer-social-art{opacity:.2;right:0;top:10%}
}
@media(max-width:600px){
.footer-main{
grid-template-columns:1fr;
padding:48px 24px 35px;
gap:36px;
}
.footer-social-art{display:none}
.footer-logo{font-size:34px}
.footer-column h3{margin-bottom:22px}
.footer-bottom-inner{
flex-direction:column;
text-align:center;
line-height:1.8;
}
}
@media(prefers-reduced-motion:reduce){
.prashant-footer *,
.prashant-footer *:before,
.prashant-footer *:after{
animation:none!important;
transition:none!important;
}
}
(function(){
var year = document.getElementById('pr-footer-year');
if(year) year.textContent = new Date().getFullYear();
})();