Contact section and Conclusion

In the contact section, we will have a text area and a contact form. We want them to be side by side so we will use a grid to position them.

    <!--fifth section-->
    <section id="contact" class="pad2 mar2">
        <div class="container grid">
            <div>
                <h2 class="font2">Contact Us</h2>
                <p class="font mar1"><i class="fas fa-building fa-1x"></i> SCO 9,10, Sector 14, Gurugram - 122001</p>
                <p class="font mar1"><i class="fas fa-envelope fa-1x"></i> [email protected]</p>
                <p class="font mar1"><i class="fas fa-phone-alt fa-1x"></i> +91 8130110115</p>
            </div>

            <div class="card bg-light">
                <h3 class="mar2">Fill the form below:</h3>
                <form class="">
                        <label>Name</label>
                        <input type="text" value="" name="name" placeholder="Enter your name here" />
                        <label>Email</label>
                        <input type="text" value="" name="email" placeholder="Enter your email here" />
                        <label>Mobile</label>
                        <input type="text" value="" name="mobile" placeholder="Enter your mobile no. here" />
                        <label for="country">Country</label>
                        <select id="country" name="country">
                            <option value="IN">India</option>
                            <option value="CA">Canada</option>
                            <option value="USA">USA</option>
                        </select>
                        <label>Message</label>
                        <textarea name="message">Write your query here.</textarea>
                        <input type="submit" value="Submit" />
                </form>
            </div>
        </div>
    </section>
    <!--end of fifth section-->

After adding the html, the form needs to be styled so we will apply the styling.

/* contact */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type=submit]:hover {
    background-color: #45a049;
  }

Building the footer

In the footer section, we will add the footer element. Our footer will use a dark colour background, so we will add the styling, we are also going to use some icons which will increase its size by 2.

So add the code in your html. 

    <!--Creating footer-->
    <footer class="footer bg-dark pad5">
        <div class="container grid grid-3">
            <div>
                <h1><i class="fas fa-graduation-cap"></i>Network Bulls</h1>
                <p>Copyright &copy; 2022</p>
            </div>
            <nav>
                <ul>
                    <li><a class="footerlink" href="#home">Home</a></li>
                    <li><a class="footerlink" href="#about">About</a></li>
                    <li><a class="footerlink" href="#courses">Courses</a></li>
                    <li><a class="footerlink" href="#gallery">Gallery</a></li>
                    <li><a class="footerlink" href="#contact">Contact</a></li>
                </ul>
            </nav>
            <div class="social">
                <a href="#"><i class="far fa-envelope fa-2x"></i></a>
                <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
            </div>
        </div>
    </footer>

When we add the styling, all the other contents on the web page will appear too.

.bg-dark {
    background-color: #4a5f6b;
    color: #fff;
}

.footer .social a {
    margin: 0 10px;
}

.fa-envelope:hover {
    color: #000000;
}

.fa-facebook:hover {
    color: #1773EA;
}

.fa-instagram:hover {
    color: #B32E87;
}

.fa-twitter:hover {
    color: #1C9CEA;
}

.footerlink:hover {
      color: #5cb85c;
}

With that, our footer and the rest of the page is done and in good shape.

Conclusion:

Now, you have learned how to build a web page using only html and CSS. You have also learned how to use flex, grids, paddings, margins etc. 

You can go further by changing the image to various images just to experiment.  I hope you have fun with this, Thank you!