Skip to main content

Login form using html/css

{html code}

<html>

    <head>

        <link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'>

        <title>Login Page</title>

        <style>

            a:hover{color: red;}

            a:active{color: yellow;}

        </style>

    </head>

    <body>

        <div class='container'>

            <div class="head"><h3>* Login form</h3></div>

            <input class='id' placeholder="email or username" >

            <br><br><br>

            <input class='password' placeholder="password" type='password'>

            <br><br><br><br>

            <input class='button' type="submit" value="Submit">

            <div class="text">

                <p><i>Forget Password!</i>

                    <a href='https://www.gmail.com'>Click here</a>

                </p>

            </div>

        </div>

    </body>

</html>


{css code}

body{

    display: flex;

    padding: 50px;

    margin: 20px;

    background: linear-gradient(325deg, purple, rgb(76, 0, 255));

}


.container{

    position: absolute;

    width: 320px;

    height: 300px;

    background: linear-gradient(180deg, rgba(223, 220, 220, 0.459), rgba(214, 214, 214, 0.301));

}


.head{

    position: relative;

    left: 30%;

    font-family: 'poppins', sans-serif;

    font-size: 15px;

    color: white;

}


.id{

    width: 60%;

    top: 10%;

    left: 10%;

    position: relative;

    background: transparent;

    border: none;

    outline: none;

    border-bottom: 1px solid white;

}


.password{

    width: 60%;

    top: 10%;

    left: 10%;

    position: relative;

    background: transparent;

    border: none;

    outline: none;

    border-bottom: 1px solid white;

}


.button{

    position: relative;

    left: 40%;

    border-radius: 10%;

    background: transparent;

    box-shadow: 0 0 20px white;

    outline: none;

}


.text{

    color: white;

    position: relative;

    left: 10%;

}


To see how the code works click on the link: click here

For coloring animation visit link: click here

Labels:

Comments

Post a Comment

Popular posts from this blog

Machine Learning model for predicting 'Salary' of an Employee based on 'YearsofExperience'

“ Data really powers everything that we do .” — Jeff Weiner In the 21st century, Data is one of the most valuable entity anyone can have! There is loads-and-loads of data generated everyday. And to process this huge amount of data we need people who have expertise in it, who by the way are called as Data Engineers. Data Engineer collects the raw data, process it for further use; but we need an Analytic process which will automatically predict the data based on the previous one. And here's how 'Machine Learning' comes into the picture. "Machine Learning allows us to make highly accurate predictions based on the Historical Dataset which is used to train the machine learning model." Today let us look at a similar ML model to predict the 'Salary' of Employees based on 'YearsofExperience'. (P.S: I've provided pdf link at the very bottom of this page for clear understanding) 1) import the required modules 2) read the csv file 3) plot the graph 4) us...
Post a Comment
Read more

Introduction to SQL

 Q.)  What is SQL ? Ans.) SQL(Structured Query Language) is a standardized language to communicate with the database.  With the help of it we can retrieve data from the database. SQL not only allows us to read the data but also allows us to write the data in the database.  Data in the database is stored in the form of tables. We can Select, Insert, Update, Delete, Create, Alter, Drop and can perform many more operations on the table. And these are called as SQL Statements. * SQL Statements are classified mainly into 4 categories :- 1) DML (Data Manipulation Language) 2) DDL (Data Definition Language) 3) DCL (Data Control Language) 4) TCL (Transaction Control Language) * Under DML we have :-(No Autocommit) 1. Select  2. Insert  3. Update  4. Delete  5. Merge    * Under DDL :-(Allows Autocommit) 1. Create 2. Alter  3. Drop  4. Truncate  5. Flashback * Under DCL :-(Allows Autocommit) 1. Grant  2. Revoke  * Under T...
Post a Comment
Read more

Slicing in Python

  * Let's first understand how a slicing is been done-- Consider a string namely==>> string = 'python_developer!' If we print this then-- #  Output: python_developer! >> Now lets do some slicing here-- print (string[0:17:2]) >> Then the-- # Output: pto_eeoe! >> Lets see how it works-- So basically the print statement is in the form of  print(string[a:b:c]) >>  Now here   --           a: Starting position b: Ending position c: Steps taken >> If we take out length of the given string then-- print (len(string)) # Output: 17 * The total length of the given string is 17. Therefore in our given problem the string will be printed from 0 index to 16 index and would take 2 steps. >> Hence the output-- # Output: pto_eeoe! >> Now the print statement that we have used here is-- print (string[0:17:2]) >> We can also use-- print (string[:17:2]) >> It will give the same output-- ...
Post a Comment
Read more