Explore the world of Neo-brutalism in web design. Learn to create a stunning dashboard with HTML and CSS for a responsive and impactful user interface.
Table of Contents
Explore the world of Neo-brutalism in UI design as we guide you through creating a responsive dashboard using HTML and CSS. Uncover the beauty of raw aesthetics and functional simplicity in this unique journey of design and development. Let's dive in and craft a distinctive interface that seamlessly blends form and function.
Join My Telegram Channel to Download the Project Source Code: 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 dashboard.
After creating the files just paste the following 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.
Here's a breakdown of the code:
1. <!DOCTYPE html>: Declares the HTML version being used, which is HTML5.
2. <html lang="en">: The root element of the HTML document, with the "lang" attribute indicating that the content is in English.
3. <head>: Contains meta-information about the HTML document, including character set, viewport settings, title, and a link to an external stylesheet.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use its latest rendering engine.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design.
- <title>Responsive Neo-brutalism Dashboard</title>: Sets the title of the web page.
- <link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet named "styles.css" for styling the HTML document.
4. <body>: Contains the main content of the HTML document.
5. <div class="dashboard">: Represents the main container for the dashboard.
6. <div class="profile neo-box">: Contains a user profile section with an image, greetings, and a sun icon.
7. <div class="data">: Contains different sections of data, including a schedule table, exercise table, and calorie information.
- <div class="schedule-table neo-box">: Displays a weekly schedule table with days, scheduled exercises, and times.
- <div class="exercise-table neo-box">: Shows a table of the last 5 exercises with duration, and includes a "Show all" button.
- <div class="calories neo-box">: Presents information about active calories burned today, this week, and this month.
8. <div class="achievements">: Contains personal bests and challenges sections.
- <div class="personal-bests neo-box">: Lists personal best achievements in running, deadlift, and plank.
- <div class="challenges neo-box">: Displays ongoing challenges with progress bars.
9. <p class="credits">: Credits section with a link to the creator's website.
10. <div class="activity-feed">: Represents an activity feed with a scrolling marquee displaying friends' recent activities.
11. Closing tags (</body> and </html>): Conclude the HTML document.
This is the basic structure of our neo-brutalism dashboard using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the dashboard is in place, the next step is to add styling to the dashboard using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our dashboard.
Let's break down the key elements:
1. Font Imports:
- The @import rule is used to import external fonts from Google Fonts.
- Three fonts are imported: 'Darker Grotesque' with a weight of 900, 'Luckiest Guy', and 'Public Sans' with a weight of 600.
2. Body Styles:
- overflow-x: hidden;: Hides the horizontal scrollbar.
- width: 100%;: Sets the width of the body to 100%.
- margin: 0; padding: 0;: Removes default margin and padding.
- font-family: 'Public Sans', sans-serif;: Sets the default font family for the body.
- background-color: #bc9fdb;: Sets the background color.
3. Header Styles:
- h1 and h2, h3, h4, h5 have specific font families assigned.
4. Styling for Specific Classes:
- .dashboard: Adds padding to the dashboard.
- .neo-box: Defines a box with a shadow, border-radius, padding, and a white background color.
- .profile: Defines styling for a profile section with a yellow background.
- .profile > div: Adds styling for child div elements inside the profile section.
- .sun: Creates a sun element with position, width, and animation.
5. Media Queries:
- Adjust styles for smaller screens (max-width: 1130px).
- Changes the layout of .data, .achievements, and .profile for better responsiveness.
6. Styling for Numbers, Tables, and Marquee:
- .number: Styles numbers with the 'Darker Grotesque' font.
- table tr th and table tr td: Styles table headers and cells.
- .marquee: Creates a marquee-like scrolling element at the bottom of the page.
7. Progress Bar Styles:
- .progress-container and .progress-bar: Styles for a progress bar.
8. Subtitle Styles:
- .subtitle: Styles for a subtitle with an image.
9. Button Styles:
- button: Defines styling for buttons, including font size, background color, padding, and box shadow.
- button:hover: Defines styles for the button hover state.
10. List and Credits Styles:
- ul and ul li: Styles for unordered lists and list items.
- .credits: Styles for credits section.
11. Link Styles:
- a: Styles for links with black color.
12. General Styles:
- cursor: pointer; is applied to buttons.
- Various styles for specific elements like images, headers, and margins.
This will give our dashboard 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@900&family=Luckiest+Guy&family=Public+Sans:wght@600&display=swap');
body {
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0;
font-family: 'Public Sans', sans-serif;
background-color: #bc9fdb;
}
h1 {
font-family: 'Darker Grotesque', cursive;
}
h2, h3, h4, h5 {
font-family: 'Darker Grotesque', sans-serif;
}
h2 {
font-size: 2em;
}
.dashboard {
padding: 1em;
padding-right: 1.5em;
}
.neo-box {
box-shadow: 7px 10px 0px 3px rgba(0,0,0,1);
-webkit-box-shadow: 7px 10px 0px 3px rgba(0,0,0,1);
-moz-box-shadow: 7px 10px 0px 3px rgba(0,0,0,1);
border-radius: 10px;
padding: 20px;
background-color: white;
}
.profile {
margin: 15px;
background-color: #f2d048;
padding: 20px;
padding-top: 10px;
padding-bottom: 10px
}
.profile > div {
margin-top: 2em;
display: flex;
align-items: center;
gap: 2em;
}
.profile h2 {
line-height: 100%;
}
.profile img {
width: 16vw;
padding-left: 1em;
padding-top: 1em;
}
.profile h1 {
font-size: 10vw;
margin-top: 0;
margin-bottom: 0;
line-height: 100%;
}
.profile h2 {
text-align: center;
margin-top: 0;
}
.sun {
position: absolute;
width: 20vw;
right: 4vw;
top: 250px;
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
}
.data {
display: flex;
justify-content: space-between;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
.achievements {
display: flex;
justify-content: space-between;
gap: 1em;
}
.achievements > div {
margin: 1em;
width: 50%;
margin-bottom: 3em;
}
.data {
padding: 1em;
}
.data > div {
margin: 3em;
width: 33%;
margin-left: 0;
margin-bottom: 1em;
}
.data > div:first-child {
margin-left: 0px;
}
.data > div:last-child {
margin-right: 0px;
}
@media only screen and (max-width: 1130px) {
.data, .achievements {
display: block;
}
.data > div {
width: calc(100% - 2em);
}
.achievements > div {
width: calc(100% - 4em);
}
.profile > div {
display: block;
text-align: center;
}
.profile > div > img {
width: 90%;
max-width: 300px;
margin: auto;
margin-bottom: 2em;
}
.subtitle {
padding-left: 3em;
}
.subtitle {
margin-left: -0.5em;
}
table {
width: 100%;
}
}
.number {
font-family: 'Darker Grotesque', sans-serif;
font-size: 3em;
}
table tr th {
font-family: 'Darker Grotesque', sans-serif;
font-size: 1.2em;
text-align: left;
font-weight: bold;
}
table tr td, table tr th {
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
}
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
padding: 0.5em;
background: #f08cb6;
right: 0;
}
.marquee > span {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite;
}
.marquee span span {
padding-left: 3em;
padding-right: 3em;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.progress-container {
background-color: #edd06121;
box-shadow: 7px 10px 0px 3px rgba(0,0,0,1);
-webkit-box-shadow: 7px 10px 0px 3px rgba(0,0,0,1);
-moz-box-shadow: 7px 10px 0px 3px rgba(0,0,0,1);
border-radius: 10px;
height: 30px;
width: 80%;
margin: auto;
border-radius: 50px;
margin-top: 0.5em;
margin-bottom: 3em;
}
.progress-bar {
background-color: #f2d048;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
height: 100%;
}
.subtitle {
display: flex;
align-items: center;
gap: 1em;
margin-bottom: 1em;
position: relative;
text-align: center;
}
.subtitle img {
height: 120px;
left: -40px;
top: -40px;
position: absolute;
}
.subtitle h2 {
text-align: center;
width: 100%;
font-size: 2em;
}
table {
margin: auto;
margin-bottom: 2em;
}
table tr td {
border: 1px solid black;
border-radius: 10px;
padding: 0.5em;
box-shadow: 2px 2px 0px 1px rgba(0,0,0,1);
}
table tr td:first-child {
background: black;
color: white;
box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.4);
}
ul {
padding-left: 0;
}
ul li {
list-style: none;
text-align: center;
margin-bottom: 1em;
}
.credits {
text-align: center;
padding-bottom: 2em;
}
a {
color: black;
}
button {
cursor: pointer;
font-size: 1.2em;
border: none;
transform: translateY(-5px);
font-family: 'Public Sans', sans-serif;
background: #e28da4;
padding: 0.5em;
width: 100%;
border-radius: 15px;
box-shadow: 2px 6px 0px 2px rgba(0,0,0,1);
-webkit-box-shadow: 2px 6px 0px 2px rgba(0,0,0,1);
-moz-box-shadow: 2px 6px 0px 2px rgba(0,0,0,1);
}
button:hover {
background: #e28da4;
transform: translateY(0px);
box-shadow: 2px 5px 0px 0px rgba(0,0,0,1);
-webkit-box-shadow: 2px 5px 0px 0px rgba(0,0,0,1);
-moz-box-shadow: 2px 5px 0px 0px rgba(0,0,0,1);
} Final Output:
Conclusion:
Congratulations on navigating the realm of Neo-brutalism in UI design and successfully crafting a responsive dashboard using HTML and CSS. By embracing the raw aesthetics and functional simplicity inherent in Neo-brutalist principles, you've created a user interface that stands out.
Remember, experimentation is key. Feel free to customize and iterate upon what you've built, incorporating your unique touch. As you continue your journey in web development, keep abreast of design trends, and stay inspired.
We hope this guide has empowered you to not only understand the essence of Neo-brutalism but also to apply these principles in your future projects. Share your thoughts and creations in the comments below, and happy coding!
Code by: Zuzze
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 😊
