Skip to content
Sign upLog in
← Back to Community

Dashboard

Profile icon
Bookie0

Dashboard πŸ“ˆ

Hey!! πŸ‘‹

Hope you you're doing well!

I made the front-end of a dashboard, in HTML, CSS, and a tiny bit of JS!

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:

howItLooksLike

This is how it looks like on a phone:

mobile

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! :)



Features ✨

Sidebar

sidebar

  • Pushes content to the side (on smaller devices, overlaps content)
  • CTA + NEW REPORT button
  • Different sections (MAIN, PEOPLE)
  • 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

Topbar

topbar

  • Calendar icon
  • Search box with search icon
  • Profile with username, profile picture, and notification

Content

content

  • Friendly message to user
  • Contains several types of (fake) data with different sizes:
    • Rect (1 x 2)
    • Small (1 x 1)
    • Big (2 x 2)
    • Large (4 x 2)
  • 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

sessionLength

  • Multiple area graph

Less sessions/More users

lessSessions

  • Big number

Daily users/Performance

dailyUsers

  • Line graph

Sales

sales

  • Column graph

Revenue/Costs

revenue

  • Big number
  • Smaller numbers next to it

Reviews

reviews

  • Picture of reviewer and name
  • Number of stars (on 5)
  • Review

Style

Font family

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:

contrast

Colors

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:

light

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.

colors

Icons

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.

Animations

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.

Charts

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.

Faces

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!


Closing πŸšͺ

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 @ Bookie0#7538.

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! :)

Have a fantastic day!!!

Bye! πŸ‘‹

Voters
Profile icon
TonyYin1
Profile icon
SimerLol
Profile icon
Bookie0
Profile icon
SnipBlox
Profile icon
AhmadDanial2
Profile icon
inyourface3445
Profile icon
aolifdood
Profile icon
latifaah
Profile icon
luiggipasache
Profile icon
TomatoCake
Comments
hotnewtop
Profile icon
PixiGem

i died the second i turned on light mode

Profile icon
Bookie0

lmao

@PixiGem

Profile icon
PixiGem

@Bookie0
lmfao I love how u always say lmao

Profile icon
Bookie0

lmao

@PixiGem

Profile icon
FlaminHotValdez

@Bookie0
lmfao is superior to lmao

Profile icon
Bookie0

lmfao

@FlaminHotValdez

Profile icon
Froggo-School

lmao

@Bookie0

Profile icon
cutech

@Bookie0
Could I work with you in frontend?

Profile icon
cutech

@cutech
my best site is spotlite.repl.co

Profile icon
Bookie0

Wdym 'work with you'?

@cutech

Profile icon
cutech

@Bookie0
code together on these types of projects

Profile icon
Bookie0

@cutech
Hm idk I'm kinda busy these days. Feel free to let me know what kinds of projects you're doing and I can see what I can do :)

Profile icon
cutech

@Bookie0
Understandable have a great day.

Profile icon
Bookie0

You too! :)

@cutech

Profile icon
RehmaUwU

lmfaoooo

@FlaminHotValdez

Profile icon
CodingElf66

You are just the king of CSS, and nobody can deny that. This is incredible! One thing, though.

Screenshot 2021-10-10 1.03.34 PM

The bar at the left doesn't align very well with the rest of the website, so I suggest fixing that, but otherwise, good job!

P.S., I'm about to break your nice 6666 upvotes.

Profile icon
Bookie0

@CodingElf66
Lol thanks! Yeah for the sidebar issue; I think it's actually fine, it just looks not aligned because of the border radii of the reviews container.

Thanks tho! :D

Profile icon
hg0428

It also cuts off parts of the image as seen [email protected]

Profile icon
conspicous

@Bookie0
Theres an issue on mobile where almost nothing lines up. It is so annoying to me.

Profile icon
Bookie0

@StringentDev
Could you send a screenshot of what you mean by 'nothing lines up' please?

Profile icon
conspicous

@Bookie0
Its not a bug with your website since you are not using absolute or relative posistioning.

Profile icon
Bookie0

@StringentDev
Oh

Profile icon
conspicous

@Bookie0
I was creating a custom Video Player in HTML, CSS and JS in which the progress bar would not line up correctly.

Profile icon
Bookie0

Ok

@StringentDev

Profile icon
glitchish

@Bookie0
we need to get this thing to 100 upvotes.
cool project/repl btw.


and... to all who haven't

upvote already!

Profile icon
Bookie0

@iocoder
lol thanks! :)

Profile icon
cdCreepArghhh

@iocoder
99 upvotes as of when i sent this... so close

Profile icon
CodingElf66

@iocoder
100+ Upvotes woo hoo!

Profile icon
glitchish

@CodingElf66
finally

Profile icon
AdvikaPathak

Amazing

Profile icon
Bookie0

Thank you! :D

@AdvikaPathak

Profile icon
RahulChoubey1

so… business site with lotz of fake data… I'm in!

Profile icon
Bookie0

Lmao :)

@RahulChoubey1

Profile icon
RahulChoubey1

@Bookie0
ping ping ping

Profile icon
frostedbutton75

@Bookie0
Every time I travel to replit, all of your posts are in the β€œtrending” area of the homepage. And I always click them, because I know they are going to be amazing! Keep that legacy! I loved this one lmao...

Profile icon
Bookie0

@frostedbutton75
Lol thanks! :)

Profile icon
frostedbutton75
Profile icon
Glitterpoop

UPDOOT!

Profile icon
Bookie0

@Glitterpoop
lol

Profile icon
FlaminHotValdez

@Glitterpoop
Is your username a kotlc reference?

Profile icon
ABirdCoder

Hey
@Bookie0
!

Noice work!

Would you like to work together to make some really good website.

(idk what)

I can do back-end and I am decent at front-end...

(Its fine if you say no)
Profile icon
Bookie0

@ABirdCoder
thanks! I’m quite busy, but what are you aiming to do; what’s ur idea?

Profile icon
ABirdCoder

@Bookie0
idk... maybe a recreation of the replit signup/login page. It's kind of outdated.

Profile icon
Bookie0

@ABirdCoder
hm

Profile icon
ABirdCoder

We can come up with other ideas.

@Bookie0

Profile icon
AmoghTheCool

when i tried lightmode -

Narrator: AmoghTheCool diedπŸ’€.

Profile icon
Bookie0

@AmoghTheCool
lmao

Profile icon
TurtleAndrew

@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.

Profile icon
AmoghTheCool

@TurtleAndrew
lol

Profile icon
[deleted]

Nice hamburger Bookie, may I know what meat you used in it?

Profile icon
Bookie0

@GhostKing007
Lmao no meat just bread

Profile icon
[deleted]

@Bookie0
hmms very cool

Profile icon
itsVyle

I personally prefer the way we reskined it for lunch ;)

Profile icon
Bookie0

@itsVyle
i like purple tho ;)