DEV Community

Cover image for CUBIC SIGNUP PAGE GOOGLED USING HTML CSS AND JAVSCRIPT FOLLOW US ON INSTAGRAM PLEASE
Prince
Prince

Posted on

CUBIC SIGNUP PAGE GOOGLED USING HTML CSS AND JAVSCRIPT FOLLOW US ON INSTAGRAM PLEASE

https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>

    <!-- Google Fonts: Bolder Font (Anton) -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Moonrocks&display=swap">

    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: rgb(179, 54, 179);
            font-family: Arial, sans-serif;
        }

        .box {
    height: 85%;
    width: 70%;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 25px 0 40px rgba(0, 0, 0, 0.6); /* Darker shadow on the right side */
}



        h1 {
            font-family: 'Anton', sans-serif;
            color: rgb(157, 44, 157);
            text-align: center;
            font-size: 2rem;
        }

        label {
            display: block;
            font-size: 1rem;
            font-weight: bolder;
            font-family: 'Anton', sans-serif;
            margin-bottom: 5px;
            color: rgb(169, 38, 169);
        }

        input {
            padding: 10px;
            width: 95%;
            border: 2px solid black;
            border-bottom: 5px solid black;
            border-right: 5px solid black;
            margin-bottom: 15px;
        }

        .div {
            margin-top: 10px;
        }

        button {
            display: block;
            padding: 15px;
            background-color: rgb(199, 43, 199);
            /* color: white; */
            /* font-family: 'Anton', sans-serif; */
            font-weight: bold;
            width: 96%;
            border: 2px solid black;
            border-right: 5px solid black;
            border-bottom: 5px solid black;
            margin-top: 20px;
            cursor: pointer;
            border-radius: 20px;
        }

        button:hover {
            background-color: rgb(114, 45, 143);
        }

        .footer-text {
            text-align: center;
            margin-top: 20px;
            font-size: 0.95rem;
        }

        .footer-text span {
            color: rgb(96, 4, 96);
            cursor: pointer;
            font-weight: bold;
        }

        .footer-text span:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>SIGN UP</h1>
        <div class="div">
            <label for="name">Name</label>
            <input type="text" name="name" placeholder="Enter your name">
        </div>
        <div class="div">
            <label for="email">Email</label>
            <input type="email" name="email" placeholder="Enter your email">
        </div>
        <div class="div">
            <label for="password">Password</label>
            <input type="password" name="password" placeholder="Enter your password">
        </div>
        <button>Sign UP!</button>

        <p class="footer-text">Have an Account? 
            <span>Login Here!</span>
        </p>
    </div>
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)