-
Notifications
You must be signed in to change notification settings - Fork 471
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
base: master
Are you sure you want to change the base?
Jonas business site #367
Conversation
…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.
There was a problem hiding this 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 oftype="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. |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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?
This week's work: Project business site.
My link: https://jonas-busines-site.netlify.app/