Source code and before getting started with the blog section let's go ahead and fix a CSS issue so here we can see that this text is not exactly in the center so that's because we have this uh.
Nav bar at the top so we need to add some padding top to this content so if you right click over here and go to inspect here we can see we have this content so it is inside header swiper.
Swiper slide content so in this we need to add some padding top so let's take a look at the height of this uh nav bar so if you right click over here and go to inspect and if you take a look at the.
Nav element we can see that it has a height of 73 so let's go ahead and add a padding top of 73 to this content so let's go back to our CSS and uh let's go to the CSS of the header slider so here.
Down and let's start designing the blog section so the first thing we need to do is we need to create the HTML so here this is the end of the about section so I'll just create a comment over here and.
Let's type end of about section now for the block section we need to have this inside a Max width so we need to add it inside the container division so let's create a.
Division with the class of container and in that let's create a section and let's give it an ID of blog and in this section for all the content let's create a division with the class of.
Content and in this content we will have a heading so let's create an ed2 and here we need to type our latest posts I'll just copy this and I'll just paste it over here and then we need to have a.
Subheading so if you scroll up here we can see that for our services section we have the subheading so we have a paragraph with the class of sub heading and we have already added the styles for.
Posts Related:
- Flow Control Combining And Separating Bundles of Data
- New Business Card In CDR File Free Download Sheri Sk
- Excel VBA Introduction Part 58.6 - SQL for Excel Files - Text Criteria and the Like Operator
This so let's create a paragraph over - ID Card Make
Here and let's give it a class of subheading and let's go ahead and copy this text and let's paste it over here and now we need to create these three.Different blog post cards so let's create a division with the class of cards container now in this for each of the cards I'll just create a division with the class of card and in the card.
We need to have the image so let's create an IMG tag and in the source I just tap Images slash and blog 1.jpg and then for the heading let's tap S3 and let's copy this heading and let's paste.
It over here and then we need to have the excerpt so let's create a paragraph and I'll just copy this text and let's paste it over here and then we need to have this read more button so I'll just.
Create an anchor tag for that and here we can add the link of the blog post and let's go ahead and type read more now we need to have three of these block post displayed over here so I'll just copy.
This card and paste it two more times and later we will go ahead and add all this content to the JavaScript and we'll just dynamically display them over here so now let's go back to our design and.
Uh let's see how it looks so here we have the heading and the subheading and we have all these block post displayed over here now let's go ahead and style this so let's go to the sty CSS file and.
Let's scroll down and let's go ahead and create a comment and uh let's give it a comment of blog section and let's tap cards container and we need to have three.
Elements in a row so let's type display of grid grid template columns and let's type 1fr 1fr 1fr so we'll have three columns and then let's add a gap of 16 pixels between the elements and let's.
Also set the margin to 32 pixels top and
Bottom and zero pixels left and right and now let's go ahead and set the width and the height of the image so let's St C s container IMG and let's set the.Width to 100% and let's set the height to 200 pixels and let's tap object fit to cover for keeping the image from stretching so now we can see that we have these three block posts in a row.
And everything is looking all right we just need to style this read more button so let's go ahead and type cards container a and let's set the color of the text to White and let's set the.
Background color to dark gray and let's set a padding of four pixels top and bottom and 16 pixels left and right and uh let's also remove the.
Underlines so let's type text decoration and let's set it to none and that's it with the block post section right now let's go ahead and add all the content to our Javascript file and let's go.
Ahead and create a const and let's name it blog data and let's create an array and in that we will have objects so in the object we need to have the image so.
Let's type thumbnail and here we need to add the image source so I'll just Ty Images slash and we have an image called blog 1.jpg and then we need to have the title so let's tap.
Title and let's go ahead and copy this title this is the first title and then we need to have the except so let's Ty except and let's copy this and and let's paste it over.
Here and then lastly we need to have the link of the blog post so let's go ahead and type link and I'll just tap hash for now you can add the links of your posts over.
Here now in this way you need to create all the three block posts over here so I'll just quickly go ahead and copy and paste the content that I have all right so here I have added all the content of.
The blog post so we have these three different objects now we need to do the same thing that we did for the services container division so first of all let's go ahead and Target the container.
Division which is cards container so let's go ahead and type const cards container equals document. query selector and here let's type # blog cards container right now let's go ahead.
And create a function for displaying the blog so I'll just Ty displaying block posts let's create a function called display block posts now in this we need to Loop through all.
This data so we have this blog data so let's type blog data do for each now for each of the blog post I'll just call it B and let's create an arrow function over here now here first of all we need.
To create the HTML so let's tap con HTML equals and uh let's add back Tex and let's go back to the HTML file and let's copy the HTML of the card so I'll just copy it from here so everything inside.
The card Division and let's paste it over here and now we need to go ahead and replace all this data so for the source we need to add this thumbnail so let's tap dollar symbol.
Craes and let's t b dot thumbnail and then for the heading let's type dollar symbol craes B do title and then for the except let's type dollar symbol craes B do except and then.
We have the link so here instead of hash let's T dollar symbol color braces B do link right now we need to create this division with the class of card so let's TAP const.
Card equals document. create element div and let's Ty card. class list. add and let's add a class of card and then we need to add this HTML to the the card so let's have card..
Inner HTML equals HTML and lastly we need to add this card to the card's container which we referenced over here so let's St cards container do append.
Child and let's add the card over here and now we can go ahead and delete all these cards and uh let's go ahead and call this function called display block post.
Posts so I just Ty display block posts and let's go back to our design and the block posts are not B displayed so let's see what's the problem I'll just right click over here and go to.
Inspect and let's go to console and here we can see we have this error it says that uncode Dom exception and it is showing the error over here in this selector so here we.
Have this problem if you go over here we can see that we have added this Dot and this hash now since this is an ID we need to add the hash so I'll just remove the dot so now let's go back and now we.
Can see all these block post are displayed over here and everything is looking all right so with that we have completed designing the blog post section all right so that's basically it.
For this video 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 n.
