I modified and copied a snippet from codepen to my local machine. I linked the css and js files with html file. But the css part is not working properly. The code was working fine in codepen.
index.html
<head>
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link src="https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<menu class="menu">
<button class="menu__item active">
<div class="menu__icon" >
<i class="fa-solid fa-house"></i>
</div>
<strong class="menu__text active">home</strong>
</button>
<button class="menu__item">
<div class="menu__icon" >
<i class="fa-solid fa-user"></i>
</div>
<strong class="menu__text">About</strong>
</button>
<button class="menu__item">
<div class="menu__icon" >
<i class="fa-solid fa-briefcase"></i>
</div>
<strong class="menu__text">
Products</strong>
</button>
<button class="menu__item">
<div class="menu__icon" >
<i class="fa-solid fa-question"></i>
</div>
<strong class="menu__text">
Concerns</strong>
</button>
<button class="menu__item">
<div class="menu__icon" >
<i class="fa-solid fa-blog"></i>
</div>
<strong class="menu__text">
Blog</strong>
</button>
<button class="menu__item">
<div class="menu__icon" >
<i class="fa-solid fa-envelope"></i>
</div>
<strong class="menu__text">Contact</strong>
</button>
</menu>
<script src="./index.js"></script>
</body>
styles.css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');
html {
box-sizing: border-box ;
--duration: .45s ;
--cubic: cubic-bezier(0.4, 0, 0.2, 1) ;
--color-1: white ;
--color-2: #000 ;
--theme-bg-color:rgba(16 18 27 / 40%)
--border-color: rgba(113 119 144 / 25%);
--theme-color: #f9fafb;
}
html *,
html *::before,
html *::after {
box-sizing: inherit ;
}
body {
margin: 0 ;
height: 20vh ;
display: flex ;
overflow: hidden ;
align-items: center ;
justify-content: center ; background: #2193b0;
background: -webkit-linear-gradient(to left, #6dd5ed, #2193b0);
background: linear-gradient(to left, #6dd5ed, #2193b0);
font-family: 'Dosis', sans-serif ;
}
.menu {
margin: 0 ;
width: 45em;
display: flex ;
height: 5em ;
user-select: none ;
position: relative ;
align-items: center ;
padding: 0 1.7em ;
justify-content: center ;
/* From https://css.glass */
background: rgba(245, 245, 245, 0.4);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 1em 1em 2.5em 2.5em;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
max-width: 1250px;
max-height: 860px;
-webkit-tap-highlight-color: transparent ;
}
@media (max-width: 42.625em) {
.menu {
font-size: .55em ;
}
}
.menu__item {
all: unset ;
flex-grow: 1 ;
display: flex ;
cursor: pointer ;
overflow: hidden ;
padding-top: 0.5em ;
position: relative ;
align-items: left ;
color: var(--color-1) ;
justify-content: center ;
transition: flex-grow var(--duration) var(--cubic) ;
}
.menu__icon {
font-size: 1.5em;
stroke: currentColor ;
transition: transform var(--duration) var(--cubic) ;
}
.menu__item::after {
left: -1.15em;
bottom: 0 ;
content: " " ;
height: 0.25em ;
position: absolute ;
border-radius: 2em ;
transform-origin: left center ;
background-color: currentColor ;
width: calc( var(--lineWidth) + 5px ) ;
transform: translate3d(3em , 0, 0) scaleX(0) ;
transition: transform calc( var(--duration) + .2s) var(--cubic) ;
}
.menu__text {
left: 4.3em ;
height: 1.5em;
font-size: 1.25em ;
position: absolute ;
text-transform: capitalize ;
letter-spacing: .01em ;
transform: translate3d(0, 109%, 0) ;
transition: transform calc( var(--duration) / 3.7 ) ;
}
.menu__item.active {
flex-grow: 2.3 ;
color: var(--color-2) ;
}
.menu__item.active .menu__icon {
transform: translate3d(-95% , 0, 0) ;
}
.menu__item.active::before {
transform: scale(1) ;
}
.menu__item.active::after {
transform: translate3d(6.3em , 0, 0) scaleX(1) ;
transition: transform var(--duration) var(--cubic) ;
}
.menu__text.active {
transform: translate3d(0 , 0, 0) ;
transition: transform calc(var(--duration) / 1.5) ;
}
.icon {
--duration-icon: 1s ;
fill: none ;
width: 2.5em ;
height: 2.5em ;
display: block ;
stroke-width: 15 ;
stroke-miterlimit: 10 ;
}
.active #home-anm {
animation: home var(--duration-icon) ;
}
@keyframes home {
25% {
transform: translate3d(0, -.8em , 0) ;
}
50% {
transform: translate3d(0, .5em , 0) ;
}
}
#strategy-anm {
transform: scaleX(.85) ;
transform-origin: center ;
}
.active #strategy-anm {
animation: strategy var(--duration-icon) ;
}
@keyframes strategy {
50% {
transform: scaleX(1) ;
}
100%{
transform: scaleX(.85) ;
}
}
.active #strategy-cir1 {
animation: strategy-cir1 var(--duration-icon);
}
.active #strategy-cir2 {
animation: strategy-cir2 var(--duration-icon) .1s;
}
.active #strategy-cir3 {
animation: strategy-cir3 var(--duration-icon) .2s;
}
@keyframes strategy-cir1 {
50% {
transform: translate3d(-.7em,-0.7em,0);
}
100%{
transform: translate3d(0,0,0);
}
}
@keyframes strategy-cir2 {
35% {
transform: translate3d(0,-0.7em,0);
}
100%{
transform: translate3d(0,0,0);
}
}
@keyframes strategy-cir3 {
35% {
transform: translate3d(.7em,-0.7em,0);
}
100%{
transform: translate3d(0,0,0);
}
}
.active #period-anm {
transform-origin: center 100% ;
animation: period var(--duration-icon) ;
}
.active #period-cir {
transform-origin: center ;
animation: period-cir var(--duration-icon) ;
}
.active #period-line {
stroke-dasharray: 66 ;
animation: period-line calc( var(--duration-icon) / 2.5 ) reverse ;
}
@keyframes period {
35% {
transform: scaleY(.85) ;
}
60% , 70% {
transform: scaleY(1.2) ;
}
100% {
transform: scaleY(1) ;
}
}
@keyframes period-cir {
0%{
opacity: 0 ;
}
35% {
opacity: 1 ;
transform: translate3d(15%, -55%, 0) ;
}
60%{
opacity: 0 ;
transform: translate3d(-8%, -50%, 0) ;
}
}
@keyframes period-line {
100% {
stroke-dashoffset: 66 ;
}
}
.active #security-cir {
transform-box: fill-box ;
transform-origin: center ;
animation: security-cir calc( var(--duration-icon) / 1.5 ) ;
}
@keyframes security-cir {
0% {
transform: scale(0) ;
}
100% {
transform: scale(1) ;
}
}
.active #security-strok {
stroke-dasharray: 96;
animation: security-strok calc( var(--duration-icon) / 1.2 ) ;
}
@keyframes security-strok {
0% {
stroke-dashoffset: 60 ;
}
100% {
stroke-dashoffset: 230 ;
}
}
.active #settings-anm {
transform-box: fill-box ;
transform-origin: center ;
animation: settings-anm calc( var(--duration-icon) / 1.5 ) ;
}
@keyframes settings-anm {
0% {
transform: rotate(-60deg);
}
50% {
transform: rotate(60deg);
}
}
index.js
/* Intagram: @ui.tormenta*/
const buttons = document.querySelectorAll(".menu__item");
let activeButton = document.querySelector(".menu__item.active");
buttons.forEach(item => {
const text = item.querySelector(".menu__text");
setLineWidth(text, item);
window.addEventListener("resize", () => {
setLineWidth(text, item);
})
item.addEventListener("click", function() {
if (this.classList.contains("active")) return;
this.classList.add("active");
if (activeButton) {
activeButton.classList.remove("active");
activeButton.querySelector(".menu__text").classList.remove("active");
}
handleTransition(this, text);
activeButton = this;
});
});
function setLineWidth(text, item) {
const lineWidth = text.offsetWidth + "px";
item.style.setProperty("--lineWidth", lineWidth);
}
function handleTransition(item, text) {
item.addEventListener("transitionend", (e) => {
if (e.propertyName != "flex-grow" ||
!item.classList.contains("active")) return;
text.classList.add("active");
});
}
I put those css and js files in the same folder. When I open the html file, it doesn't show any font-awesome icons or any text, but it shows the navbar layout. I am a complete beginner and any help is appreciated.