Serious crisis in rendering HTML along with its css in NodeJS

Question

So once upon a time in practicing HTML,CSS and JS I built a pretty website. It was a fully functional one with multiple web pages and used express for backend. I lost its files and left web prog for a while. Now I cannot figure out how to do that again. I went to source from where I learned it but in vain. If I Go-Live the HTML page I created with CSS, It displays corrrectly i.e with the css. However if I use express, it just shows the Html. Yes Plain, old Htmlsss. Hatesss and textsss, No sstylingss.
Here is the javascript

const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')

app.get("/", (req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(home_html);
});

app.listen(port, () => {
    console.log(`The application started successfully on port ${port}`);
});

The website should look like when it is displayed along with css in snippet. Seriously can't figure out what is and where is it going wrong.

:root {
    --black-col: #15191f;
    --light-col: #e3ecf3;
}

* {
    margin: 0px;
    padding: 0px;
}

.cen {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.wrap {
    flex-wrap: wrap;
}

.al-cen {
    align-items: center;
}

.ju-cen {
    justify-content: center;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5vw;
    background-color: var(--light-col);
}

div {
    margin: 20px 15px;
}

.border-red {
    border: 3.5px solid #ffb700d3;
    border-radius: 12px;
    box-shadow: 7px 7px 3px 1px green;
    /* box-shadow: x y blur-radius spread-readius color; */
}

.border-green {
    border: 3.5px solid green;
    border-radius: 5px;
    box-shadow: 7px 7px 3px 1px blue;
    /* box-shadow: x y blur-radius spread-readius color; */
}

.border-blue {
    border: 3.5px solid blue;
    border-radius: 5px;
    box-shadow: 7px 7px 3px 1px red;
    /* box-shadow: x y blur-radius spread-readius color; */
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.line-height {
    line-height: 8vh;
}

/* NAVIGATION BAR  */
.grinav {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#timeclock {
    justify-content: end;
    margin: 0px 0px 0px 0px;
    color: var(--black-col);
}

#times {
    border: 2px solid var(--light-col);
    background-color: var(--light-col);
    margin: 0px 2vw 0px 0px;
    padding: 5px 20px 5px 20px;
    font-weight: bold;
    border-radius: 200px;
}

.glowbar {
    display: block;
    background-color: #ff7700;
    box-sizing: border-box;
    width: 0%;
    margin: 0px 0px 0px 0px;
    position: fixed;
    height: 4px;
    animation-name: fill2;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

@keyframes fill1 {
    from {
        width: 0%;
        background-color: gold;
    }

    to {
        width: 100%;
        background-color: #db9b00;
    }
}

@keyframes fill2 {
    0% {
        width: 0%;
        background-color: rgb(255, 217, 0);
    }

    90% {
        /* width: 70%; */
        background-color: #ff7700;
    }

    100% {
        width: 100%;
        background-color: #ff7700;
    }
}

nav, .grinav {
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    margin: 0px 0px 0px 0px;
    padding: 5px 5px;
    background-color: var(--black-col);
    z-index: 2;

}

nav a {
    text-decoration: none;
    background-color: var(--black-col);
    color: var(--light-col);
    padding: 4px 10px;
    border: 2px;
    border-radius: 10px;
}

nav a:hover {
    color: #15191f;
    /* ff7700 */
    transition-property: background-color;
    /* transition-property: color; */

    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    background-color: var(--light-col);
}


#li1 {
    margin-left: 4vw;
}

#a1 {
    margin: 0px 1.5vw;
}

#a2 {
    margin: 0px 1.5vw;
}

#a3 {
    margin: 0px 1.5vw;
}

#a4 {
    margin: 0px 1.5vw;
}

nav ul li {
    list-style: none;
}

#logo {
    width: 3vw;
    border: 2px;
    border-radius: 100px;
    margin: 5px 0px 0px 15px;
}

/* NAVIGATION BAR ENDS  */


