So let's go ahead and let's look at the design and I'm just going to select the style of this okay. Then let's head over into our application and let's close out of quantity.scss and quantity.js, and in shopProduct.js we have our shop-product__title, description, price, quantity, and add to cart. Let's head over to shop-product.scss do we have one of those? Okay, let's create a new file in our shop directory in the style directory called shop-product.scss let's proceed to import this into our application, into main.scss, let's say import shop/shop-product.

main.scss

// SHOP
@import 'shop/shop';
@import 'shop/shop-search-bar';
@import 'shop/shop-product';

Okay, in shop-product.scss we want to say .shop-product and I'm going to paste these styles in here and let's copy them in.

shop-product.scss

.shop-product {
    height: 314px;
    width: 240px;
    background-color: white;
    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.1); 
}

Okay so we got a background color of white and we've got a width of 240 pixels and a height of 314 pixels, now we also have a box shadow of 0 2 pixels 20 pixels 0 rgba 0 0 0 0.1, okay so it's black with an alpha of point 1. So subtle gray see through grey right, then we've got a background color of white and then the height and width are really self-explanatory. Okay, let's go check it out.

All right you'll already see that this just really cleaned things up quite a bit just adding in that height and width and drop box shadow really cleaned things up. Okay so what we need to do is we need to create a grid after we style each one of these, so let's style each one of these and align them on a grid. Basically the same approach we took with the quantity component okay.

So what I'm going to do is I'm going to reference this design again and I'm going to look at this.

It looks like it's got obviously the color green, font size 16, and it's got a different font size for once encode sans condensed. So let's go ahead and let's go into our application and let's say &__title and what we're going to want to do is paste this in here.

Obviously you're not going to paste it in here, but let's chop out these we don't need them, and let's take out the line height and the text align, okay, so we're left with 4 css properties here. We've got a color of #00CB79 which is green. We got the font family of encode sans condensed, a font size of 16 pixels, and a font weight of 500.

shop-product.scss

&__title {
    color: #00CB79;
    font-family: "Encode Sans Condensed";
    font-size: 16px;
    font-weight: 500;
}

Let's check one more time in index.html and make sure we're importing that encode sans condensed at a font weight of 500. Okay, we've got encode, where is it, dang did we not get encode sans condense? We didn't. Okay, do you see how it says Open sans condensed? I don't think we're using that anywhere, okay, we're only using it in code. So let's go ahead and let's get rid of opening here in this link and let's say encode.

Okay that should work, I'm going to go ahead and click that to go here, and it looks like yeah encode is a font there. Okay so that should be good. I'm going to go to google fonts and just make sure that encode is there because there's always a chance that encode sans condense isn't there, okay it's there. So just making sure that encode sans condensed is here and look you'll see it says 300 and 700, we want to make sure 500 is there as well.

Okay, so save that and let's go back to shop-product.scss, and let's go to Chrome and let's go to our application and let's select this all and you'll see we have it in there now.

Okay so really easy, really straightforward stuff. What we want to do now is style the description okay. So here's the description

color #333, font size 13 pixels its really straight forward okay so let's say &__description font size 13 pixels color is #333333.

shop-product.scss

&__description {
    font-size: 13px;
    color: #333333;
}

So that should be good, let's go ahead and see what it looks like on the browser, and it looks pretty good.

Now what we need to do is style the add to cart, then give it a little bit of padding this whole component and then line it all up on the grid correctly. So add to cart, we've got the height of 40 pixels, width of 97. So let's go add that in, I can't remember already, I know the border radius is 20 pixels and the color is white on the text. Let's see, so we got 40 on the height 97 on the width.

Okay so look at this, it's height 40 pixels, width 97 pixels, border radius 20 pixels, and a color of white, and then obviously the background color is 00CB79, most of these styles are very very self-explanatory, I don't even know why I'm copying them over, okay and that should be good.

Let's go ahead and look at Chrome and let's look at this text for the add to cart button, this text needs a font size of 12 pixels. That's literally all we have to add in and the font weight of 600. So let's say font weight 600 and font size is 12 pixels and let's go see what this looks like in chrome.

shop-product.scss

&__add-to-cart {
    height: 40px;
    width: 97px;
    border-radius: 20px;
    color: white;
    background-color: #00CB79;
    font-weight: 600;
    font-size: 12px;
}

Alright it looks good, we've got to center the add to cart and then make it an actual button and let's give it a little animation so when we click it, it actually looks cool. Okay so lets say display is grid, justify items is center, and align items is center as well. That will center it very similar to what we did in the quantity component. Okay, you'll see that works.

Now let's add a little bit of a button to it to make it do something. Okay so I don't want to use focus I want to use and selected might be good. Let's just make it when we hover over it, it goes down a bit. Let's say transform and let's say scale and lets say 0.97 and then you'll see now that if we hover over this it goes down but it doesn't transition it's just automatic.

So what we want to say transition all .3 seconds ease, and literally just these two things with the hover selector. It makes it transitionally nicely. Okay now lets go ahead and just put in a little click on it, let's make it so when we click it goes down a bit further. So let's say and let's see what is it, I don't know. I know focus is one, but it will stay focused if we don't click on something else.

So lets google button selectors in html. Okay see that's what we're looking for, I'm going to hit try it yourself and it looks like active is the one. So let's go to our application and let's say &__active and we'll say transform scale 0.95, okay that will push it down a little bit further.

shop-product.scss

&__add-to-cart {
    height: 40px;
    width: 97px;
    border-radius: 20px;
    color: white;
    background-color: #00CB97;
    font-weight: 600;
    font-size: 12px;

    display: grid;
    justify-items: center;
    align-items: center;

    transition: all .3s ease;

    &:hover {
        transform: scale(0.97);
    }

    &:active {
        transform: scale(0.95);
    }
}

Okay let's go look at this and see what it looks like in our application. You'll see it pushes it down even further. So up to you what you want to do with that, but I think that looks nice. So let's go ahead and give it a grid and we will give it some padding and all that junk in the next video, because that's a little bit separate from what we just did in this video. So we got this all styled in the next video we will put the grid everywhere and then put all the products on its own grid, so lets commit our code.

Terminal

git status
git add .
git commit -m "styled children components in shop product"

And I'll see you in the next guide.

Resources
Source code