Learn how to create a stunning Neubrutalism card for web development using HTML and CSS. Discover the design principles behind Neubrutalism and apply them to your own projects.
Table of Contents
Neubrutalism is a design style that emerged in the 1950s and 60s and gained popularity in the 2010s. It is characterized by the use of stark, raw materials, exposed concrete, and a focus on functionality over aesthetics. Neubrutalism is a minimalist design style that emphasizes the use of grid-based layouts, simple typography, and the use of negative space. It has been applied to a range of design fields, including architecture, graphic design, and web design. In web design, Neubrutalism is often used to create simple, clean, and functional user interfaces that prioritize usability and ease of navigation over flashy visuals.
In this blog post, we will explore the design principles behind Neubrutalism and provide a step-by-step guide on how to create a stunning Neubrutalism card using HTML and CSS. By the end of this post, readers will have a solid understanding of Neubrutalism design principles and how to apply them to their own web development projects.
Let's start making an amazing Neubrutalism card using HTML, and 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 Neubrutalism card.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The first line of code, <!DOCTYPE html>, is a document type declaration that tells the browser that this is an HTML5 document. The next line starts the HTML document and sets the language to English with the lang attribute.
The <head> element contains meta information about the page, such as the title, character encoding, and viewport settings. The title of the page is "Creating Stunning Neubrutalism Card with HTML and CSS". The character encoding is set to UTF-8, which is a standard character set that includes most characters used in written languages. The viewport is set to the width of the device, which ensures that the page looks good on different screen sizes.
The <link> element points to an external CSS (Cascading Style Sheets) file called "styles.css", which contains the style rules for the page. This file is located in the same directory as the HTML file.
The <body> element contains the visible content of the page. The content is enclosed in a <div> element with the class "container", which is used for layout purposes. Inside the container, there is another <div> element with the class "card". This is the main content area of the page and contains a heading, some paragraphs of text, and two buttons.
The heading is enclosed in an <h1> element, which is the largest heading size in HTML. The text of the heading is "Hello".
The paragraphs of text are enclosed in <p> elements. The paragraph contains some placeholder text called "Lorem ipsum dolor sit amet", which is commonly used in design mockups.
The buttons are enclosed in a <div> element with the class "button-container". The first button says "Cancel" and the second button has the class "green" and says "Save". The "green" class is defined in the external CSS file and sets the background color of the button to green.
This is the basic structure of our Neubrutalism card using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the Neubrutalism card is in place, the next step is to add styling to the Neubrutalism card using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our Neubrutalism effect.
The first line of code imports a font from Google Fonts. The font is called "Darker Grotesque" and has a weight of 600. It is used as the font for the entire document.
The body selector targets the entire body of the document and sets the background color to a light green color (#b2e99d). It also sets the font family to "Darker Grotesque".
The .container selector targets a div element with the class "container" and sets the margin to 100px from the top and bottom and auto from the left and right. The maximum width is set to 600px.
The .card selector targets a div element with the class "card" and sets the background color to white (#fff), the border radius to 20px, and adds a drop shadow effect. The padding is set to 20px and a border of 4px solid black (#000) is added.
The .card h1 selector targets the heading element inside the "card" div and sets the margin to 0, font size to 42px, and letter spacing to 2px.
The .card p selector targets all paragraphs inside the "card" div and sets the font size to 18px.
The .button-container selector targets a div element with the class "button-container" and aligns the text to the right.
The button selector targets all button elements on the page and sets the margin to 0px from the top and bottom and 5px from the left and right. The background color is set to white (#fff), font size to 18px, padding to 10px on top and bottom, and 15px on the left and right. The border radius is set to 6px and a 3px solid black (#000) border is added. A box shadow effect is added to the button, and the cursor is set to a pointer.
The button.green selector targets a button element with the class "green" and sets the background color to green and text color to white (#fff).
The button:active selector targets a button element when it is clicked and adds a transform effect to move it down 4px and a box shadow effect to create a small indentation.
This will give our Neubrutalism card 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/css2?family=Darker+Grotesque:wght@600&display=swap');
body {
background: #b2e99d;
font-family: 'Darker Grotesque', sans-serif;
}
.container {
margin: 100px auto;
max-width: 600px;
}
.card {
background: #fff;
border-radius: 20px;
filter: drop-shadow(8px 8px 0px #000);
padding: 20px;
border: 4px solid #000;
}
.card h1 {
margin: 0;
font-size: 42px;
letter-spacing: 2px;
}
.card p {
font-size: 18px;
}
.button-container {
text-align: right;
}
button {
margin: 0 5px;
background: #fff;
font-size: 18px;
padding: 10px 15px;
border-radius: 6px;
border: 3px solid #000;
box-shadow: 5px 5px 0px 0px #000;
cursor: pointer;
}
button.green {
background: green;
color: #fff;
}
button:active{
transform: translateY(4px);
box-shadow: 1px 2px 0px 0px #000;
} Final Output:
Conclusion:
In conclusion, creating a stunning Neubrutalism card using HTML and CSS is a great way to apply the principles of this design style to web development. By following the steps outlined in this blog post, developers can create simple, functional, and aesthetically pleasing user interfaces that prioritize usability and ease of navigation.
We have discussed the key design principles behind Neubrutalism, including the use of negative space, grid-based layouts, and bold typography. We have also provided step-by-step instructions for creating a Neubrutalism card using HTML and CSS, along with code snippets that readers can use as a starting point for their own projects.
We hope that this blog post has provided readers with a solid understanding of Neubrutalism design principles and how they can be applied to web development. By experimenting with different design variations and applying these principles to their own projects, readers can create stunning Neubrutalism cards that are both functional and beautiful.
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 😊