/* MAIN HEADING  */
.heading {
    height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.ap {
    grid-column-start: 2;
    grid-column-end: 2;

    margin: 100px 0px 0px 100px;

}

/* If there is a horizontal scroll bar, you can disable it by the following code:{
box-sizing: border-box;
width: 100%; 
instead of width: 100vw;
This should solve the problem} */
.heading::before {
    box-sizing: border-box;
    content: "";
    height: 100vh;
    /* background-color: var(--black-col); */
    background: url(../static/Pb_O_W.png) no-repeat center center/cover;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.AiO {
    font-family: 'Bahnschrift', 'Arial', 'Calibri', 'Times New Roman', Times, serif;
    font-size: 2.5vw;
    margin: 40px 0px;
    color: orange;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    /* text-align: left; */
    top: 100px;
    margin: 277px 0px 0px 150px;
}

.breaker {
    display: none;
}

/* @media only screen and (max-width:2600px) {
    .heading::before {
        box-sizing: border-box;
        content: "";
        height: 100vh;
        background-color: var(--black-col);
        background: url(../static/Pb_O_W.png) no-repeat center center/cover;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
    }
} */

.smbot {
    text-align: center;
    display: inline;
    color: var(--light-col);
}

/* MAIN HEADING ENDS  */

/* LISTS SECTION  */
div ul {
    margin: 0px 25px;
}

ol li {
    margin: 0px 40px;
}

ol {
    border: 2px solid blue;
    border-radius: 5px;
    text-align: center;
    margin: 4px 0px;
    width: 100;
}

.text-cen {
    text-align: center;
}

ol li {
    margin-left: 40px;
}

/* LISTS SECTION ENDS */

/* FORMS STARTED */

input {
    display: block;
}

option {
    background-color: var(--black-col);
    color: var(--light-col);
    height: 50px;
    font-size: 1.1rem;
    border-radius: 5px;
}

select {
    width: 85px;
    background-color: var(--black-col);
    color: var(--light-col);
    height: 30px;
    border: 2px solid var(--black-col);
    border-radius: 6px;
}

.button {
    height: 25px;
    width: 25px;
    border-radius: 100px;
}

.checkbox {
    height: 25px;
    width: 25px;
}

/* FORMS ENDED */
h4, h5 {

    text-shadow: 2px 2px 2px var(--black-col);
    text-align: center;
}

.container {
    background-color: rgb(255, 255, 255);
}

.box {
    background-color: green;
    width: 250px;
    height: 250px;
    position: relative;
    animation-name: harry1;
    /* animation-name: harry2; */
    animation-duration: 4s;
    animation-iteration-count: 1;
    /* z-index: -1; */
    transition: all 1s ease-in-out;
}

.box:hover {
    transform: rotate(3600000000deg);
}



@keyframes harry1 {
    from {
        width: 200px;
    }

    to {
        width: 1400px;
    }
}

@keyframes harry2 {
    0% {
        top: 0px;
        left: 0px;
    }

    25% {
        top: 250px;
        left: 0px;
    }

    75% {
        top: 250px;
        left: 250px;
    }

    100% {
        top: 0px;
        left: 250px;
    }
}

<!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>HTML</title>
    <link rel="stylesheet" href="HTML.css">
    <!-- <script src="../JS/index.js"></script> -->
</head>

<body class="">
    <div class="grinav">
        <nav class="flex row al-cen">
            <img id="logo" src="../static/Pb_O_Wsm.png" alt="Img not found">
            <ul class="flex row">
                <li id="li1"><a id="a1" href="../HTML/HTML.html" target="_blank">Html</a></li>
                <li id="li2"><a id="a2" href="../HTML/CSS.html" target="_blank">CSS</a></li>
                <li id="li3"><a id="a3" href="../HTML/Javasc.html" target="_blank">JavaScript</a></li>
            </ul>
        </nav>
        <li id="timeclock" class="flex row al-cen "><span id="times"></span></li>
    </div>
    <div class="glowbar">
    </div>
    <div class="heading flex flex-column ju-cen ">
        <h1 class="AiO ">All in ONE Website<br>


        </h1>
        <p class="ap">This <strong>Website</strong> aims to <br class="breaker">
            <i>include</i> all that<br class="breaker">
            has been <em>learnt</em> and<br class="breaker">
            keep a record of it <br class="breaker">
            for future usage.
        </p>

    </div>
    <hr>
    <div class="border-red firstpara">
        <p><b>
                <\b>This Bold<\b>
            </b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
                <\br> Has been used here and here<\br><br>
            </strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
            itaque
            delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
        </p>
    </div>
    <div class="border-green lists">
        <div class="orderdlist block border flex-row ">

            <ol id="ol1" class="inline-block" type="1">
                <h6 class="cen">OL type 1</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olA" class="inline-block" type="A">
                <h6 class="cen">OL type A</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="ola" class="inline-block" type="a">
                <h6 class="cen">OL type a</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="olI" class="inline-block" type="I">
                <h6 class="cen">OL type I</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
            <ol id="oli" class="inline-block" type="i">
                <h6 class="cen">OL type i</h6>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ol>
        </div>
        <div class="unorderedlist">
            <ul type="square">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="circle">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
            <ul type="disc">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
        </div>
    </div>
    <div class="border-blue table text-cen flex flex-column wrap">
        <h4>This is a Table</h4>
        <table>
            <thead>
                <tr>
                    <th>Heading-1</th>
                    <th>Heading-2</th>
                    <th>Heading-3</th>
                    <th>Heading-4</th>
                    <th>Heading-5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row-1-Colum-1</td>
                    <td>Row-1-Colum-2</td>
                    <td>Row-1-Colum-3</td>
                    <td>Row-1-Colum-4</td>
                    <td>Row-1-Colum-5</td>
                </tr>
                <tr>
                    <td>Row-2-Column-1</td>
                    <td>Row-2-Column-2</td>
                    <td>Row-2-Column-3</td>
                    <td>Row-2-Column-4</td>
                    <td>Row-2-Column-5</td>
                </tr>
                <tr>
                    <td>Row-3-Column-1</td>
                    <td>Row-3-Column-2</td>
                    <td>Row-3-Column-3</td>
                    <td>Row-3-Column-4</td>
                    <td>Row-3-Column-5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="border-red forms flex flex-column">
        <h1 class="cen">FORMS</h1>
        <h5 class="cen">Below are some types of input we can ask on forms.Include a NAME in input tags
        </h5>
        <p>We will make input tag a block element to make go to next line and make the code look clean.
            Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
            The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
            when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
            not.
            @gmail.com is value below in email. Remaining are Placeholder
        </p>
        <form action="#">
            Button <input class="button" type="button" placeholder="Placeholder">
            Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
            Color<input type="color" placeholder="Placeholder">
            Date<input type="date" placeholder="Placeholder">
            Datetime<input type="datetime" placeholder="Placeholder">
            Datetime-local<input type="datetime-local" placeholder="Placeholder">
            <p>Just Testing</p>
            Email<input type="email" value="@gmail.com" placeholder="Placeholder">
            File<input type="file" placeholder="Placeholder">
            Hidden<input type="hidden" placeholder="Placeholder">
            Image<input type="image" placeholder="Placeholder">
            Month<input type="month" placeholder="Placeholder">
            Number<input type="number" placeholder="Placeholder">
            Password<input type="password" placeholder="Placeholder">
            Radio<input type="radio" placeholder="Placeholder">
            Range<input type="range" placeholder="Placeholder">
            Reset<input type="reset" placeholder="Placeholder">
            Search<input type="search" placeholder="Placeholder">
            Submit<input type="submit" placeholder="Placeholder">
            Tel<input type="tel" placeholder="Placeholder">
            Text<input type="text" placeholder="Placeholder">
            Time<input type="time" placeholder="Placeholder">
            Url<input type="url" placeholder="Placeholder">
            Week<input type="week" placeholder="Placeholder">

            Select from a dropdown <select>
                <option value="Option-1-Val">Option-1</option>
                <option value="Option-2-Val">Option-2</option>
                <option value="Option-3-Val">Option-3</option>
                <option value="Option-4-Val">Option-4</option>
                <option value="Option-5-Val">Option-5</option>
            </select>

        </form>
    </div>
    <div class="entities border-green">
        <h4 class="cen">We use entities for displaying some character</h4>
        &lt;
        <!-- Less Than -->
        &gt;
        <!-- Greater Than -->
        &pound;
        <!-- pound -->
        &copy;
        <!-- copy -->
        &rAarr;
        <!-- Arrow -->
        &frac12;
        <!-- In form of fraction -->

    </div>
    <div class="border-blue semanticelements">
        <p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in
            detail tag.</p>
        <details>

            <summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?
            </summary>
            A Keyboard.

        </details>
        <p>Now i will use a time tag</p>
        <p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>

    </div>

</body>
<script>
    function updateTime() {
        timern = new Date()
        times.innerHTML = `${timern.getHours()}:${timern.getMinutes()}:${timern.getSeconds()}`;
        console.log(times.innerHTML)
    }
    setInterval(updateTime, 500);
</script>

</html>

Answer 1

Express static serve the css

const path = require('path')

app.use(express.static(path.join(__dirname, 'path_to_public_directory')))

Answer 2

//Put all your static files in a public folder and then you do this

app.use('/public', express.static(path.join(__dirname, 'public')))