FED-KIIT

Link to the hosted website : https://fed-kiit.netlify.app/



Navbar :-

  • Left side contains the FED logo

  • Right side contains the Navigation tabs:
    • Home : Clicking this takes us to the Home section.
    • About : Clicking this takes us to the About section.
    • Sign in : Clicking this opens the Sign In form.

  • It has a round rectangular shape and contains a blur effect.





Sign In Form :-

  • A basic sign in form is designed to replicate the design that was provided.

  • Login Credentials:

    • Username : Sambit

    • Password : FED-KIIT

(Note: Other buttons are not functional as of now, as no backend or database has been used. Also, only the login credentials given above can be used for logging in.)





Home :-

  • It is divided into two sections:


    • Left Section:

      • This contains the Carousel.

      • It has both autoplay and manual functionality.

      • There are five images (same images) in total (also shown by the white dots at the bottom.

      • The dot changes color according to the number of the image that is being displayed.





    • Right Section:

      • This contains some text and the Enroll Button.

      • Enroll : Clicking this button opens the Sign In form.





About :-

  • Almost replicated the design that was provided, including the background.

  • Provided a glass blur effect.





Footer :-

  • Almost replicated the design that was provided, including the background.

  • Provided a background blur effect.

  • Navigation shortcut tabs are provided to ease navigation from the bottom of the page.

  • A template of the Social Media handle links is given.

  • Copyright and the name of the owner is given.





Logged In Page :-

  • Navbar : Changed the Sign In option to the username (Sambit).

  • Home : Changed the 'ENROLL' button to 'EXPLORE'.





Special features :-

  • Customised scrollbar : Changed the scrollbar to the website's theme color, i.e., orange and dark brown.

  • Hovering Effect :

    • The navigation tabs change their color to orange as we hover across them. (This is applicable in both navbar and footer).

    • The ENROLL/EXPLORE button change the background color to white and text color to orangle as we hover across them.

  • The website is completely responsive for mobile devices.