[00:00:00] Hi welcome back to the right course in this gang. We are going to be adding some styles so we can see this hover effect and be background for our course. We're also going to make it so that this is displayed any Wykes route rather than in the column format that we currently have they see right now. So the first thing we did use Shekar S R S S S tags that we have back in our code. So let's go ahead and go to our schedule or art course library and to our intercourse function. All right. So we have of course we have of course info and then Blore course and we have our description. Okay so let's go ahead and add for our course info. We want this to display in a rough format rather than column format. So let's go ahead and make it so. And then before that we also want to get to her fact which is going to be applied to the entire thing. So the two tasks we need to worry about of course and course involved of course in fodo and the items correctly and coerce to get that hover effect says Goodbar as yes US Code and let's first make a component in here called in our styles called cores library does yes as mentioned here was put in or our coach of course and we need to hover over that to get that effect and was just given a background color white because that's the very first thing we kind of know this happens when you have a red and then let's give let's let's check the browser. [00:01:51][111.1]
[00:01:52] So reload and it's not working because we need to import of course library. So good to me. But as he says and let's import course libraries so I import components slosh course library OK save that go to the browser and you'll notice it appears when we have it you can't see it because the background here is white as well. So the way we can fix this is by giving a box shadow. So let's go ahead and go to our course library. Yes us and give us a box Shot 0 0 0 2 pixels 10 pixels zero color of walk with a little bit of a opacity. Okay and then let's go check that out. You'll notice that we can perfectly see this now and it's really nice it looks almost identical to this it looks identical to the US. So let's go and make it so it transitions like you seeing here when you have red. And that's really easy all we have to do is type and transition all point three seconds and is saved that go back to load and you'll notice it's transitioning. So if you want to see that more pronounced just give it all you want one second reading of the page and you can see that it's transitioning in. So we're going to change my two point four. See what that looks like. All right so I like that. Oh it's pretty nice. Let's go ahead and add in the styles to make this appear like a column like you see here. So the arrow button in the title and the way we can see that is super simple. [00:03:45][112.9]
[00:03:46] We just have to introduce some flex code here so display on a course in Fall River of course info. Is it just contains our title container or arrow and or two buttons added remove. So now all we have to do is go to our SPSS and we've made it flex and you know the default value of a line items or the default flex direction is rows so it's automatically going to be in a row that's going to space the Saudis and justify content to justify content space around. Let's try that. I think what I use here is a space between because I don't want space on here except for the padding on ended earlier. Yes let's change this to space between so it only adds in space between the items rather than around them. Awesome so that's really nice and simple. Let's go ahead and align the items to center. The reason I'm going this is because you may not know is there but these items aren't aligned in the center. So does that mean we should be get there now. We this is already taking up 100 percent of the width. But I want to give this a 100 percent with because because of the description here because we might like Siling and make this take up 100 percent in the new Flex wrapping that way this would all be in a flux container except in the bottom part it would be in its own deal. So let's leave it like that. And that should be it for these styles for this video in the next video. Let's go ahead and implement the action so we can tell each course if it's opened or closed or not. [00:05:45][119.3]
[00:05:46] That way we can animate this open or closed. And then after that we'll get into the reducer for that. And then finally the animations. So we're going to be strictly dealing with the aero functionality in the next few days next few guides. So I will see you then. Oh and real quick what's going on Khotso get status. Good comment Id card styles good Polish origin master. Ok I will see you in the next guy. [00:06:22][35.6]
[378.9]