tristonarmstrong/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add some glow

Browse Source
This commit is contained in:
Triston Armstrong 2024-07-20 18:42:56 -05:00
parent 454c00117a
commit 226d8526e9
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
1 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -36,6 +36,37 @@
background: radial-gradient(circle at top right, #333 0%, #000 50%); background: radial-gradient(circle at top right, #333 0%, #000 50%);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.glow {
position: relative;
}
.glow::before {
position: absolute;
content: 'banana';
background-color: #ffce00;
width: 0px;
height: 0px;
filter: blur(30px);
z-index: -1;
top: -6px;
left: -4px;
border-radius: 50%;
transition: all 0.5s;
}
.glow:hover::before {
position: absolute;
content: 'banana';
background-color: #ffce00;
width: 40px;
height: 40px;
filter: blur(30px);
z-index: -1;
top: -6px;
left: -4px;
border-radius: 50%;
}
</style> </style>
</head> </head>
@ -44,10 +75,10 @@
<body class="bg-black text-white mx-auto max-w-2xl my-6 ubuntu-regular p-4 gradient"> <body class="bg-black text-white mx-auto max-w-2xl my-6 ubuntu-regular p-4 gradient">
<!-- ______________________________________________________________ --> <!-- ______________________________________________________________ -->
<nav class="flex justify-between items-center"> <nav class="flex justify-between items-center">
<img src="./avatar.png" alt="avatar" width={30} height={30} class="w-10 h-10" /> <a href="" class="glow"><img src="./avatar.png" alt="avatar" width={30} height={30} class="w-10 h-10" /></a>
<div class="flex gap-6 text-md text-slate-400 "> <div class="flex gap-6 text-md text-slate-400 ">
<a class="hover:text-[#ffce00] border-b border-[#ffce00]">Home</a> <a href="" class="hover:text-[#ffce00] border-b border-[#ffce00]">Home</a>
<a class="hover:text-[#ffce00]">About</a> <a href="./about.html" class="hover:text-[#ffce00]">About</a>
<a class="hover:text-[#ffce00]">Now</a> <a class="hover:text-[#ffce00]">Now</a>
<a class="hover:text-[#ffce00]">Featured</a> <a class="hover:text-[#ffce00]">Featured</a>
</div> </div>