I'm trying to access my .html file with localhost using node.js, but I'm facing an issue with loading the CSS that is included in the file. I am using the express framework for this purpose.
Code:
var express = require('express');
var app = express();
app.use(express.static('public'));
app.engine('.html', require('ejs').renderFile);
app.get('/', function(req, res) {
res.render('FrontPage.html');
});
app.listen(3000, function(){
console.log("listening on port 3000");
})
HTML:
<head>
<link rel="stylesheet" type="text/css" href="./css/FrontPageCSS.css">
</head>
<body style="background-image:url(./img/bg.jpg)">
<div id="header">
<a href="./frontPage.html"><img src="./img/Logo.png" height="5%" width="5%" alt="logo"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./script/FrontPageJS.js"></script>
</div>
<div id="buttonWrapper">
<div id="first" class="first">
This is my first button
</div>
<div id="second" class="second">
This is my second button
</div>
</div>
CSS:
div#header{
text-align: center;
}
div#buttonWrapper{
text-align: center;
}
div.madeBefore, div.madeNotBefore{
border-radius: 25px;
background: -webkit-linear-gradient(left top, #ffc300 , #ff8300);
background: -o-linear-gradient(bottom right, #ffc300, #ff8300);
background: -moz-linear-gradient(bottom right, #ffc300, #ff8300);
background: linear-gradient(to bottom right, #ffc300 , #ff8300);
width: 500px;
height: 425px;
margin-right: 50px;
padding:50px;
padding-top: 250px;
padding-bottom: 0px;
display: inline-block;
vertical-align: top;
text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0, 0, 0.2);
color: #B36103;
font-size: 60px;
text-align: center;
}
div.madeNotBefore{
margin-right: 0px;
}
div.madeBefore:hover, div.madeNotBefore:hover{
background: -webkit-linear-gradient(left top, #ff7600 , #e96c00);
background: -o-linear-gradient(bottom right, #ff7600, #e96c00);
background: -moz-linear-gradient(bottom right, #ff7600, #e96c00);
background: linear-gradient(to bottom right, #ff7600 , #e96c00);
}
How can I ensure that the CSS file is sent along with the .html file when accessed through localhost?