Conversation
update checklist to be more generic
…-figma-link [Miami]: changed MyBike Figma link to a new version
update dependencies
Feature/prettier
add latest deps
…mprove grid structure in main styles
- Introduced a new SVG for the burger menu hover state. - Updated burger.scss to implement hover effect, switching between default and hover SVGs. - Styled phone component with a label that is visually hidden when not hovered.
…hance button styles and add back-to-top button
…ns, and improve phone label styling for desktop
natalia-klonowska
left a comment
natalia-klonowska
left a comment
There was a problem hiding this comment.
between mobile and tablet breakpoints your layout is responsive but above that it becomes fixed
Here you can read more about the differences between fixed and responsive layouts
- disable page scrolling under the menu
- Form shouldn't be submitted if some of the fields are not filled
- Page shouldn't be reloaded on form submit
natalia-klonowska
left a comment
natalia-klonowska
left a comment
There was a problem hiding this comment.
between mobile and tablet breakpoints your layout is responsive but above that it becomes fixed Here you can read more about the differences between fixed and responsive layouts
layout above 744px is still fixed. for example navigation should respond to screen resizing rather than expanding side margins
Page shouldn't be reloaded on form submit
disable page scrolling under the menu
main.js file isn’t loading correctly. Try adding type="module" attribute to <script> tag and deploy your project again
- you can see in figma design how buttons should look on hover and when pressed
- If you make any design changes (e.g. different background image above 1260px) it’s better to mention them in readme to avoid confusion
…tyles for improved layout consistency
…ved layout and visibility
12 participants
My Bike page
Project Description: MyBike is a modern, responsive landing page designed for an electric bike brand. The project focuses on a clean presentation of bike models, technical features (such as Auto Unlock and range details), and provides an intuitive user interface for potential customers to book test rides.
Technologies Used:
HTML5 (Semantic structure)
SCSS (Modular architecture, variables, nesting)
JavaScript ES6+ (Interactions, mobile menu logic)
BEM Methodology (Clean and scalable naming convention)
Google Fonts (Poppins typeface)
Vite / Parcel (Build tool)
Note: Background image for desktop view (above 1260px) was changed for better visual consistency.
Links:
DEMO LINK