SPORT CENTER PROJECT

(https://papaya-biscochitos-7005aa.netlify.app/)

VIDEO:

sport_center.mp4

SUMMARY

In this project prepared using HTML, CSS and JS Vanilla; a design was made that is sensitive to user interactions, scrolling events and different screen sizes (web and 576px screen).

FLOW & CONTENT

A HEADER

Changes the background color of the header when scrolling down the page.

B HOME SECTION

1. .hero
2. .home-boxes

C CLASSES SECTION

1. .our-classes

• Defines functions for displaying content related to different types of classes (yoga, group, solo, stretching).
• Updates the content of the .class-content element based on the selected button.
• Listens for click events on buttons to trigger the corresponding function.

2. .bmi-calculator

• Defines a BMI (Body Mass Index) calculator function that calculates BMI based on user input of - weight and height.
• Listens for keypress events on input fields (for height and weight) to trigger the calculator function.

D TRAINER SECTION

1. .trainers

• Implements hover effects for trainer images.
• When hovering over an image, it adjusts the background size and shape.
• Changes the opacity of text associated with the hovered image.

2. .purchase

E REVIEW SECTION

F CONTACT SECTION

G FOOTER