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");
});
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>Welcome to vishal gym center</h1>
<form action="" method="post">
<input type="text" name="name" id="name" placeholder="Enter your name please">
<input type="text" name="gender" id="gender" placeholder="Enter your gender here">
<textarea cols="5" rows="5" name="addeess" placeholder="Enter your address here"></textarea>
<textarea cols="5" rows="5" name="about" placeholder="Enter your about you"></textarea>
<button class="btn">Submit</button>
</form>
</div>
</body>
</html>
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;
}
body::before{
opacity: 0.5;
content: "";
width: 100%;
height: 800px;
z-index: -1;
top: 0px;
position: absolute;
background: url('./static/gym-526995.jpg') no-repeat center center;
}
.container{
margin: 17px auto;
width: 70%;
}
input,textarea,label{
display: block;
width: 30%;
padding: 4px;
margin: 20px auto;
}
.btn{
text-align: center;
padding: 10px;
margin: 10px auto;
display: block;
color:white;
background-color: red;
cursor: pointer;
}
Thanks you for commenting your questions. I will see question and respond you.