Currently, I am working on an EJS login project and I have created a style.css file with the following code:
[theme="bloodRed"] {
background-color: #ff2424;
color: #e571e1;
accent-color: #00ff00;
}In my register.ejs file, the HTML structure is as follows:
<!DOCTYPE html>
<html lang="en" theme="bloodRed">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign up</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087d667b000cdcdb07041011370c0c040708fff6fe">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="/css/style.css" rel="stylesheet">
<link rel="icon" href="https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
</head>
<body>
<div class="container">
<div class="login-box">
<div class="row">
<div class="col-md-6">
<h2>Sign up</h2>
<form action="register" method="post">
<div class="form-group">
<label>First and Last name:</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-outline-info" style="margin-top: 10px;"> Sign up </button>
</form>
<p style="margin-top: 15px;">Already have an account? <a class="btn btn-outline-success" href="login">Login here!</a></p>
</div>
</div>
</div>
</div>
</body>
</html>Furthermore, I have written JavaScript code to connect these files:
const express = require("express");
const app = express();
app.use(express.static("public"));
app.set("view engine", "ejs");However, when I view the register.ejs file, the text and background do not change within the specified div. The surrounding areas outside the div appear in red. Any suggestions or solutions would be greatly appreciated.