Hope you you're doing well!
I made the front-end of a dashboard, in
CSS, and a tiny bit of
It's completely responsive, meaning you can view and use it perfectly on any type of device. It also has a dark and light theme, as well as many cool animations!
Here's how a bit how looks it like:
This is how it looks like on a phone:
Important to know; this is just the front-end and the design of the dashboard. It doesn't actually work or have any real data in it. However, feel free to fork the repl and make it functional! :)
- Pushes content to the side (on smaller devices, overlaps content)
+ NEW REPORTbutton
- Different sections (
- Each with different tabs (as well as an active tab)
- Main: Home, Analytics, Sales, Costs, Market
- People: Users, Reviews, Feedback
- Bottom section is fixed and has settings icon as well as dark/light theme toggle
- Calendar icon
- Search box with search icon
- Profile with username, profile picture, and notification
- Friendly message to user
- Contains several types of (fake) data with different sizes:
- Rect (
- Small (
- Big (
- Large (
- Rect (
- Each data card has an icon, title, value, and description, as well as icon to open more detailed view (doens't actually exist)
- Below, there's the actual data under a graph, big number, or text
Average session length
- Multiple area graph
Less sessions/More users
- Big number
- Line graph
- Column graph
- Big number
- Smaller numbers next to it
- Picture of reviewer and name
- Number of stars (on 5)
The font family I used is
'Be Vietnam Pro', sans-serif, a font from Google Fonts. It's a smooth and modern font that looks good with technology.
I also used a secondary font:
'Roboto Condensed', sans-serif (also from Google Fonts). It's a sort of thin, condensed (like the name implies) font that is more straight. When I used it, the text was in all caps and there was also a letter spacing of
2px. This is because I feel like SC (small caps) fonts look very big and imposing, so having some space between each letter makes it a bit less 'forceful'.
These 2 fonts are a bit opposing each other and I much like the contrast. Here's an example of how they look like together:
There are 2 different color schemes; one for dark mode and one for light mode. I showed how dark mode looks like at the top, and light mode looks like this:
As you can see, almost all the colors; accent color, primary, secondary, colors for the graphs and numbers, etc. have changed. In light mode, the colors are more saturated and sort of 'brighter', as compared to the dark theme.
I got inspiration for the different colors from Google's Material Design color-picking tool. It shows many different colors with different amounts of saturation or intensity of that same color. These different intensities were used for the different themes.
I've used many icons in this site, for example in the sidebar with each tab (Home, Analytics, Sales, Costs, etc.), or in the top bar, and also in the main content for each data item.
These icons come from Ionicons, a great library filled with beautiful icons that you can also customize.
There are several animations in this site. For example, when you hover on any of the icons in the sidebar, they rotate to the right a bit. When you hover on the icons in the top right corner of each data container, they move to the top and right. The elements in the topbar also become a bit bigger on hover. Finally, when you hover on the cross symbol to close the sidebar, it spins, and when you hover on the hamburger icon to open the sidebar, the lines seperate.
The charts come from Charts.css, a great framework for data such as columns, areas, bars, lines, etc. What's cool is that they are rather simple to use, and you can customize their colors, shapes, and values, and can even add animations or motion effects. You can get started here.
The faces used in the reviews data container are all fake and generated with AI. They were generated with this face generator. With this generator, you get a completely random face, or tweak things such as age, emotions, skin/hair color, and much more!
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
If there are any issues/bugs/things breaking, please comment them or DM me on Discord @
If you use this dashboard template/site, please keep in mind that I'd love if you gave credit (like in the footer of your website or something), as I did put some effort into this! :)
@AmoghTheCool In the middle of the night (since programmers don't sleep, jk) turn this (or any other website) to light mode and turn your brightness to max and put it in anyone's face whom you want to suffer. Just know that they may or may not die from it. Be careful not to end your own eyes.
What if you make the calendar icon sort of "attached" to the menu that slides out. Make it next to the hamburger icon, then have it slide out when you toggle the menu.
Great dashboard! I really like the design style.
What website did you use for the iMac/iPhone/MacBook pictures?
Thought of the day:
Statistically, Windows is more popular than macOS, yet images like this are pretty much always on Apple machines. Why is this?
THIS IS FANTASTIC! I love this. Could I use this in my website? Is there any specific format that you would like credit to be given (such as a URL to your website, replit page, discord username, etc.)?
maybe next time you should tell people to read the readme to make the post shorter, but it’s still cool!