How to Create Login Page : ASP.NET

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="CoderBabaSystem.wwwroot.Login" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Coder Baba</title>

    <meta charset="UTF-8"/>

    <meta name="description" content="Free Web tutorials"/>

    <meta name="keywords" content="HTML,CSS,XML,JavaScript"/>

    <meta name="author" content="John Doe"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link href="CSS/Header.css" rel="stylesheet" type="text/css"/>

    <link href="CSS/footer.css" rel="stylesheet" type="text/css"/>

    <link href="CSS/LoginCSS.css" rel="stylesheet" type="text/css"/>


</head>

<body>

    <form id="form1" runat="server">

        <%--This is Header Section--%>

        <header>

            <div class="wrapper">

                <h1>CODERBABA WEBSITE</h1>

                <nav>

                    <ul>

                        <li><a href="#">Home</a></li>

                        <li><a href="#">Portfolio</a></li>

                        <li><a href="#">Contact</a></li>

                        <li><a href="#">Blog</a></li>

                    </ul>

                </nav>

            </div>

        </header>

        <%--Header Section End here--%>


        <div style="width:700px;margin-left:350px;margin-top:50px;">

            <h2 style="text-align:center;background-color:lightgreen;padding:10px;">Login Form</h2>

        </div>


        <div class="imgcontainer">

            <img src="images/apple.png" width="100" height="100" alt="Avatar" class="avatar"/>

        </div>


        <div class="container">

            <label for="uname"><b>UserName</b></label>

            <asp:TextBox ID="txtUserName" runat="server" placeholder="Enter Username"></asp:TextBox>


            <label for="psw"><b>Password</b></label>

            <asp:TextBox ID="txtPassword" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>

            <asp:Button ID="Button1" runat="server" Text="Login" type="submit" Font-Size="Larger" OnClick="Button1_Click"/>

            <label>

                <asp:CheckBox ID="CheckBox1" runat="server" Font-Size="Larger" Text="Remember Me"/>

            </label>

        </div>


        <div class="container" style="background-color:#f1f1f1">

            <button type="button" class="cancelbtn">Cancel</button>

            <span class="psw">Forgot<a href="#">Password?</a></span>

        </div>


        <br/>


        <footer>

            <div class="wrapper">

                <div id="footer-info">

                    <p>Copyright@2020 CODERBABA.in All rights reserved</p>

                    <p><a href="#">Terms of Services</a> || <a href="#">Privacy</a></p>

                </div>


                <div id="footer-links">

                    <ul>

                        <li><h5>Home</h5></li>

                        <li><a href="#">About us</a></li>

                        <li><a href="#">Meet the Team</a></li>

                        <li><a href="#">What we do?</a></li>

                        <li><a href="#">Careers</a></li>

                    </ul>


                    <ul>

                        <li><h5>Company</h5></li>

                        <li><a href="#">About us</a></li>

                        <li><a href="#">Meet the Team</a></li>

                        <li><a href="#">What we do?</a></li>

                        <li><a href="#">Careers</a></li>

                    </ul>

                </div>

                <div class="clear"></div>

            </div>

        </footer>

    </form>

</body>

</html>

Above File is CoderBabaSystem\wwwroot\Login.aspx


















a{
    text-decoration:none;
    color:#444;
}
a:hover{
    color:red;
}
strong{
    font-weight:bold;
}
small{
    font-size:13px;
    color:#777;
    font-style:italic;
}
.clear{
    clear:both;
}
.wrapper{
    margin:0 auto;
    padding:0 10px;
    width:940px;
}
header{
    height:120px;
    background-color:lightblue;
}
header h1{
    float:left;
    margin-top:32px;
}
header h1 .color{
    color:#02b8dd;
}
header nav{
    float:right;
}
header nav ul li{
    float:left;
    display:inline-block;
    margin-top:50px;
}
header nav ul li a{
    color:#444;
    text-transform:uppercase;
    font-weight:bold;
    display:block;
    margin-right:20px;
}
Above File is CoderBabaSystem\wwwroot\CSS\Header.css

















footer {
    padding:60px 0;
    background-color:#f8fafa;
}
#footer-info {
    width:380px;
    float:left;
    margin-top:10px;
}
#footer-links {
    width:520px;
    float:right;
}
#footer-links ul {
    width:150px;
    float:left;
    margin-left:20px;
}
#footer-links ul li {
    margin:10px 0;
}
Above File is CoderBabaSystem\wwwroot\CSS\footer.css




















<style>
body {
    font-family:Arial,Helvetica,sans-serif;
}
/*Full-width input fields*/
input[type=text], input[type=password] {
    width:100%;
    padding: 12px 20px;
    margin:8px 0;
    display:inline-block;
    border:1px solid #ccc;
    box-sizing:border-box;
}

/*set a style for all buttons*/
#Button1 {
    background-color:#4CAF50;
    color:white;
    padding:14px 20px;
    margin:8px 0;
    border:none;
    cursor:pointer;
    width:100%;
}
button:hover{
    opacity:0.8;
}

/*Extra style for the cancel button*/
.cancelbtn {
    width:auto;
    padding:10px 18px;
    background-color:#f44336;
}

/*Center the image and position the close button*/
.imgcontainer {
    text-align:center;
    margin:24px 0 12px 0;
    position:relative;
}
img.avatar{
    width:8%;
    border-radius:10%;
}
.container {
    padding:16px;
    justify-content:center;
}
span.psw {
    float:right;
    padding-top:16px;
}

</style>
Above File is CoderBabaSystem\wwwroot\CSS\LoginCSS.css

Comments

Post a Comment