I've been working on a website project using nodejs, expressjs, and pug as my template engine. I designed the home page in pure pug but ran into an issue when trying to add a background image to a specific section of the site. Despite double-checking the image path, developer tools keep reporting a 404 error for not finding the image. Can anyone lend a hand?
My file structure in vs code can be viewed here.
Here's my dance.js:
const express = require("express");
const path = require("path");
const app = express();
app.use("/static", express.static("static"));
app.use(express.urlencoded());
app.set("view engine", "pug");
app.set("views", path.join(__dirname, "render"));
app.get("/", (req,res)=>{
res.status(200).render("dance");
});
const port = 80;
const hostname = "127.0.0.1"
app.listen(port, hostname, ()=>{
console.log(`Application is accessible on http://${hostname}:${port}`);
});
Here's dance.pug:
doctype html
html
head
title My dance academy
style
include ../static/style.css
body
div.navbar
ul#navigation
li #[a(href="/") Home]
li #[a(href="/") Services]
li #[a(href="/") Our courses]
li #[a(href="/") Contact us]
li #[a(href="/") About us]
div#sectionForimage
h1 Express your emotions through your moves
h3
div#section2
p There
div#section3
p Our Footer
And here's style.css:
@import url('https://fonts.googleapis.com/css2?family=Combo&display=swap');/*font-family: 'Combo', cursive;*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.navbar ul li a{
text-decoration: none;
color: white;
}
.navbar ul li a:hover{
font-weight: bold;
/* font-style: italic; */
color:rgb(0, 216, 249);
}
.navbar ul li{
list-style-type: none;
padding: 1rem;
font-size: 1.7rem;
font-family: 'Combo', cursive;
margin:10px;
}
#navigation{
display: flex;
justify-content: center;
background-color: tomato;
}
#sectionForimage{
/* position: absolute; */
height: 50vh;
background-image: url("img.jpg");
}
#section2{
height:50vh;
background-color: yellow;
}
#section3{
height:50vh;
background-color: red;
}
Your assistance would be greatly appreciated! Thank you!