Stories displayed over here and if i click on any of these stories we have the story displayed over here in full screen mode and we also have the title the next and.
The previous buttons and we also have this close button over here now in the previous video we started with the css and this is how it looks right now now in this video we will add the design of.
This full screen story mode so let's get started right this is the source code and if you.
Go to the index.html file here we can see for the full screen mode we have this division with the class of story full so first of all let's target this division right here so here i'll.
Just type story full and let's set the background color to dark gray.
Let's see how it looks right now so here we can see we have this full screen mode displayed over here we have the background color displayed now this full screen should be on top of.
All the other elements so let's add a z index over here so let's type z index and let's set it to 500 and now we can see we have the story full division on top of all the other.
Divisions all right first of all let's style this close button over here so if you go back to the index.html file here you can see we have this division with the class of closed btn so let's.
Target that so here i'll just type story full close btn and let's set the position to fixed and we'll set the right position.
To 32 pixels and we set a top position of 32 pixels and let's set the width to 32 pixels and we'll set the cursor to pointer now we can see we have this close button.
Over here Wesdigital
Now we have the next and the previous errors over here so let's go back to our source code and let's go to the index.html file.And here we can see we have this division with the class of left arrow for the left arrow and then we have a division of the class of right arrow so first of all let's set a height to these.
Icons so let's go back to our css and let's type story full content left arrow comma story full.
Content right arrow and we will set a width of 60 pixels now let's style the content division inside the story full division so if you go back to the index.html file here we.
Can see inside the story for division we have this division of the class of content so here i'll just type story full content.
And let's set the height to 100 percent of the parent and we will set the display to flex so that all these elements will be one next to the other and i will also set align items to the.
Center right now let's style this image so let's type story full img and let's set the height to 90 now let's bring all of this to the.
Center so let's go back to the container division which is the story full division and let's set the display to flex align items to the center and justify content to the center.
And now we can see everything is in the center and for this left and right arrows let's also add cursor to pointer so here i'll just type cursor pointer right now let's style this title for the.
Title we have a division with the class
Of title and it is inside the content division so we'll position this title relative to the content division so for the content.Division let's set a position of relative and now let's target the title so let's type story full content title.
And let's set the position to absolute and now let's set the bottom position to 26 pixels and i set the left position to 50 and let's also add a background color.
Let's set it to white and here we can see that the title starts from the center so we have to type transform translate x.
And set it to negative 50 percent now we can see it is exactly in the center and let's set the line height to 2 and we'll also add a padding of 8 pixels top and bottom and 32 pixels left and.
Right so that's basically it with the title and with this we have completed the design of the full screen mode of the story all right so that's it for this video in the next video we will.
Start adding the javascript and we will add the functionality of all these stories so if you have any doubts you can ask in the comments below and if you like this video please click on the like.
Button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day you.