Skip to main content

Footer

The footer component is a section of a web page that is placed at the bottom and is separate from the main content area. It serves as a container for information that is relevant to the entire page. In the footer component of Resume Screener, we have included navigation links,team,contact, copyright, email and social media links.

The code for this section is represented by the HTML language which creates a navigation menu.

index.astro
    {/*Nav as */}
      <div class="flex items-center gap-2 rounded-full border-2 border-white border-opacity-25" style= "background-image: linear-gradient(218.92deg, rgba(255, 255, 255, 0.25) 30.2%, rgba(255, 255, 255, 0) 105.59%);
      backdrop-filter: blur(4px);">
        <img src="/Footer/logo.png" alt="" class="h-[48px] p-1" />
        <h2 class="text-white font-{400} text-base pr-2.5 pl-1">Resume screener</h2>
      </div>

Here's a breakdown explanation of the navigation component:

  1. We used div element in the code for styling , layout & alignment of the navigation links.

  2. We can change the image of tcet logo and the text beside logo inn the button as shown in the image below.

index.astro
  {/*Nav as */}
    <div class="flex flex-col sm:flex-row  h-full gap-3 text-[#D0D5DD]  items-center">
      <a class="hover:underline font-thin  text-sm  " href="https://opensource.tcetmumbai.in/docs/category/projects" target="_blank">Docs</a>
      <a class="hover:underline font-thin  text-sm  " href="https://opensource.tcetmumbai.in/blog" target="_blank">Blogs</a>
      <a class="hover:underline font-thin  text-sm  " href="/LiveProjects">Live Projects</a>
      <a class="hover:underline font-thin  text-sm  " href="/CookingProjects">Cooking Projects</a>
      <a class="hover:underline font-thin  text-sm  " href="/CookingProjects">Team</a>
      <a class="hover:underline font-thin  text-sm  " href="mailto:opensource@tcetmumbai.in">Contact</a>
    </div>

  1. In the incoming code , we used <a> anchor elements which represent the navigation links.You can observe that each link is wrapped inside an <a> element where a hover effect is applied to them.

  2. Here, the href attribute specifies the destination URL for each link.

  3. The overall section of the code generates a navigation menu with several links which is used to navigate different pages of the website.

Social media & Copyrights Component​

The code for this section is represented by the HTML language which displays copyright details and social media handles.

Here's the implemented code for copyright and email:

index.astro
  {/* CopyRight and Email */}
       <div class=" w-full  flex flex-col-reverse sm:flex-row   sm:justify-between items-center sm:gap-0 gap-4">
   <div class="  text-xs  text-[#D0D5DD] ">Copyright 2022-2023 @ TCET Opensource.</div>
   <a class="  text-xs  text-[#D0D5DD]" href="mailto:linux@tcetmumbai.in">opensource@tcetmumbai.in</a>

  1. Here we mentioned the div elements with multiple CSS classes. Majorly for styling purposes and to set the font for the content inside it.

  2. The below section of the code is to display the copyright content.

  1. Next we added the clickable link to TCET email (tcet.tnp@thakureducation.org).

index.astro
  {/* Social Media */}
    <div class="flex text-[#D0D5DD] gap-8">
      <a href="https://www.linkedin.com/company/tcet-opensource/" target="_blank"><img src="/Footer/linkdin.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://www.youtube.com/@TCETMumbaiOfficial" target="_blank"> <img src="/Footer/Youtube.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://twitter.com/tcetopensource" target="_blank"> <img src="/Footer/Twitter.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://www.instagram.com/tcetopensource/" target="_blank"><img src="/Footer/Instagram.png" alt="" class="h-5 cursor-pointer" /></a>
      <a href="https://github.com/tcet-opensource/" target="_blank"><img src="/Footer/Github.png" alt="" class="h-5 cursor-pointer" /></a>
    </div>
  1. The code in <a> elements which represents different social media links. Here we applied, href attribute is set to the respective social media links.

tip

Similar steps were carried out for adding TCET email, Linkedin ,Youtube , Twitter, Instagram & Github in this section.

After we have followed all the steps, our Resume Screener website footer looks like this:

After successfully implementing the Footer component of the Resume Screener website, we were ready with out frontend part of the website. Next, we will be seeing how we integrated the backend of the Resume Screener website.