HTML course | Building Main Content – Section 3

Course Navigation

In the previous article we have seen the 3-Column layout and completed the Section 2 of the main content. The main content of the website is now almost complete. We just need to build the Section 3 of the main content. The Section 3 is shown in the below image:

If you look at the above image carefully then it can be seen that the Section 3 is almost the same as that of the 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 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 the Section 3 of the Main Content:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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="https://www.geeksforgeeks.org/careers/" 
                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://www.geeksforgeeks.org/careers/" 
                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>

chevron_right


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 the Section 3 of Main Content:

  • 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 1px border at the top of the section to separate it from the previous section and align all of the text inside it to center.

    Add below CSS code to your style.css file:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Aligning Columns In-line: The next step is to align all of the columns in single line one after the other. To do this, add the below CSS code to your style.css file:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    /* 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
    {
        float: left;
        margin-right: 24px;
    }
      
    /* Float last columnto right */    
    #column24
    {
        float: right;
    }

    chevron_right

    
    

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Styling the images: We have added two classes for our images in the column, namely image and image-full.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

The Complete CSS code for Section 3 of the Main Content of the website is given below:

filter_none

edit
close

play_arrow

link
brightness_4
code

/*****************************************/
/*     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
{
    float: left;
    margin-right: 24px;
}
      
#column24
{
    float: right;
}

chevron_right


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



My Personal Notes arrow_drop_up

Senior Technical Content Engineer | GeeksforGeeks

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.