green theme login page HTML _ CSS

-

 <!DOCTYPE html>

<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Playwrite+US+Modern+Guides&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
</head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Playwrite+US+Modern+Guides&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');


:root{
    --primary:rgb(52, 173, 157);
    --secondary: rgb(79, 144, 89);
    --button:rgb(53, 140, 111);
    --background:white;
}

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: var(--primary);
    height: 100vh;display: flex;align-items: center;justify-content: center;
}

form{
   
height: 400px;width: 350px;background-color: var(--background);
border-radius: 12px; padding: 60px;margin: 10px;
display: flex;align-items: center;justify-content: flex-start;flex-direction: column;
}

.Login{
    top:0px;font-size: 1.7rem;font-family:Noto Sans;
    position: relative;
    margin-bottom: 30px;
    color: var(--secondary);
}

form input{
    border-radius: 3px;
    margin: 10px; border: 1px solid rgb(183, 181, 181);
    width: 100%;
    padding: 15px;
}
.show {
    left: -40px;
    position: relative;
    width: 100%;
    flex-direction:row;
    justify-content: flex-start;
    display: flex;
    align-items: center; font-family: roboto;

}
.show input{
    left: -140px;
    position: relative;
}
.show pre{
    color: grey;
    font-family: roboto;
    align-items: center;
    position:absolute;
    font-size: .8rem;
    left: 50px;
}

.sign_in{
    font-family: poppins;
    width: 120px; margin: 30px;
    border: 0cap; padding: 1.2em; color: var(--background);
    background-color: var(--button); border-radius: 10px;
}


form span,a{
    text-decoration: none;
    font-family: poppins;
    font-size: .8rem;
}







</style>
<body>
    <form action="#">
<strong class="Login">Login</strong>

<input type="text" name="" id="" placeholder="Email">
<input type="text" name="" id="" placeholder="Password">

<div class="show">
    <input type="checkbox"> <pre>Show Password</pre>
</div>

<button class="sign_in">Sign in</button>


   <span>Forgot <a href="">Username</a>
    /<a href="">Password?</a></span>
   
   
    <span>Don't have account? <a href="">Sign up</a></span>



    </form>


</body>
</html>

Comments

Post a Comment

Popular posts from this blog

HTML FORMS

-
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < H1 > Forms in HTML </ H1 >     < form action = "/submit.php" > < div >   < label for = "Name" > Name </ label >   < input type = "text" placeholder = "Enter name" > </ div > < div >     < label for = "Phone" > Phone </ label >     < input type = "tel" placeholder = "Enter phone no." >     </ div >     < div >     < label for = "Email" > Email </ label >     < input type = "email" placeholder = "Email" >     </ div >     < div >     < l...
Read more

FORM STYLING IN CSS

-
<! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > forms </ title >   </ head >   < style >     body {       margin : 0 ;       padding : 0 ;     }     .csf {       display : flexbox;       text-align : center ;       background-color : rgb ( 216 , 216 , 216 );       height : 400px ;       width : 550px ;       padding : 90px 0px 0px 15px ;       margin-left : 40% ;       margin-top : 10% ;       border-radius : 2px ;       border : 2px solid ;       font-size : 19px ;     }     input {       mar...
Read more