Below is my Pug code.
<!DOCTYPE html>
<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>Title</title>
style
include FrontPageStyle.css
</head>
<section id="rotate">
<nav>
<ul id="TopBar">
<li><a href="/Home">Home</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contact">Write me</a></li>
</ul>
</nav>
<section id="h">
<ul id="Name_Section">
<div id="Hey">
<li id="Iam">Hey, I'm</li>
<li style="padding-top: 25px;">PRAVEEN KUMAR </li>
</div>
<li id="square"></li>
</ul>
</section>
</section>
<section>
<ul class="MySkill1">
<li class="line1"></li>
<li >My Skills</li>
<li class="line2"></li>
</ul>
</section>
<section id="Skill_Section1">
<ul class="Cards">
<li id="list1">This is list1</li>
<li id="list2">This is list2</li>
<li id="list3">This is list3</li>
<li id="list4">This is list4</li>
</ul>
</section>
<section>
<ul class="MySkill2">
<li class="line1"></li>
<li>I Build Beautiful</li>
<li class="line3"></li>
</ul>
</section>
<section id="Skill_Section2">
<div class="Button">
<li><button class="Next_Button" onclick="nextimage()"> «</button></li>
<li><button class="Next_Button">»</button></li>
</div>
</section>
<section id="Mythought">
<div class="MySkill3">
<li class="line1"></li>
<li style="font-weight: bold;">My Thoughts</li>
<li class="line4"></li>
</div>
<ul class="Cards">
<li id="list1">This is 2list 1</li>
<li id="list2">This is 2list2</li>
<li id="list3">This is 3list3</li>
<li id="list4">This is 3list4</li>
</ul>
</section>
Here below is my CSS code.
#square{
width: 250px;
height: 250px;
background-image: url('../ff.png');
background-repeat: no-repeat;
background-size: 250px 250px;
}
And Below is the nodejs code in the javascript file.
const express=require('express');
const { redirect } = require('express/lib/response');
const { link, readdir } = require('fs');
const app=express();
app.use('/static',express.static('static'));
const path=require('path');
app.set('view engine','pug');
app.set('Views',path.join(__dirname,'Views'));
app.get('/Home',(req,res)=>{
res.send("This is Home Page");
});
const port=80;
app.get('/FrontPage', (req, res)=>{
res.status(200).render('FrontPage', { title: 'Hey Praveen', message: 'Hello there!, thanks for your code' })
});
app.get('/About', (req, res)=>{
res.status(200).render('AboutPage', { title: 'Hey Praveen', message: 'Hello there!, thanks for your code' })
});
app.get('/Contact', (req, res)=>{
res.status(200).render('ContactPage', { title: 'Hey Praveen', message: 'Hello there!, thanks for your code' })
});
app.listen(port,()=>{
console.log("This application started successfully on port ");
});
These are the code that I wrote and launched my site through this, everything works well but the images that I use don’t appear there. Instead of offline images if I use an online image URL then it works well but not with the images that are in my folder. I had given the path correctly as if I launch it through live server extension then the images also loads properly but not with localhost server.