My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questions related to this issue, so I'm just going to share my code.
I'm also encountering an error message stating that the MIME type is text/HTML, despite verifying multiple times that the MIME type is actually text/CSS.
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">
<title>Infinite Road</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="infinite">
<div class="shadow"></div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(#9bdfff, #009be4);
}
.infinite {
position: relative;
width: 800px;
height: 160px;
background: #525252;
transform-origin: bottom;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(30deg);
}
.infinite::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(90deg, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
background-size: 120px;
animation: animate 0.5s linear infinite;
}
@keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: -120px;
}
}
.infinite::after {
content: "";
position: absolute;
width: 100%;
height: 30px;
background: #333;
bottom: -30px;
transform-origin: top;
transform: perspective(500px) rotateX(-25deg)
}
.shadow {
position: absolute;
bottom: -93px;
left: 50%;
transform: translateX(-50%);
width: 95%;
height: 60px;
background: linear-gradient(#000, transparent);
opacity: 0.5;
}
JS:
const path = require('path');
const { readFile } = require('fs');
const app = express();
app.get('/', (request, response) => {
response.sendFile(path.join(__dirname, "index.html"))
});
app.get('/', (request, responseC) => {
responseC.sendFile(path.join(__dirname, "style.css"))
});
app.listen(process.env.PORT || 8080, () => console.log('App availible on http://localhost:8080'))
Stackoverflow mentioned that there is a lack of text compared to the amount of code provided, so I decided to include more information.