Anyone know why the generated screenshot is so weird? I checked my site on several different browsers and the screenshot is very different from what appears in the browser.
It also looks like many of the errors being generated are from my inclusion of Font Awesome for the shopping cart image.
Thanks for the help everyone!
Hello Jenny, congratulations on completing this challenge.
U need to add object-fit: cover; to your img element, this will fix it. Also, maybe the errors in the shopping cart image are because in your head tag the styles.css are loading first then the styles from font awesome so probably moving the font awesome style tag above the style.css link will fix it.
Hello! I have an issue with svg images in footer(social media logos). I have no idea what to do to make them change color on the hover. I have tried to change color in the file, import them on different wayes but there is still something wrong and the color do not change. I will apretiate, if somene could help me solve this problem :)
Anna
Hello Ana, congratulations on completing this challenge.
Your svg body is like this:
<path fill="#FFF" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"></path>
You need to delete the fill property after the path tag and your hover should work. This will only work on svg tags within the html code but not in svg tags in image tags.
Português : Mais um desafio feito, passei um bom tempo pesquisando uma forma de selecionar os elementos quando eles fossem clicados, até que achei essa forma. Se alguém tiver uma forma melhor de fazer, todo feedback é bem vindo.
English : One more challenge done, I spent a lot of time researching a way to select elements when they were clicked, until I found this way. If anyone has a better way to do it, any feedback is welcome.
Wow, this was a great challenge. It took me longer than I expected (around 6-7hrs), but, in the end, I was able to complete every section, both for mobile and desktop versions. I think the decision to go mobile first or desktop first influences a lot your approach and the solutions you need to find for every little detail. It is also important to point out that the way the site looks will depend greatly in the type of device you have. It definitely needs more media queries, so it looks great in all screen sizes, but I think the point of this one was to see how much one was capable of doing.
One question --> In the "Creations section", I wanted the hover effect to have a transition, but I was not able to achieve it. Any help would be appreciated.
Any other feedback is also welcome.
Hello Jose, Congratulations on finishing this challenge!
For your .creation-items is not necessary create a class for every element like you do (.creation-item-one, .creation-item-two, etc), the pseudo class :nth-of-type will make this easy for you and help to maintain the html code cleaner. About the hover effect, your .creation-item:hover::before is ok but you need to create first a .creation-item:before, like this:
.creation-item:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(255, 255, 255);
opacity: .7;
transition: all .2s ease-in-out;
cursor: pointer;
}
.creation-item:hover::before {
content: '';
position: absolute;
width: 100%;
}
This one make the transition go from left to right because .creation-item:before width is set to 0 and your .creation-item:hover::before has a widht set to 100%. U can also set the width to 100%, height to 0% in the.creation-item:before and height to 100% in the .creation-item:hover::before and this will make the transition go from top to bottom.
The only problem I have is the color of the search input. I could not figure out why I couldn't change its color. If anyone can guide me, I would highly appreciate that.
U can change the color just using color: (hsl(0, 36%, 70%)); in your class search__input.
Any advice or recommendation is going to be welcome.
You should limit the digits in the output, when you try operations with decimals results the output do not display correctly (e.g 1.2 / 3) everything else looks good.
I struggled with the responsive design but finally did it, any feedback is welcome!
There is a bug that only happens when I deploy the site but in my local server it's good, if you know why this happens please let me know, I would really appreciate it.
