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>