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.
Course Navigation
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.
- For Each Column
- 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
<!DOCTYPE html>
<html>
<body>
<!-- Section 3 of Main content -->
<section class="container" id="section-3">
<div id="row">
<!-- Column 1 -->
<div id="column21">
<img src="images/writer.jpg"
class="image image-full">
<div class="img-title">
<h3>Technical Content Writer</h3>
</div>
<p>
The work requires understanding of Computer
Science concepts. Candidates who are active
on Practice Portal will be preferred.
</p>
<a href="https://accounts.zoho.in/signin?servicename=ZohoRecruit&hide_signup=false&serviceurl=%2Frecruit%2FIAMSecurityError.do%3Fisload%3Dtrue&hide_secure=true"
target="_blank"
class="button">
Apply Here
</a>
</div>
<!-- Column 2 -->
<div id="column22">
<img src="images/developer.jpg"
class="image image-full">
<div class="img-title">
<h3>Software Developer</h3>
</div>
<p>
Good knowledge of PHP, JavaScript, Amazon AWS
and Web Development in general. Candidates who
are active on Practice Portal will be
preferred.
</p>
<a href="https://accounts.zoho.in/signin?servicename=ZohoRecruit&hide_signup=false&serviceurl=%2Frecruit%2FIAMSecurityError.do%3Fisload%3Dtrue&hide_secure=true"
target="_blank"
class="button">
Apply Here
</a>
</div>
<!-- Column 3 -->
<div id="column23">
<img src="images/support.jpg"
class="image image-full">
<div class="img-title">
<h3>Teaching Assistant</h3>
</div>
<p>
It involves taking the doubt sessions,
coordinating with mentors and requires
in-depth knowledge of Data Structures
and Algorithms.
</p>
<a href="https://accounts.zoho.in/signin?servicename=ZohoRecruit&hide_signup=false&serviceurl=%2Frecruit%2FIAMSecurityError.do%3Fisload%3Dtrue&hide_secure=true"
target="_blank"
class="button">
Apply Here
</a>
</div>
<!-- Column 4 -->
<div id="column24">
<img src="images/teacher.jpg"
class="image image-full">
<div class="img-title">
<h3>Mentor / Tutor</h3>
</div>
<p>
Job involves teaching, problem solving
in classes as well as doubt sessions and
thus requires in-depth knowledge of Data
Structures and Algorithms.
</p>
<a href="https://accounts.zoho.in/signin?servicename=ZohoRecruit&hide_signup=false&serviceurl=%2Frecruit%2FIAMSecurityError.do%3Fisload%3Dtrue&hide_secure=true"
target="_blank"
class="button">
Apply Here
</a>
</div>
</div>
</section>
</body>
</html>
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.
/*Add below CSS code to your style.css file*/
#section-3{
overflow: hidden;
padding-top: 5em;
border-top: 1px solid rgba(0, 0, 0, 0.2);
text-align: 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
/*Add below CSS code to your style.css file*/
/* Add fixed width for each column and
align text to center */
#column21,
#column22,
#column23,
#column24
{
width: 282px;
text-align: center;
}
/* Float first 3 columns to left */
#column21,
#column22,
#column23,
#column24 {
width: 282px;
text-align: center;
}
#column21,
#column22,
#column23,
#column24 {
float: left;
margin: auto 25px;
}
- 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:
/*Add below CSS code to your style.css file*/
.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}
- Styling the images: We have added two classes for our images in the column, namely image and image-full.
/*Add below CSS code to your style.css file*/
.image
{
display: inline-block;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 3em 0;
}
.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}
The Complete CSS code for Section 3 of the Main Content of the website is given below
/*****************************************/
/* Styling Main Content Section 3 */
/*****************************************/
#section-3{
overflow: hidden;
padding-top: 5em;
border-top: 1px solid rgba(0, 0, 0, 0.2);
text-align: center;
}
.image
{
display: inline-block;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 5px;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 3em 0;
}
.img-title{
display: block;
padding-bottom: 1em;
font-size: 1em;
color: rgba(0, 0, 0, 0.6);
}
/* Add fixed width for each column and
align text to center */
#column21,
#column22,
#column23,
#column24
{
width: 282px;
text-align: center;
}
#column21,
#column22,
#column23,
#column24 {
width: 282px;
text-align: center;
}
#column21,
#column22,
#column23,
#column24 {
float: left;
margin: auto 25px;
}
Output: With this Section 3 of the main content is successfully completed and will now look something as shown in the below image:
