To link a JavaScript file to an HTML document, you can use the `<script>` tag. Here's how you can do it:

1. Create a JavaScript file with a `.js` extension. For example, `script.js`. 2. Place the JavaScript file in the appropriate directory or specify the correct path if it's located elsewhere. 3. In your HTML file, open the `<head>` or `<body>` section, depending on where you want to include the script. 4. Add the `<script>` tag within the section you chose in the previous step. <script src="path/to/script.js"></script> Replace `"path/to/script.js"` with the actual path to your JavaScript file. If the JavaScript file is in the same directory as your HTML file, you can simply provide the filename. 5. Save the HTML file and open it in a web browser. The browser will interpret the `<script>` tag and load the JavaScript file specified in the `src` attribute. The JavaScript code in the file will be executed in the order it appears in the file.

Create index.html file for login page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>navigating bar1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul class="nav__links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
   
    <div id="login-form-wrap">
        <p  class="loginid">Log In</p>
        <form id="login-form" method="post">
        <p><input type="email" id="email" name="email" class="form-control" placeholder="Email Address" >
        </p><br>
        <p><input type="password" id="password" name="password" class="form-control" placeholder="password" >
        </p><br>
        <p><input type="submit" id="login" value="Login" href="#">
        </p><br>
        </form>
        <div id="create-account-wrap">
        <p>Not a member? <a id="il" href="index2.html">Create Account</a><p>
        </div>
    </div>
        <footer><p class="det">For more details:</p><a class="cta" href="#"><button>Content</button></a>
        </footer>
</body>
</html>


Create style.css file

@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    line-height: 1.5;
    font-family:'Times New Roman', Times, serif;
    background-repeat: no-repeat;
    background-size: cover;
}
li, a, button{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration:none;
}

header{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 10%;
    background-color: #2d2f38;
}
.nav__links{
    list-style: none;
}

.nav__links li{
    display: inline-block;
    padding: 0px 20px;
}

.nav__links li{
    transition: all 0.3s ease 0s;
}

.nav__links li a:hover{
    color: blue;
}

button{
    padding: 9px 25px;
    background-color: rgba(0,136,169,1);
    border: 0px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
button:hover{
    background-color: rgba(0,136,169,0,8);
}
#login-form-wrap{
    background-color:#24252a;
    width:30pc;
    margin:80px auto;
    text-align:center;
    padding:20px 0 0;
    border-radius:4px;
    box-shadow:0 30px 50px 0 rgba(22, 18, 18, 0.2)
 }
 #login-form{
    padding:0 60px
 }
 input{
    display:block;
    box-sizing:border-box;
    width:100%;
    outline:none;
    height:60px;
    line-height:60px;
    border-radius:4px
 }
 input[type=password],
 input[type=email]{
    width:100%;
    padding:0 0 0 10px;
    margin:0;
    color:#ffffff;
    border:1px solid #ffffff;
    font-style:normal;
    font-size:16px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    position:relative;
    display:inline-block;
    background:0 0
 }
 input[type=submit]{
    border:none;
    display:block;
    background-color:#3ca9e2;
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    -webkit-transition:all.2s ease;
    transition:all .2s ease;
    font-size:18px;position:relative;
    display:inline-block;cursor:pointer;
    text-align:center
 }
 input[type=submit]:hover{
    background-color:#62a5c9;
    -webkit-transition:all .2s ease;
    transition:all .2s ease
 }
 #create-account-wrap{
    background-color:#24252a;
    color:#ffffff;
    font-size:14px;
    width:100%;
    padding:10px 0;
    border-radius:0 0 4px 4px
 }
 .loginid{
     font-family: Arial, Helvetica, sans-serif;
     margin: 12px;
     font-size: 30px;
    color: white;
    background-color:#24252a;
 }
 footer{
     display: flex;
     justify-content: flex-start;
     align-items: center;
     padding: 30px 10%;
     background-color: #2d2f38;
 }
 .det{
     font-size: 20px;
     color: white;
 }
 a#il{
     color: #329dd5;
 }
 #il:hover{
     border-radius: 0px;
    background-color:#fdfdfd;
    cursor: pointer;
    -webkit-transition:all .2s ease;
    transition:all .2s ease
 }

Output:





 Create signup.html file


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>navigating bar1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles2.css">
</head>
<body>
    <header>
        <nav>
            <ul class="nav__links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <div id="login-form-wrap">
        <p  class="loginid">Signup</p>
        <form action="" method="post" id="login-form">
        <p><input type="username" id="username" name="username" placeholder="Username" >
        </p><br>
        <p><input type="email" id="email" name="email" placeholder="Email Address" >
        </p><br>
        <p><input type="password" id="password" name="password" placeholder="password" >
        </p><br>
        <p><input type="password" id="confirmpassword" name="confirmpassword" placeholder="confirm password" >
        </p><br>
        <p><input type="submit" id="login" value="Login" href="#">
        </p><br>
        </form>
        <div id="create-account-wrap">
        <p>If a member? <a href="index.html">Login</a><p>
        </div>
        </div>
        <footer><p class="det">For more details:</p><a class="cta" href="#"><button>Content</button></a>
        </footer>
</body>
</html>


Create style.css file


@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
   
    background-image: url('images.png');
    background-repeat: no-repeat;
    background-size: cover;
}
li, a, button{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration:none;
}

header{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 10%;
    background-color: #2d2f38;
}
.nav__links{
    list-style: none;
}

.nav__links li{
    display: inline-block;
    padding: 0px 20px;
}

.nav__links li{
    transition: all 0.3s ease 0s;
}

.nav__links li a:hover{
    color: blue;
}

button{
    padding: 9px 25px;
    background-color: rgba(0,136,169,1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
button:hover{
    background-color: rgba(0,136,169,0,8);
}
#login-form-wrap{
    background-color:#24252a;
    width:30pc;
    margin:80px auto;
    text-align:center;
    padding:20px 0 0;
    border-radius:4px;
    box-shadow:0 30px 50px 0 rgba(22, 18, 18, 0.2)
 }
 #login-form{
    padding:0 60px
 }
 input{
    display:block;
    box-sizing:border-box;
    width:100%;
    outline:none;
    height:60px;
    line-height:60px;
    border-radius:4px
 }
 input[type=username],input[type=confirmpassword],
 input[type=password],
 input[type=email]{
    width:100%;
    padding:0 0 0 10px;
    margin:0;
    color:#ffffff;
    border:1px solid #ffffff;
    font-style:normal;
    font-size:16px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    position:relative;
    display:inline-block;
    background:0 0
 }
 input[type=submit]{
    border:none;
    display:block;
    background-color:#3ca9e2;
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
    cursor:pointer;
    -webkit-transition:all.2s ease;
    transition:all .2s ease;
    font-size:18px;position:relative;
    display:inline-block;cursor:pointer;
    text-align:center
 }
 input[type=submit]:hover{
    background-color:#329dd5;
    -webkit-transition:all .2s ease;
    transition:all .2s ease
 }
 #create-account-wrap{
    background-color:#24252a;
    color:#f9fbff;
    font-size:14px;
    width:100%;
    padding:10px 0;
    border-radius:0 0 4px 4px
 }
 .loginid{
     font-family: Arial, Helvetica, sans-serif;
     margin: 12px;
     font-size: 30px;
    color: white;
    background-color:#24252a;
 }
 footer{
     display: flex;
     justify-content: flex-start;
     align-items: center;
     padding: 30px 10%;
     background-color: #2d2f38;
 }
 .det{
     font-size: 20px;
     color: white;
 }



Output: