Here and if i scroll to the right we have more stories over here and if i click on any of these stories we can see that it is displayed over here in full screen.
And after some time it moves on to the next story and we can also click on the next and the previous buttons to go to the next and the previous stories and we also have the title of the story.
Displayed over here and we can click on this close button to close the stories so this is what we are designing in this tutorial series now in the previous video we wrote the html of this design.
So this is how it looks all the elements are displayed over here now in this video we will start with the css and make it look like this so let's get started.
all right this is the html now we have already linked our style.css file over here so let's go to the childhood css.
Container so let's target that let's start stories container and the first thing we will do is we will make all these.
Images one next to the other so for that let's type display of flex and now we can see all the images are one next to the other right now let's set a height and the width for these.
Images so here we can see we have this height and width for the image and we also have a round shape for the image so if you go back to the.
Index.html file here we can see inside the store is container division we have a division with the class of content and in that we have the img tag so let's target that here you stop.
Stories container content img and let's set the height and the width to 90 pixels.
And we'll also type border radius and Wesdigital
Set it to 50 so that we have round shape and now let's go back to our browser and here we can see we have this round shape for these images.Now the next thing we will do is we will fix the aspect ratio so here i'll just type object fit and set it to cover and now we can see we have the correct aspect ratio right now let's go back to.
Styling the stories container so here we can see we have this box shadow for this storage container so let's add some more styles over here so i'll just set the background color to.
White and we'll also add a box shadow and we'll set the values to 0 3 pixels 24 pixels negative 8 pixels rgba 0 0 0 and 0.3.
And we'll also set a width so let's type width and let's set it to 700 pixels and we'll also bring it to the center so i'll just have margin zero for top and bottom and auto for left and right.
Now let's add a padding so let's type padding and let's set it to 8 pixels and we'll also add border radius and let's set it to 8 pixels now let's also add some gap between.
These images so for that let's type gap and let's set it to 16 pixels and let's see how it looks and i think we can increase it a little.
Bit more so let's try 48 pixels and i think that looks alright now the next thing we will do is we will hide everything that goes outside this.
Storage container division so we don't want to display these images over here on the right so here i'll just type overflow and set it to hidden and now we can see all the other images.
Are not being displayed over here and
Now the next thing we need to do is we need to be able to scroll to the right so here i'll just type overflow x.And set it to scroll and now here we can see we are able to scroll to the right right now the next thing we will do is we'll create this outer circle.
So first of all we need to have this white circle over here and after that we need to have this red circle so for that we will use the before and the after selectors.
So here let's type stories container content column column before and let's type content and if we just type 123 over here.
We can see that one two three is displayed over here before all these images so in this way we can add additional information to our web page i don't want to have one two three.
Displayed so let's delete this and here we will just set the height and the width so let's set the height to let's try 98 pixels and the width to 98.
Pixels and for the first circle we need to have a background color of white and we'll also set the border radius to 50 so that we have a circle.
And now what we will do is we'll position this before selector relative to the content so let's type stories container content.
And here we'll start position relative and here we just have position absolute and let's set the top position to 50 percent and the left position to 50 percent now.
If you save this and go back here we can see we have this circle starting from the center now we need to bring it to the center exactly so for that you have to type transform.
Translate and set it to negative 50 for the x and the y axis and now we can see it is in the center exactly now we want the image to be on.
Top of the white circle so what we will do is we'll go over here to the img tag and here we'll just type z index and let's set it to 300 and we also need to set the position to.
Something so here we can see we have a position set to absolute so we have to add some kind of position over here so that the z index should work so just type position relative.
And now we can see we have this image and outside the image we have the white circle but we cannot see it right now so let's also create the other circle so let's go back and for that we.
Will use the after selector now it will also have almost the same styles so let's copy this and let's paste it over here and let's change the height and let's.
Change it to 106. let's change the width to 106. and let's change the background color and let's set it to linear gradient and for the first color i'll just type.
Dd to a 7b and then for the second color i'll just type f58529 now we also need to set the z index for.
Both these circles so for the white circle let's set a z index of 101 and for this one let's set a z index of.
100 and here we need to use the after selector not the before selector so let's tap after right now you can see we have both the.
Circles displayed over here now the image is displayed a little bit to the top so let's fix that now to fix this you can use a line of code in the img.
Selector called vertical align and set it to middle and now we can see everything is looking alright now i think we can add some more padding to.
This storage container so let's go back over here to the stories container and for the padding let's set it to for left and right we will set a padding of 32 pixels and for top and bottom we will.
Set a padding of 16 pixels let's see how it looks i think we can increase it a little bit more so let's try 20 pixels over here for top and bottom and for left and.
Right let's try 36 pixels and i think that looks alright so that's basically with the design of this storage container so that's it for this video in the next video i'll show.
You how to design the full screen mode over here 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.