Yoga Bloom is a responsive one-page website for a yoga studio. The project was built as a team landing page with a focus on responsive layout, semantic HTML, reusable sections, modal windows, and clean visual presentation.
Live site: https://alisapagan.github.io/FlowBloom/
- Responsive one-page layout
- Header with navigation and mobile menu
- Hero section
- Yoga classes section
- Team section
- Gallery
- About section
- Testimonials
- Pricing plans
- Join/payment request modals
- Form fields for name, email, and phone number
- Phone number validation pattern
- Scroll lock for opened modals
- Footer
- Responsive layout for mobile, tablet, and desktop
Role: Team Lead, Front-End Developer
My contributions included:
- Set up and maintained the project GitHub repository and workflow
- Built responsive modal windows and form components
- Worked on responsive layout and UI sections
- Reviewed team code and requested revisions
- Helped teammates with Git workflow and frontend debugging
- Coordinated team tasks and final project cleanup
- HTML5
- CSS3
- JavaScript
- Vite
- vite-plugin-html-inject
- vite-plugin-full-reload
- modern-normalize
- GitHub Pages
- Header — logo, navigation, and mobile menu
- Hero — main introduction section
- Yoga Classes — class options and content
- Team — instructor/team section
- Gallery — visual content section
- About Us — studio information
- Testimonials — customer feedback section
- Pricing — yoga plan cards with join buttons
- Modals — join forms connected to pricing plans
- Footer — final navigation and contact area
The pricing buttons open different modal windows based on the selected plan. When a modal is open, page scrolling is locked. The modal can be closed with a close button.
The modal forms include:
- Name field
- Email field
- Phone number field
- Basic phone validation pattern
- Submit button
git clone https://github.com/AlisaPagan/FlowBloom.git
cd FlowBloom
npm install
npm run devnpm run buildTeam project built during the GoIT Full-Stack Developer course.