/Ultimate-Battle-2021

Primary LanguageCSS

ULTIMATE BATTLE 2021

Link to the website

TABLE OF CONTENTS

DESCRIPTION

This project is UI design of an esports website made for eSports lover. Players can find a web-based competitive arena for games like CS-GO , Pub-g, Call Of Duty and Valorant. The website conatains all the information of the upcoming events that are going to be hoisted. The Winners get a chance to win exclusive prizes like Xbox, PS5 and many more.

  • NAVIGATION BAR : At top user sees a Navigation Bar that directs the user to the Home, Events , Prizes and Contact sections of the page when clicked respectively. It has a fixed navbar.

  • THE HOME SECTION : It has an image slider . It also has a Register button that directs the user to the registration form.

    Look for: Hover effect on MENU elements. Image slider

    Glowing effect on Register Button

  • THE REGISTRATION FORM : It has all the details that the user needs to provide inorder to participate in any event.

    Look for: Animation while filling the form.

    Alert on successful submission.

  • THE EVENTS SECTION : Contains all the necessary information regarding the events that are going to take place like the date, time and venue.

    Look for: Animation on the events cards on scrolling.

  • THE PRIZES SECTION : Join a video game tournament and win cash with your skills! Play PS4 or Xbox One games alone or with your team and beat the competition!

    Look for: hover effect on prize cards.

  • THE CONTACT US SECTION : Contains the Social-media Links where you can contact us.

    Look for: Hover effect on Social-media icons.

  • DO NOT forget to take a look at the custom made scroll-bar.

Back To The Top

TECHNOLOGIES USED

REFERENCES AND CREDITS

Back To The Top

ISSUES FACED AND LESSON LEARNT

  • Making our Website RESPONSIVE : The main obstacle for us was to provide a good user experience when the site is being viewed on different devices. We used media queries to solve this issue.

  • Pushing code to remote repository

  • Animations

-Network Issues: We had network issues but we still managed to make things workout.

Every problem has a solution but one must know how to find it. For this project GOOGLE was definitely our life saviour

Working in a team reduces the work load.

Back To The Top