Create a Statistics UI Panel Using HTML & CSS3

In this tutorial, we are going to create a Statistics Panel using HTML and CSS3. We’re going to use Google Fonts for this tutorial, specifically “Roboto.”

HTML

First, let’s create our HTML structure.

We need a wrapper or a container, we’ll name it “stats-panel.” We’ll have a header, with a title and calendar views. Plus, a body which will include: three categories new users, recurring users, page views; and a data chart, where we will include an SVG image.

CSS

Great, we’re done with the HTML part, now let’s stick to the CSS part. First of all, let’s make sure that the body has full height and we also want our panel to be centered, for this, we’re gonna use flexbox.

Let’s go forward and style the body. Here we have some user categories on the left and a data chart on the right. First, let’s give the panel body a height of 340px and make it display flex for child elements.

.panel-body {
display: flex;
height: 340px;
}

Great, on the left are three categories. We want them to be one above another, and for this we use flexbox, again. Let’s also give to each category a style.

Cool! On the right side of the body we’re going to have a chart with some data, but first let’s make a legend on the top, for users to better understand the symbols used in a chart or diagram. This will include the three mobile operating systems used in the chart.

Awesome! Let’s allow the chart to grow/scale and the lines and the stats to appear/show after that, this will happen when the user opens the page. For this we use @keyframes. So add the following lines: