Adding images to the card makes it more descriptive and engaging. In this section, we’ll create a four-column layout where each column has an image, a title, and a description.
In the previous article, we have seen the 3-Column layout and completed Section 2 of the main content. The main content of the website is now almost complete. We just need to build Section 3 of the main content. Section 3 is shown in the below image
If you look at the above image carefully then it can be seen that Section 3 is almost the same as that of Section 2 of the Website. The only difference is that it has 4 columns instead of 3 and every column has an image at the top before the title.
Steps To Create Section 3 of Main Content
Step 1: Let’s start writing HTML for Section 3 of our Website
Declare a parent div with a class named row.
Declare four div’s inside the parent row div to contain four columns and assign them id’s as column21, column22, column23, and column24 respectively.
Download the images from the given links and save them to your images folder.
Use <img> tag to insert image for the respective column.
Declare a div with class = “img-title”. For the title of the column.
Declare a paragraph p element for the description of the content.
Declare an anchor tag <a> to add an external link which will be styled as a button. We will use the same button we created in the last article. So, assign the class "button" to the anchor tag.
Below is the complete HTML code for Section 3 of the Main Content
On running the index.html file in the browser now, you will be able to see the content of Section 3 in a distorted order as that of Section 2 before adding CSS.
Step 2: Let's start adding styles to the classes and complete Section 3
Adding basic styles for layout: Firstly, set the overflow to hidden and add all the required margins and paddings. Next is to give the thin 1 px border at the top of the section to separate it from the previous section and align all the text inside it to the center.
Aligning Columns In-line: The next step is to align all the columns in a single line one after the other. To do this, add the below CSS code to your style.css file
Styling the Title of columns: The next good thing to do is to style the title of the columns present just below the images. To give them appropriate font-sizes, padding color etc. apart from the default values. Add the below CSS code to your style.css file:
Styling the images: We have added two classes for our images in the column, namely image and image-full.
The Complete CSS code for Section 3 of the Main Content of the website is given below
Output: With this Section 3 of the main content is successfully completed and will now look something as shown in the below image:
