started right here we are in the source code so let's go to the index.html file and here this is where the header ends.
So I'll just create a comment just tap end of the header and here let's create a division for the services section now what we're going to do is we're going to add the.
Services section inside the container division because uh if you go to the sty or css file here we can see that for the container we have set a Max width so let's go ahead and create a.
Division with the class of container and in that we will have a section and let's also give it an ID of services now in the services section we will have all the content so I'll just.
Paragraph So This is the subheading so I'll just copy this and uh let's create a P tag and let's also give it a class of subheading and let's paste the content.
Over here and the next thing we need to do is we need to create a division for all these services so let's create a division with the class of services container and in that we will have all.
The services now for each of the service I'll just create a division with the class of service and in this division we will have a division with the class of icon for this icon so let's create an.
Icon and in this we need to have the image of the icon so let's create an IMG tag and in the SRC we need to add the image so here in the images we can see that we have all these images so we need.
To add one of these icons so I'll just add this ABD icon over here so I'll just tap images SL appdev icon and after this we will have another division for this content so let's create a division with.
Posts Related:
- Amazing Excel dashboard for producers companies
- Insert youtube videos in PowerPoint - Ways of inserting video in PowerPoint
- How to Create an Employee ID Card Template Using Microsoft Word Word
The class of service - ID Card Make
Content and in that way we'll have an S3 for this heading so I just copy this and I'll just paste it over here and then let's create create a paragraph and in.This we will add this text so let's copy and paste it over here and we need to do this for all the services so I'll just copy this and paste it three more times for.
Now and uh let's go ahead and style this and then we will go ahead and add all this content to the JavaScript so let's go back to our website and this is how it looks we have all the services.
Displayed over here so let's go ahead and style this so let's go to the the style CSS file and the first thing we will do is we will add some common Styles so here we can see we have this.
Heading and this subheading and if you scroll down here also we have this heading and here also we have this heading and subheading so we have these repeated elements so let's add some.
Common styles for that so here just after the button I'll just type H2 because these headings are H2 so here we can see we have this H2 and let's set the font size to 40 pixels and we need.
To change the font as well so let's set the font family to popins and sensitive and let's go ahead and add a margin of 16 pixels top and bottom and.
Zero for left and right and let's set the text align to Center and now let's go ahead and style this subheading so let's tab dot subheading.
And for the subheading we will have a Max width of 700 pixels and we'll also bring it to the center so I just St margin zero Auto and we'll also text align it so let's St.
Text align Center and for all the
Paragraph We will have a line height so let's t p and let's set the line height to 1.6 I think we can increase it a little.Bit more so let's try two and that looks all right right now let's go ahead and style all the S3 so let's tap S3 and for the S3 we will have a line height of.
1.6 and now let's go ahead and style the sections so for all the sections we will have some padding at the top and bottom so let's go ahead and type section and uh let's set the padding to.
80 pixels top and bottom and uh 30 piels left and right so here we have this padding right now let's go ahead and style this Services section so let's scroll.
Down and uh let's create a comment I'll just type Services section and first of all let's target the container division which is Services container so let's type do Services.
Container now what we need to do is we need to display two of these services in a row so I'll just set the display to grid and I'll just set the grid template columns to 1fr 1fr so now we can say we.
Have these two elements in a row and let's also add a margin top and let's set it to 50 pixels and let's add a gap of 60 pixels between the elements inside the grid right now let's go ahead and.
Style this icon so here we can see inside the icon division we have this image so let's T services container icon IMG and let's set the height of the.
Image to 40 pixels right now we want this image to be on the left side and this content on the right side so we have this division with the class of service and that we have the icon and.
The content so let's set the display of the service to flex so I just type Services container service display of flex and let's add a gap of 30.
Pixels and let's also bring it to the center by typing align items to the center right now let's go ahead and style this icon so we have the icon inside this icon division so let's go.
Ahead and type Services container icon and uh let's set the border to 1 pixel solid light gray and let's set the width to 100 pixels and the height to 100 pixels.
And let's also bring this to the center so let's type display Flex align items to the center and justify content to the center and now we can see that this element has shrunk because of this.
Content so here we need to type Flex shrink and here we need to type zero now we can see we have the correct width and height and let's also add rounded Corners so I'll just type.
Border radius and let's set it to 8 pixels and now when we hor over this we will have a change in the background color so let's tab Services container icon colon.
Hover and let's set the background color to the variable that we created called yellow color and here we will add a smooth transition so I'll just have transition all 300 milliseconds is and.
Now we can see we have this hover effect right now let's style this heading so we have this s S3 inside the service content so let's type Services container service.
S3 and let's set the margin to four pixels top and bottom and zero for left and right and now let's style this paragraph So let's T services container service p and let's the margin top to 16.
Pixels and let's remove the margin bottom let's set the opacity to 0.8 and that's basically it with the styling of the services section now let's go ahead and add all this content.
To the JavaScript and display all of them dynamically so let's go ahead and create a const called Services data and let's create an array and that we will have objects and the objects we.
Will have all the details that we need so we need to have the icon link we need to have The Heading and then we need to have this content so let's tap icon and here we can add the link of the icon so.
Let's St images forward slash and the first icon is for mobile app development so let's go ahead and type appdev icon.svg and in the same way you need to have the.
Title and uh let's copy this title from here and let's paste it over here I going need to do the same for this text so I'll just call it content so let's have content and let's.
Add the content over here and I think we need to increase the size of this image a little bit so let's do that let's go back to the Styer CSS file and here for the image I'll just.
Change the height to let's try 60 pixels or let's try 50 pixels and I think that looks all right right let's go back to the JavaScript and uh we need to add all the content over here in this manner so.
I'll just go ahead and copy and paste the content that I have over here all right so here I have added all the content so we have these four Services displayed over here now let's go ahead.
And display all the services in our website so for that let's create a function and it will be for displaying the services and let's call the function display.
Services now we need to Loop through all these services data so let's type Services data do for each now I will call each of the services s and uh let's create an error.
Function now here the first thing we will do is we'll create a const for the HTML and here let's add backx and let's go back to the HTML file and let's copy the HTML from here so let's copy.
