To be honest, I don't know if it's right. I didn't know if each square on the page was supposed to be seen in the full size of the screen (mobile), but when in doubt, I did it that way. I thought it would look better.
Any suggestions are welcome ♥
You did well, I think it looks good on desktop and mobile!
That being said, there's an horizontal scroll on desktop. The section linha-5-imgs seems to be at fault.
In the footer, I guess social media icons need to be linked to their respective social media page.
Your interactive elements (links and buttons mostly) would look even better if you put hover effects on them, like you did on the Contact button. You may also set a transition so the effect would be more pleasing to the eye :)
Well done overall!
My goal was to solve the problem as fast as possible, sacrificing small design discrepancies. I used Tailwind, which is not usual for me - I typically use Sass modules.
Your page looks really neat!
I was wondering about the loading="lazy" error in the HTML validation report. I got the same errors when I submitted my solution so I just removed the loading attributes from all my images. Does this mean the loading attribute should not be used or is the report tool simply not up to date ? Seems a bit odd.
I always found it difficult to center element inside a div.
display: flex;
align-items: center;
justify-content: center;
Sometimes this code block would work. But sometimes it fails to center any element. In this particular case, when centering the card container in the main body. I did put the property block above in my parent container but it doesn't work. Did some research and asking for help from other friend, and come up with this solution
body {
display: grid;
place-content: center;
min-height: 100vh;
}
What is the best practice for centering an element inside a div?
In which situation I should use the first code block and the second code block in my code?
Hello and well done completing this challenge!
To answer your question, in this case you can use either flexbox or grid. I don't think there is any good practice that makes one of these better than the other.
Flexbox didn't work in your example because you also need to make sure that your element's height is at least equal to the window's height, as you did in your grid example. Adding min-height: 100vh should work. You would also need to set flex-direction: column in this case because of the .attribution element being a sibling of .card-container:
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
Hope this helps. Keep coding :)
To be honest, I easily build the markup and was able to quickly imitate the provided desktop design. What I found hard is the mobile design since this must be responsive based on the width of the screen. At first, I'm quite hesitant to manually change the width and height of the "image-desktop-product.jpg" (which is the perfume) since I might possibly ruin the image. But when I was about to upload all the files in my repository, it turns out that there's the "image-mobile-product.jpg" inside the images folder!!! The heck lmao, this is just a reminder to be mindful of the provided resources so that we can all save more time lol.
The ability to manipulate and use display properties such as FLEX, BLOCK, HIDDEN, and of course MEDIA QUERY really helped me in this challenge. Big thanks to the StackOverflow community for providing me with the answer on "How to make an element's background color a little darker using CSS".
Hello and well done completing this challenge, your component look good!
I have a few suggestions to further improve it:
alt attribute shouldn't just repeat the name of the product. Here you should really describe the image as you would describe it to someone that can't see it.Apart from these minor matters, you did a really good job! Keep going :)
In fact, I find some problems when I style the background image of the product. The size of the image is kind of weird. Therefore, my responsive design may not be good at this moment.
If you can provide some advice on my responsive design and styling background image, I would be appreciated it.
Hello and well done completing this challenge!
This image is not purely decorative and is important to the page content, therefore it shouldn't be displayed as a background. I would use an <img> here, or even better a <picture>.
This may even fix your sizing issues. :)
Also you put a <h2> right before the <h1> which is semantically incorrect. You could wrap the word Perfume inside a <p> or maybe a <span> instead.
Keep going, happy coding!
Hey Everyone! This is my solution to the Sunnyside landing page 🙂
I chose to take on this challenge because of the landing page's excellent design ✨
Questions I have:
Any suggestions on how to make the code better would be greatly appreciated.😊
Hello! Well done completing this challenge, your page looks really neat! 🎉
To answer your question, I may be wrong but I don't think hover effects have any negative impact on performance. They are good for the user experience though, so ideally every interactive element should have one :)
Keep coding! 🧑💻
HELP!!
how to add border-radius and hover to main image
Hello, well done completing this challenge!
The border-radius you set doesn't show because you gave a padding to your image. Remove this padding and instead apply it to the element that contains the image, here .card.
To create a hover effect you could wrap the eye image inside a <div>, give this div a coloured background, center the eye icon inside using flexbox and use absolute positioning to put the div over the image. Then you give it an opacity of 0 which you switch back to 1 when the element is hovered, using div:hover. This should work :)
Hope this help. Dont hesitate if you have further questions. Keep going!
I'm not sure about the HTML and CSS I'm writing. I feel like my code can do less than I do and is it any good if I declare lots of classes in HTML? sometimes it's annoying and the reason for doing it is because I think it's the best even though other people can do it with less class. Can you give me a solution to make my HTML and CSS classes more efficient?
Hello and well done completing your first challenge!
To answer your question, I don't see anything wrong with using lots of classes. I'd even say it's best to target a class rather than a tag name like div / h1 / p etc.
Frameworks like Bootstrap and Tailwind heavily rely on classes, same for the BEM methodology, and it's perfectly fine! Classes exist so they can be used this way. :)
Your component looks good both in desktop and mobile mode. There are a few HTML issues you could fix, everything is listed in the reports above and they're quite self explanatory.
Well done and keep going!
This HTML and CSS project I recently completed was a fun. The project involved creating a responsive website that showcased a responsive card element. The main goal of the project was to provide an engaging user experience by presenting high-quality images that were optimized for different screen sizes.
Throughout the project, I enjoyed the process of building and refining the website, and I didn't encounter any major issues. Overall, the project was a great learning experience that allowed me to explore the power and versatility of HTML5 and CSS in creating a responsive and visually appealing website.
Hello @Walkwithrahul, well done completing this challenge!
You did a good job otherwise, keep going! :)
Pleas tell me, is this page responsive?
Hello 👋
It displays well on my phone so I guess you managed to make it responsive! 🎉 I can't inspect your code further right now though but I may come back later. In the meantime you may want to look at the reports above ⬆️ to improve your HTML structure.
Well done completing your first challenge, keep going!
I'm not sure if I was supposed to hardcode the width & height values of the different sections of the card.
Was my :hover overlay the best practice in the industry?
How do I automatically size the ::after element's background to match the original element with 100% accuracy?
Is it best practice to use background-size: contain for SVG images?
How do I recolor SVGs using CSS without using CSS masks or editing the .svg path directly?
Hello @Luzefiru and congratulations for completing this challenge!
To answer your questions :
1. Your hover overlay method is fine! However I would change a few things :
z-index: 1 to the :before.2. To make an absolute element take the full size of its parent, first make the parent's position relative. An absolute element's position is calculated based on its closest relative ancestor. Then you can make the element match its parent's boundaries like so :
.element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
3. I wouldn't say it's a bad thing to use background-size: contain, as long as the icon displays correctly. Here again I would have used an <img> tag but as it is a decorative icon, it's fine this way I guess. :)
4. I don't think you can change the colors of a SVG with CSS if you insert them as background image or even with an <img> tag. However you can do so by inserting the raw SVG inside your HTML, then you'd have access to the elements inside. But I really don't know if it's a good thing to do. Another way to do this is by converting your SVGs into a webfont. The icons can then be inserted as characters and you can change their color and size using CSS. This process is a bit complex though. For beginners, I'd say your method is really fine. :)
I hope my comment was helpful. You did a good job, keep going!
feel free for suggestions and corrections ♥️
Hello 👋 Well done here, your hover effect looks neat!
I have a few remarks:
<img> tag instead.<h1> on your page. This adds meaning to your page and shows what the main topic is. Here, the <h1> should be Equilibrium #3429. You can of course keep the <a> wrapped inside or around the <h1> :)Keep going 🎉