static/style.css
*{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
nav{
background-color: red;
}
ul{
display: flex;
flex-direction: row;
}
li{
list-style: none;
padding: 17px;
}
li a{
color: white;
text-decoration: none;
}
h1{
text-align: center;
}
.container{
background-color: rgb(183, 179, 179);
margin: 17px auto;
width: 70%;
}
views/index.pug
<!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>#{title}</title>
style
include ../static/style.css
</head>
<body>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<div class="container">
<h1>
This is the pug tutorials made by vishal usrate
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus corrupti quidem molestiae alias officiis dignissimos aliquam, recusandae eveniet autem animi fugit. Ut rem adipisci labore veritatis laudantium dolorum voluptates aspernatur!
</p>
</div>
</body>
</html>
app.js
const express = require("express");
const path = require("path");
const app = express();
const port = 80;
app.use('/static',express.static('static'));
// pug template engine set
app.set('view engine', 'pug')
// path location check
app.set('views', path.join('views'));
// send varaible and message in the function
app.get('/demo', (req, res) => {
res.render('demo', { title: 'Hey Vishal', message: 'Hello How Are you Bro' })
})
app.get('/',(req,res)=>{
const con = "This is the best tutorial made by vishal thanks you";
const param = {"title":"vishal","content":con}
res.status(200).render("index.pug",param);
})
app.listen(port,()=>{
console.log("port is running");
});
Thanks you for commenting your questions. I will see question and respond you.