Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jonas business site #367

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Jonas business site #367

wants to merge 6 commits into from

Conversation

Jonash189
Copy link

This week's work: Project business site.

My link: https://jonas-busines-site.netlify.app/

…t devices in the browser’s developer tools. However, when viewing the website on a real mobile device, the backdrop filter does not work as expected. I am adding -webkit-backdrop-filter: blur(10px); to ensure maximum compatibility across all browsers.
Copy link
Contributor

@HIPPIEKICK HIPPIEKICK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Jonas, fantastic job with your business site! ⚡ Some tips coming up!

HTML

  • Your HTML is well-structured and easy to read. You’ve used semantic tags like <header>, <nav>, <main>, which is excellent for both accessibility and SEO. Keep this up!
  • Use type="email" for the email input field instead of type="text". This will trigger the browser’s built-in email validation and provide a better user experience.
  • Your form elements are well-labeled, which is important for accessibility. Good job!

CSS

  • You’ve imported Google Fonts, which adds a nice touch to the overall design. However, consider specifying fallback fonts for better compatibility:
font-family: 'Ubuntu', sans-serif;
  • The buttons and input fields are well-styled and consistent with the overall theme; the whole page looks so neat!

Keep up the great work, and I can’t wait to see what you create next. 🚀 ​


## The problem

Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
I encountered an issue where the backdrop filter blur worked in the browser's developer tools but not on an actual mobile device. I resolved this by adding -webkit-backdrop-filter: blur(10px); to ensure it works properly across all browsers.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

top: 0;
left: 0;
padding: 10px 0;
box-shadow: 5 2px 5px rgba(0, 0, 0, 0.1);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first value here (for the horizontal shadow) doesn't have a unit. Should it say 5px?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants