JavaScript and this is also responsive so if you decrease the width of the browser window this is how it will look on on smaller screens so let's get.
[Applause] [Music] started all right here I have created this folder called split section and I just opened it with vs code and I also.
Have this folder called images where we have this image so let's start by creating the necessary files so let's create a new file called.
Index.html let's create another file called file. CSS and let's create one more file called main.js and let's start with the index.html file now in vs code you can.
Section right now the first thing we will do is we'll create a container Division and let's give it a class of split section and in this we need to have two.
Sections we need to have the left section and the right section so let's create a division with the class of left and let's create one more division with the class of.
Right now in the left division we need to have an image and let's set the source to images SL main.jpg which is inside this images folder and that's it for the left section now in the right.
Section the first thing we need to have is a heading so let's create an edge2 and let's tap steps to complete and uh then after that we need to have these different steps so for these steps.
Let's create a division with the class of steps container now for each of the steps let's create a division with the class of step and in this we need to have the.
Posts Related:
- How to Design Cover Page in MS Word for Business Case Report DIY Tutorial Office
- Learn How To Create This Yearly Activity Scheduler In Excel FREE Download Inside
- ID Card Design In MS Word Create Employees Identity Card in Microsoft Word Word
Icon and these headings and this
Paragraph So for the icon let's create a division with the class of Icon and in that we will have an SVG for the icon so let's go to Hero icon .c for the SVG and.Let's get some icons from here so I just copy this SVG from here and let's paste it inside the icon division right after this division let's create another division with the class.
Of content and in that we will have this heading and this paragraph So for the heading let's create a division with the class of Step heading and let's add the heading over here so I'll just Ty.
Heading number one and uh then let's create a paragraph and uh here let's add some text I'll just copy this and I'll just paste it over.
Here and now let's go ahead and copy this div from here with a class of step and let's duplicate it and paste it three more times and for the second one let's go.
Ahead and change the heading to heading number two and here let's tab step number two and here let let's typ heading number three and here let's Ty step.
Number three and here let's Ty heading number four and Here Also let's typ four and this should be at the top so this is heading number one so I'll just.
Copy this I just cut it and paste it at the beginning now let's open this in our browser and let's see how it looks so I have this extension called live server.
Installed in vs code so once you have this installed you can just right click over here and uh click on open with live server and here we can see we have all the content displayed over here we have.
Step number one two and so on we have
All the images and icons also being displayed let's go ahead and change the icons a little bit so for the second one let's change the icon to let's try this.One right here and let's go to the second one and here let's delete this SVG and let's add the new icon let's get one more icon from here.
And uh let's paste it over here and let's add one more icon so I'll just copy this one right here and let's paste it for the third one so now we can see we have all these.
Different icons right now let's go ahead and start styling this so let's go to the style CSS file and the first thing we will do is.
Uh we will Target all the elements and let's tap box sizing to border box so that we have the correct width and height for all the elements and then for the body let's go ahead and remove the.
Margin and uh let's also set the background color to light gray now let's go ahead and Target the split section Division and we need to have the left division on the left side and the right.
Division on the right side so let's type split section and let's set the display to flex and align items to the center and let's add a gap of 40 pixels between the.
Elements and now we can see that the image is on the left side and all this content on the right side let's also set the font family to Roboto and sanserif and let's.
Add a padding of 32 pixels and let's set the color of all the text to 023 047 right now let's target the left division and uh for that we have this.
Division of the class of left so let's tap split section left and uh let's set the height to 600 pixels and let's set the height of the image inside the left section so let's.
St split section left IMG and let's set the height to 100 % of the parent and let's set the width to 100% as well and let's tap object fit to cover.
So that it has the correct proportions right now let's set the width of the left and the right sections to the same so for that we can just type Flex of one for left and right so let's have split.
Section right and let's type Flex one now we can see both of them have the same width right now let's style all the icons inside the step so so here we can see we have this division with the class.
Of Icon so let's tap step icon and let's set the width of all the icons to 60 pixels and let's set the color of all the icons to 006d.
77 and this is how it looks right now let's style this heading so for the heading we have an ed2 so let's tap split section H2 and let's set the font size to to 40.
Pixels let's set the font weight to normal let's set the margin top to 8 pixels and let's set the color to 006 d77 and let's add a border bottom of 1 pixel Solid rgba 2 48 71 and.
0.2 for the opacity and let's add a padding bottom of 20 pixels and this is how this heading looks right now let's style these steps now for the step we need to have the.
Icon on the left side and the content on the right side so let's target the step and let's set the display to flex and let's add a gap of 16 pixels between the elements and let's set a.
Padding of 16 pixels top and bottom and 24 pixels left and right and let's the width to 100% and let's add a border radius of 10 pixels for rounded corners and now let's.
Go ahead and style The Heading of the steps so let's tap step step heading and let's set the font size to 26 pixels and let's set the font weight to bold right now let's go ahead and change.
The margin of this paragraph So we have this paragraph inside the step inside inside the content so let's tap step p and let's set the margin to 8 pixels top and bottom zero for left and.
Right right now let's add a little bit of gap between these different steps so let's target the container which has a class of steps container so let's tap steps.
Container and let's set the display to flex and let's set the flex direction to column and let's add a gap of 24 pixels now the next thing we need to do is we need to have an active class so we need.
To move the active class through different sections so let's create some styles for the active section so let's type step do active so when we have the active class we need to add a box Shadow.
And let's set the values to zero 4 pixels 40 pixels 8 pixels rgba 0 0 0 and 0.3 three and now if you go back to the HTML file and if we add a class of active for one of these steps we can see.
We have this box Shadow right let's go ahead and remove the active class from here we will add it using JavaScript right now let's make this responsive so this is how it looks right now so let's.
Go ahead and add a media query over here and let's set the max width to 900 pixels so whenever the width of the screen is less than 900 pixels all these tiles will be added to our design so the.
First thing we need to do is we need to bring this image at the top and all this content to the bottom so let's target the split section and let's set the flex direction to.
Column right now for the left section let's go ahead and set the width to 100% so let's tap split section left and let's set the width to 100% and let's set the height to 400.
