Form Container

Part of the Styling with CSS section of Coddy's HTML journey — lesson 51 of 76.

Challenge

Easy

In this lesson we will make the form look more structured and visually appealing.

Follow the steps below:

Apply styles to the form container to make it stand out. Write a CSS rule that targets the element with the class login-form.
1. Set a background color (white or any color that looks good).
2. Add padding so the content has space inside.
3. Make the corners rounded.
4. Apply a box-shadow to create a soft floating effect.
5. Add a border around the form (choose any color and thickness).
Center the text inside the form using text-align property.

Try it yourself

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>