I've been doing this work just to remind me of some studies i'm working on. It was nice to do this job, although I had problem to align the DIV, and that's why it's good to remember the basics.
It wasn't hard to put all together, i had problems to align the main DIV, because I'm still learning about positions using CSS.
This project was totally about CSS.
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.
To align the main div in the centre, there are multiple ways that you can try.
One safest way is as below:
main { /* margin: 5%; */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Another one is using a display Grid or Flex.
Also, you can remove margin: 5%; from main
I hope you find my comment useful 😄 Nevertheless, the solution you submitted is great! 🎉Happy coding
Hello everyone! I hope I did this right?!
I was wondering if there was a more concise way of achieving that soft purple tint on the image (I used a z-index)?
I appreciate all feedback!
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.
You can achieve that soft purple tint on the image using background blend mode. Below is the link for a tutorial in which Kevin explain it, you may want to watch it.
CSS Blending Modes - By Kevin Powell
I hope you find my comment useful 😄 Nevertheless, the solution you submitted is great!
🎉Happy coding
how i can fix the column gap
Hello there 👋. Good job on completing the challenge!
Here are some suggestions regarding your code that may be of interest to you.
You can create 4 columns instead of 5 and you will not require the explicit declaration of rows. See below CSS code.
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* grid-template-rows: repeat(4, 1fr); */
column-gap: 1.875rem;
row-gap: 1.5rem;
margin: 10.25rem 10.313rem;
}
I hope you find it helpful! 😏 Above all, the solution you submitted is 👌. 🎉Happy coding!
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may interest you.
Your solution for the Desktop screen looks great ✨ But for a small/mobile screen(less than 630px) play a little bit with the margin. like margin-bottom: 1rem; for mini-section.
I liked your Mobile First Design Approach 🙌.
I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!
need help and recommendation
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may interest you.
Your solution looks great for the desktop screen, I would recommend a few changes in CSS for your button so that it will look perfectly round and also consider repositioning the button.
See below the CSS code for the desktop screen...
.btn-click { border-radius: 135px; top: 75% /* Or maybe 80% */ }
For the mobile screen, I would recommend a few changes in the media query see the below code.
CSS
@media (max-width: 480px)
{
main{
/* height: 100vh; */
}
.card {
/* width: 100%; */
/* height: 100%; */
padding: 5rem;
}
.btn-click {
left: 38%;
top: 94%;
}
}
I hope you find my comment useful, 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding
What did you find difficult while building the project? =overlay CSS on the image for that purple color by just using only CSS.
Which areas of your code are you unsure of? =i am not happy with the image overlay and unsure of that.
Hello there 👋. Good job on completing the challenge!
Here are some suggestions regarding your code that may interest you.
For Responsiveness, especially for mobile screens
Your solution for desktop screen size looks excellent, but for Mobile screens, try to add more CSS to your media query. try using Flex or Grid to make it responsive for mobile screens.
Below is the link to my solution repo, please feel free to take a look and get the idea of proper restructuring of media queries, accessibility and usage of utility class and be careful when you use GRID and Flex.
You can see the tutorial, where Kevin explain all these things very clearly, below, is the YouTube link for the tutorial.
I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!
Hello there 👋. Good job on completing the challenge!
Here are some suggestions regarding your code that may interest you.
For Responsiveness
Your solution for desktop screen size looks excellent, but for Mobile screens, try to add more CSS to your media query. I suggest adding visually-hidden content for the price and oldPrice, so it doesn't generate an accessibility report and is also a best practice for accessibility.
Below is the link to my solution repo, please feel free to take a look and get the idea of proper restructuring of media queries, accessibility and usage of utility class and be careful when you use GRID and Flex.
You can see the tutorial, where Kevin explain all these things very clearly, below, is the YouTube link for the tutorial.
I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!
Hi there , I’m Bavly and this is my solution for this challenge.
Any suggestions on how I can improve and reduce the code are welcome!
Thank you.
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.
For avatar I can see you have used pseudo-element ::after but that seems not working as the image for the avatar is in png, It is a great idea to use pseudo-element in the case of SVG images but here it is not a good idea as it is in png format.
Below are HTML and CSS changes that you might change in your code to make avatar visible
HTML
<div class="product__avatar">
<img class="avatar" src="./images/image-avatar.png" alt="" />
<p>Creation of <span> Jules Wyvern</span></p>
</div>
CSS
.product__avatar{
display: flex;
padding: 1rem 1rem 0 0;
gap: 1rem;
align-items: center;
}
.avatar{
vertical-align: middle;
width: 40px;
height: 40px;
border-radius: 40px;
border: 2px solid var(--clr-white);
}
.product__avatar + p{
margin-left: 20px;
font-size:0.9rem;
}
p > span{
color:white;
margin-left: 3px;
}
Also for the hover effect on Equilibrium #3429 and Jules Wyvern make below changes in your CSS
.card .main-img:hover a {
cursor: pointer;
opacity: 1;
}
h3:hover{
color:rgb(33, 247, 245);
cursor: pointer;
}
span:hover{
color:rgb(33, 247, 245);
cursor: pointer;
}
HTML 🏷️: To clear/pass the Warning "Page should contain a level-one heading" and for Accessibility:
Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.
Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.
HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities). You can use the <div> for sub-items within landmarks like <section>. In other words for containers or sections in your HTML, you can use the <section> tag if you want to nest in subitems <div>.
Landmarks such as the <section> may require that you specify a heading within. In other words, if the section has no heading it may throw an error when checked by an accessibility tool.
It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.
There exists an attribution <div> that comes with the frontend mentor starter kit. You will have to wrap this <div> in a <footer> tag
Read
W3schools Accessibility Landmarks Notes for more information.
Accessible Landmarks Article by Soctt.
I hope you find my comment useful. 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.
HTML 🏷️: To clear/pass the Warning "Page should contain a level-one heading" and for Accessibility:
Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.
Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.
HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities). You can use the <div> for sub-items within landmarks like <section>. In other words for containers or sections in your HTML, you can use the <section> tag if you want to nest in subitems <div>.
Landmarks such as the <section> may require that you specify a heading within. In other words, if the section has no heading it may throw an error when checked by an accessibility tool.
It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.
There exists an attribution <div> that comes with the frontend mentor starter kit. You will have to wrap this <div> in a <footer> tag
Read
W3schools Accessibility Landmarks Notes for more information.
Accessible Landmarks Article by Soctt.
I hope you find my comment useful. 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding
@WinstonMcFreewin, please let me know in case of any doubt.
Hello there 👋. Good job on completing the challenge!
Here are some suggestions regarding your code that may be of interest to you.
HTML 🏷️: To clear/pass the Warning "Page should contain a level-one heading" and for Accessibility:
Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.
I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!
i need help with cont:width,height i need help with cont:width,height i need help with cont:width,height
5 hours spend on this and finale done it ,but width not same and hieght and i think there is alot of mistakes
Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.
HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities). You can use the <div> for sub-items within landmarks like <section>. In other words for containers or sections in your HTML, you can use the <section> tag if you want to nest in subitems <div>.
Landmarks such as the <section> may require that you specify a heading within. In other words, if the section has no heading it may throw an error when checked by an accessibility tool.
It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.
There exists an attribution <div> that comes with the frontend mentor starter kit. You will have to wrap this <div> in a <footer> tag
Read
W3schools Accessibility Landmarks Notes for more information. Accessible Landmarks Article by Soctt.
I hope you find my comment useful. 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding
