in this guide, we're going to make it so if the countdown completes or you enter in your birthday it happens to be today. Then we can display the Happy Birthday message in this skew. So the first thing we want to do is go to our code and add some tags to this HTML here. So we first want a div to contain this and then instead of using an H1 let's use a paragraph tag and you'll also notice that it says countdown complete as well. So we want to include a paragraph tag for that. So go to Visual Studio code and enter in class name for this paragraph it's called `message-container_title' and then in here, we want to type and Countdown Complete! and let's just copy this twice and let's say instead of title let's put message and instead of Countdown Complete let's put HAPPY BIRTHDAY!. Okay and let's also give this div a class name of message-container.

   <div className="message-container">
      <p className="message-container__title">Countdown Complete</p>
      <p className="message-container__message">HAPPY BIRTHDAY!</p>
   </div>

Save that and let's go back into our styles here and let's go ahead and style this message-container so .message-container,.message-container_title, and .message-container_message. Okay let's see if this has changed anything with our new tags and nothing and let's add the styles so when we built the clock we had a height and width of 20% and 71.2% percent and the reason we did that is so it would fit in the skew.

Let's copy that and put it into a message container and while we're at it we might as well make a mixin for this

    @mixin clock-dimensions {
      height: 20%;
      width: 71.2%;
    } 

and you might wonder well the next thing I was going to add in here was the absolute positioning with top and left of 50% so we can get it in the same position so basically the same values and you might wonder why we don't make a mixin with these values. And that's because we're going to be making a second mixin that we can use elsewhere and we will be building that right after I implement this mixin. So let's create this mixin and let's call it clock-dimensions and then in here let's put our height and width and that should be good. So @include clock-dimensions and let's copy this and throw it up in here as well

and just to keep it clean let's put this to the top and let's put this in its own file so I'm going to create a new file in style called mixins.scss and make sure you give it the .scss prefix so mixins.scsswe paste that in there

and then back in main, I'm going to import the mix-ins right below the base.

  @import './mixins';

Okay so that should give us our mixin and that should give us our clock-dimensions for the message-container. Okay, let's just put a comment here so we can see that we're on these tags right now and not these upper ones. So now let's save that and see where it is. All right so it's right there.

Now you might notice you might not see it but this is over too far. Let's translate it about 50% left. So transform: translate(-50%);. So that is over 50%. Let's go ahead and put it down a little bit so margin-top: 20px; and we'll give it a flexbox implementation kind of like we did in the last guide. So display: flex;, align-items: center;, flex-direction: column; then justify-content: space-around;. The reason I didn't explain these is that I did in the last guide here. So we have that set up save that and that should have a similar effect here. All right so that renders a couple of the styles we did earlier useless but we are going to be removing flexbox in a bit and implementing it differently. So font-family for the title and we don't want it to be our default font so let's do --roboto-condensed and we are accessing this from our base.scss where we have our group variables. So we have that and now let's add a color of yellow because we want the countdown complete to be yellow and a font-size: 22px; so that should be it for the top paragraph tag. Awesome that's looking pretty nice it is looking pretty similar. All right and that font didn't entirely go in roboto all right.

.message-container__title {
   font-family: var(--roboto-condensed);
   color: var(--yellow-secondary);
   font-size: 22px;
}

Sweet now for the message-container_message let's go ahead and enter in pretty similar styles except for let's get rid of the font size or let's change it at least to 90px. Let's change the font-weight: bold;. I'll show you what it looks like just what the font weight. All right sweet. So that's that and if we put in a font-weight: bold; and you can see it kind of get a little thicker all right that's basically what we're looking for. Yeah except for let's make this not white or not yellow. Just get rid of the color the root color is white so that should work. And yeah that's how we set up this message but we don't want it centric like that we want to kind of looking like that and maybe we can do this is by first getting rid of our Flexbox. And the only reason I did flexbox is just so you could get a better idea of how these values work. Because you can kind of see that it's working as a column here instead of a row like our countdown is instead of a row it's a column for our message. So go back select the 25th again or whatever date it is that you're watching this and let's get rid of that

and hit save and it won't be looking nice but we'll be able to change that. All right so it's a little too far to the left and let's change that in the title with a position: absolute; so we can put it anywhere let's give it a left: 10%; and the bottom: 5%; and let's actually change this to top we don't want it on the bottom. We want the message to be on the bottom. OK so that's where we want it to be. Now let's just position the happy birthday message to be where we want it as well.

  .message-container__title {
    font-family: var(--roboto-condensed);
    color: var(--yellow-secondary);
    font-size: 22px;
    position: absolute;
    left: 10%;
    top: 5%;
   }

Okay so to get this in the same position just copy this put it right here save that and it should be in the same position but we want it to be a little bit further down. So the way we can do that is by switching this to bottom and that should be working let's also change this to width: 100%; just in case.

.message-container__message {
    font-family: var(--roboto-condensed);
    font-size: 90px;
    font-weight: bold;
    position: absolute;
    left: 10%;
    bottom: 5%;
    width: 100%;
    }

Okay, awesome so that's working. And in this course, we're not going to make this mobile responsive this particular site. We will in other apps and there probably will be future guides that I'll add to this that we will make it mobile responsive in. But for now, we're not going to get around to the mobile responsive design for this website. Okay, so that's how you style in this Happy birthday message and in the next guide we're going to get back to our countdown and we're going to style this to look like what you see here. All right I'll see you in the next guide. But real quick what's come in our code so in our terminal

git status
git add .
git commit -m "added happy birthday message styles"

All right I will see you in the next guide.

Resources

Source Code