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: