- Read Tutorial
- Watch Guide Video
So we're going to do a couple of things in there OK. So it's going to get a little bit more complex but not too bad. Let's start by just making that box, and then putting in the styles. So we have a newsletter-box__day and newsletter-box__month-year. Let's go to our styles folder and we'll create a new file named newsletter-box.scss.
newsletter-box.scss
.newsletter-box {
&__day {
}
&__month-year {
}
}
Now what we want to do is import this into main.scss.
All right now let's go into the file that we made actually apply some styles.
newsletter-box.scss
.newsletter-box {
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA
border-radius: .5rem
&__day {
}
&__month-year {
}
}
Now let's go into our app and see what this looks like.
All right now it's pretty good. Let's go ahead and throw in the styles now for our labels.
newsletter-box.scss
.newsletter-box {
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA
border-radius: .5rem;
color: $color-red-BA;
&__day {
font-size: 1.8rem;
line-height: 8.1rem;
}
&__month-year {
font-size: 1.8rem;
line-height: 2.3rem;
}
}
Ok cool. Now they're not really where they're supposed to be. Let's open up Firefox. Now that we're dealing with grids and log in and inspect the element, and select newsletter-grid. Now what we have to do is basically make a grid for box rows. We're not going to have any control over these items. We don't want to use floats and that kind of styling positioning because that's just nasty. Let's use grid.
newsletter-box.scss
.newsletter-box {
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA
border-radius: .5rem;
color: $color-red-BA;
display: grid;
justify-items: center;
align-items: center;
&__day {
font-size: 1.8rem;
line-height: 8.1rem;
}
&__month-year {
font-size: 1.8rem;
line-height: 2.3rem;
}
}
With justifying and aligning the items to center, this allows us to place the items in the center of their respective grids. This is like we had done with the titles in our tab component.
So if you look at our design in Firefox, let's make our day align to the end of their grid segment. So let's go into your code and let's say get rid of align-items: center;.
newsletter-box.scss
.newsletter-box {
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA
border-radius: .5rem;
color: $color-red-BA;
display: grid;
justify-items: center;
&__day {
align-self: end;
font-size: 1.8rem;
line-height: 8.1rem;
}
&__month-year {
align-self: start;
font-size: 1.8rem;
line-height: 2.3rem;
}
}
Cool that looks good. Now let's open it up and chromes can see it better and let's make the border a bit thicker and then let's make these bit bigger. So I'm going to go to the code and feel free to mess around with a red color because now the red we picked is a little too bright on this but it's it doesn't matter just the color.
This is a coding course, not a design course so you can feel free to mess around with that make it look as perfect as you want. I'm just going to go with the red we have in our code.
All right. So let's make them slightly bigger.
newsletter-box.scss
.newsletter-box {
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA
border-radius: .5rem;
color: $color-red-BA;
display: grid;
justify-items: center;
&__day {
align-self: end;
font-size: 7rem;
line-height: 8.1rem;
margin-bottom: 1rem;
}
&__month-year {
align-self: start;
font-size: 2rem;
line-height: 2.3rem;
}
}
All right so that looks good. I also add a little margin in there to space them out just a little more.
OK, so I'm going to leave it at that. Looks good to me. Let's go ahead and commit and end this video and then in the next video we're going to introduce another grid so we can get a little arrow point on our box.
Let's commit our code
git status git add . git commit -m "styled the newsletter box component"
See you in the next video.