So this is the design and pretty straightforward it justs wants this to centered and have some styles on it. Then we will hop into the progress tracker in a future video, probably the next video. So let's start with the label by going into our code.

Let's go over to schedule.scss because we want to style the title:

Schedule.scss

    &__title {
        border-left: 1px solid $color-subtle-gray;
    }

Then go into variables.scss and create the variable: $color-subtle-gray: rgba(255, 255, 255, 0.52), and $color-subtle-black: #333;. Cool, let's try that out. Then let's head back to our scheule.scss and put in some padding:

Then let's go to the browser and see what we got. That didn't change much, so let's add some more details:

Schedule.scss

    &__title {
        border-left: 1px solid $color-subtle-gray;
        padding-left: 30px;
        color: white;
        font-family: $font-alegreya;
        font-size: 20px;
        text-align: center;
    }

So I'm going to get out of Firefox and I'm use Chrome for this. That's better. Essentially we need this to be in the center.

So open Firefox one more time and that is our grid for schedule. Now it's all over the place because we are displaying more than we need.

So let's go back into our schedule.scss, and align and justify our items:

So you will see that your schedule label looks really nice now. Before we position it perfectly, we will style these. So let's go ahead and end the video. Let's go ahead and say: git status, git add ., and git commit -m "styled schedule header label". See you in the next video.

Resources

Source Code