SOFT UI Sign up Page using HTML and CSS

Python with Shubham

SOFT UI Sign up Page using HTML and CSS



HTML Code:-    index.html


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEUMORPHISM SIGN UP PAGE</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>  
    <div class="Page">
        <h1>SIGN UP PAGE</h1>
        <input type="text" class="First" placeholder="First Name">
        <input type="text" class="Last" placeholder="Last Name">
        <input type="email" class="Email" placeholder="Email">
        <input type="text" class="Mobile" placeholder="Mobile">
        <input type="password" class="Pswrd" placeholder="Password">
        <input type="password" class="Cpswrd" placeholder="Confirm Password">
        <input type="submit" class="Btn" value="SIGN UP">
    </div>
</body>

</html>



CSS Code:-     style.css


* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: steelblue;
    text-align: center;
}

h1 {
    letter-spacing: 2px;
    font-family: arial;
    margin: 20px 0px;
    color: darkblue;
}

.Page {
    background: transparent;
    border-radius: 20px;
    margin: 100px 530px;
    position: fixed;
    height: 500px;
    width: 450px;
    box-shadow: 2px 2px 5px #483D8B,
        -1px -1px 7px #B0E0E6;
}

.First {
    text-transform: uppercase;
    background: transparent;
    border-radius: 20px;
    margin: 5px -210px;
    text-align: center;
    font-weight: bold;
    position: fixed;
    font-size: 20px;
    color: #4B0082;
    outline: none;
    border: none;
    width: 200px;
    height: 45px;
    box-shadow: inset 2px 2px 5px #483D8B,
        inset -1px -1px 5px lightgray;
}

.Last {
    text-transform: uppercase;
    background: transparent;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    margin: 5px 10px;
    font-size: 20px;
    position: fixed;
    color: #4B0082;
    outline: none;
    border: none;
    width: 200px;
    height: 45px;
    box-shadow: inset 2px 2px 5px #483D8B,
        inset -1px -1px 5px lightgray;
}

.Email {
    background: transparent;
    border-radius: 20px;
    margin: 80px -200px;
    text-align: center;
    font-weight: bold;
    position: fixed;
    font-size: 20px;
    color: #4B0082;
    outline: none;
    border: none;
    width: 400px;
    height: 45px;
    box-shadow: inset 2px 2px 5px #483D8B,
        inset -1px -1px 5px lightgray;
}

.Mobile {
    text-transform: uppercase;
    background: transparent;
    margin: 150px -200px;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    position: fixed;
    font-size: 20px;
    color: #4B0082;
    outline: none;
    border: none;
    width: 400px;
    height: 45px;
    box-shadow: inset 2px 2px 5px #483D8B,
        inset -1px -1px 5px lightgray;
}

.Pswrd {
    text-transform: uppercase;
    background: transparent;
    margin: 220px -200px;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    position: fixed;
    color: #4B0082;
    outline: none;
    border: none;
    width: 400px;
    height: 45px;
    box-shadow: inset 2px 2px 5px #483D8B,
        inset -1px -1px 5px lightgray;
}

.Cpswrd {
    text-transform: uppercase;
    background: transparent;
    margin: 290px -200px;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    position: fixed;
    color: #4B0082;
    outline: none;
    border: none;
    width: 400px;
    height: 45px;
    box-shadow: inset 2px 2px 5px #483D8B,
        inset -1px -1px 5px lightgray;
}

.Btn {
    background: transparent;
    border-radius: 20px;
    margin: 360px -80px;
    text-align: center;
    font-weight: bold;
    position: fixed;
    font-size: 20px;
    color: darkblue;
    outline: none;
    border: none;
    width: 150px;
    height: 45px;
    box-shadow: 2px 2px 5px #483D8B,
        -1px -1px 5px lightgray;
}

.Btn:active {
    transform: translateY(2px);
}

input::placeholder {
    color: darkgray;
    text-transform: capitalize;
}




Follow me on Instagram:- Python_with_Shubham





0 Comments

Newest