Restructure the homepage code

[YoshithaRathnayake]

Purpose

The purpose of this PR is to fix #358

Goals

Restructuring the homepage code

Approach

I restructured the homepage code

Screenshots

No screenshots

Preview Link

https://yoshitharathnayake.github.io/sack-site/

Checklist

• This PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.
• I have read and understood the development best practices guidelines
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

Related PRs

Test environment

Learning

[Piumal1999]

@YoshithaRathnayake The aim of the mentioned issue is to create a better code structure. You can refer the material kit starter template for that.
Or you can use a template like this:

<!-- Header -->
...
<!-- end of Header -->

<div class="main>
    <div class="section">
        // content of section 1
    </div>

    <div class="section">
        // content of section 2
    </div>

    ...other sections...

    <div class="section contact-section">
        // content of contact section
    </div>
</div>

And there are some custom styles that we could directly add using bootstrap classes without using custom CSS.
Example:
Currently we have a custom padding (padding-bottom: 40px, padding-top: 40px) for the contact-section. Without using that custom css, we could directly use py-5 CSS class to add that padding.

[YoshithaRathnayake]

I think that one is making from this pr #388 @Piumal1999

[YoshithaRathnayake]

Now @Piumal1999

[YoshithaRathnayake]

Is that the way wanted

[anjula-sack]

The end of line is missing

[YoshithaRathnayake]

Now @anjula-sack

[anjula-sack]

Thank you! @YoshithaRathnayake