Open In App

HTML course Building Main Content – Section 3

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.
Let’s start writing HTML for Section 3 of our Website, follow the below steps:

  1. Declare a parent div with a class named row.
  2. 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.
  3. Download the images from the given links and save them to your images folder. 
  4. 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://www.geeksforgeeks.org/careers/"
                   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=
                   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=
                   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://www.geeksforgeeks.org/careers/"
                   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.
Therefore, let’s start adding styles to the classes and complete Section 3 of Main Content: 




#section-3{
    overflow: hidden;
    padding-top: 5em;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    text-align: center;
}




/* 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;
}




.img-title{
    display: block;
    padding-bottom: 1em;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.6);
}




.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;
}

 With this Section 3 of the main content is successfully completed and will now look something as shown in the below image: 

 Supported Browser:


Article Tags :