How to Create Neobrutalism Sign-up Form Using HTML and CSS Only

By Faraz - September 06, 2022

In this tutorial, you will learn how to create a Neobrutalism style sign-up form using HTML and CSS only. Build a stylish and minimalistic form that fits perfectly with your website's design.

Join us on Telegram

Read Also Create a Sneaker Shoes Landing Page.jpg

Create a Sneaker Shoes Landing Page (Source Code)

Neubrutalism, or Neobrutalism as some call it, is a mix of standard Brutalism in web design and more modern standards of typography, illustration, and animation. In this tutorial, we'll create a signup form in neobrutalism style using HTML and CSS.

Before we dive into the tutorial, let's discuss what Neobrutalism web design is and why we need a sign-up form for our website. Neobrutalism is a web design style that embraces a raw and minimalistic approach, with a touch of modern elements. It's characterized by the use of monochromatic colors, simple typography, and bold and large-scale graphics. A sign-up form is a crucial element of a website, allowing visitors to register for a service or subscribe to a newsletter.

Watch full tutorial on my YouTube Channel: Watch here.

Let's start making an amazing Neobrutalism Sign-up Form using HTML and Pure CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Neobrutalism Sign Up Form.

After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Neobrutalism Sign-up Form</title>
</head>
<body class="container">
    <div class="form_area">
        <h4 class="title">SIGN UP</h4>
        <form action="">
            <div class="form_group">
                <label for="name" class="sub_title">Name</label>
                <input type="text" class="form_style" id="name" placeholder="Enter your full name">
            </div>
            <div class="form_group">
                <label for="email" class="sub_title">Email</label>
                <input type="email" class="form_style" id="email" placeholder="Enter your email" />
            </div>
            <div class="form_group">
                <label for="password" class="sub_title">Password</label>
                <input type="password" class="form_style" id="password" placeholder="Enter your password" /> 
            </div>
            <div>
                <button class="btn">SIGN UP!</button>
                <p>Have an Account? <a href="" class="link">Login Here!</p>
            </div>
        </form>
    </div>
</body>
</html>

Read Also Create Mobile Product Landing Page using HTML, CSS, and JavaScript.jpg

Create a Mobile Product Landing Page using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create neobrutalism effect. We will also add some padding and margin properties to ensure that everything looks correct.

This will give our neobrutalism sign up form an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
    background: #7b4397;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.form_area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    height: auto;
    width: auto;
    border-radius: 20px;
    box-shadow: 30px 35px 2px #52206b;
}

.title{
    color: #7b4397;
    font-weight: 900;
    font-size: 1.5em;
    margin-top: 20px;
}

.sub_title{
    font-weight: 600;
    margin: 5px 0;
}

.form_group{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 20px;
}

.form_style{
    outline: none;
    border: 2px solid #000;
    box-shadow: 3px 4px 0px 1px #000;
    width: 290px;
    padding: 12px 10px;
    border-radius: 4px;
    font-size: 15px;
}

.form_style:focus, .btn:focus{
    transform: translateY(4px);
    box-shadow: 1px 2px 0px 0px #000;
}

.btn{
    padding: 15px;
    margin: 30px 0px;
    width: 310px;
    font-size: 15px;
    background: #7b4397;
    border-radius: 30px;
    font-weight: 800;
    box-shadow: 5px 5px 0px 0px #000;
}

p{
    margin: 20px 0px;
}

.link{
    font-weight: 800;
}

Final Output:

Read Also Creating an e-commerce Website with HTML, CSS, and JavaScript.jpg

Creating an Ecommerce Website with HTML, CSS, and JavaScript (Source Code)

Conclusion:

In this tutorial, you've learned how to create a Neobrutalism style sign-up form using HTML and CSS only. You've learned how to create the HTML structure of the form, style it using CSS, and implement form validation. With these skills, you can create a stylish and simple sign-up form that fits perfectly with your website's design. Keep practicing and experimenting with different designs to create a unique and modern sign-up form.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: neobrutalism, sign-up form, html, css, neobrutalism web design, create sign-up form using html and css, html form design, css form design, neobrutalism style sign-up form

End of the article

Latest Post

Creating a Responsive Bootstrap Dashboard: Source Code Included

by Faraz - May 14, 2024

Learn how to design, customize, and implement interactive Bootstrap dashboards with our comprehensive guide. Source code included for easy development.