Jiwon Suh• 210
@suhjiwon95
Submitted
Updated Solution!
- Cleaner HTML, CSS, and JS
- Added a confirmation page once form submission is successfully completed.
Stefan
@stfnpczk
All comments
- Stefan• 620
@stfnpczk
Posted
Looks great Jiwon!
An other way to approach the input validation is to use a loop for the nodelist elements of the form. That way you only need to write one input verifier and can check all the fields together whether an input was made or not. To better understand what I mean, you can see my js of the challenge here .
Happy coding :)
Marked as helpful
1 - Kiyoomi• 480
@Jukiyoomi
Submitted
I did my best on this challenge and really tried to do it pixel perfect, but I couldn't understand why my carousel keeps cutting the photos... if anyone can help me about this, I did it using Glider.js !
Stefan• 620@stfnpczk
Posted
Hi Kiyoomi,
I think the issue can be fixed, if you use
padding-topinstead ofmargin-topwithintestimonials .cards1 - Paulina• 350
@testerium
Submitted
Hello! I have problem with active state of social media icons on the bottom of the page. They should change their color with :hover. How can I do that? Thanks! :)
Stefan• 620@stfnpczk
Posted
Hey Paulina,
for the icons to change the color on hover, they need to be in a dynamic format like for example svg. As far I know, you can’t do that with jpg/png as they are static and you can’t access any color properties within
<img>itself.So instead of the png format, you should get svg icons or import them from some icon library like Font Awesome and apply the respective color properties for it to change the color.
Marked as helpful
1 - DanielK• 440
@DanK1368
Submitted
Hi guys,
Appreciate any feedback, especially on the following:
-
the way I wrote my JS. I'm not sure if that is the right way, but since certain elements needed to be changed while others not, I made use of an array and filtered it as well in order to apply classes to certain elements only. Is this the right way? or is it too work-intensive?
-
I'm getting an issue when checking the accessibility in the browser devtools. "Clickable events must be focusable and should have interactive semantics" The arrow icon is inside an my button though. How do I fix this?
-
HTML5 markup, especially from an accessibility stand point. I feel like I need to still work on that a lot.
Stefan• 620@stfnpczk
Posted
Hi Daniel,
in regard to the js, I was asking myself the same question and stumbled upon the
detailselement. It has a built in open state that can be toggled. So you can loop through all detail DOM elements and disable the open attribute for all except the one you clicked. For my solution, I was referencing the js in this post here.0 -
- Evan Parker• 200
@evancp87
Submitted
Hi all,
I think i did ok with this one. Things that could be improved are the implementation of the shadow as a background image on mobile devices. The shadow moves when the accordion is expanded. I positioned it so it still looks ok, but i feel it's not ideal.
I also went round in circles with using overflow: hidden on the illustration. I got the main image and background how it should be, but i couldn't get the illustration box to escape this. I could only get overflow: hidden to work on the parent container, but nowhere else. If i removed it here then the other images wouldn't work. I'd appreciate tips on refactoring this.
I also am trying to refine my styles for really small devices, such as Galaxy Fold, so any tips on this would be handy also!
Overall i enjoyed making this component!
thanks, Evan
Stefan• 620@stfnpczk
Posted
Hi Evan,
one way to make the box float a little bit outside the card, is to put the box in a separate div that is outside of the accordion-container and put the
z-indexproperty on it.Marked as helpful
0 - HutHut• 310
@j-hutchison
Submitted
Parts that i think could be improved:
- How the stars are printed in the reviews at the top of the page, i used a repeating background image to avoid duplicating html img tags, is there another better solution here?
- Testimonials, when i removed the height attribute, the purple background filled to the bottom of the parent ul element removing the indentation, is there a better solution than hardcoding height?
Thank you for your feedback and help!
Stefan• 620@stfnpczk
Posted
Hello HutHut,
using
background-repeat: repeat-xis certainly a very good and efficient way to display the stars. Although there's nothing wrong with using multiple svgs here. As you put the stars in a flex container, you have more control over the gaps between them. But either way is fine, I think.As far as the indentation goes, I also struggled with that one. Instead of an explicit height, I used the
n-th childselector in combination withalign-selfand flex-start/ center / end. Have a look here if you like.Happy coding!
Marked as helpful
0 - Louise Norrsén• 140
@louisenorrsen
Submitted
I have problems with getting the image overlay the correct shade/color. Feedback on how to improve that image is very welcome!
Thanks!
Stefan• 620@stfnpczk
Posted
Hi Louise,
one way to get the image closer to the color of the design is to put the properties
mix-blend-mode: multiplyandopacity:0.79on the image and use a div with the purple background-color as specified in the style guide.Marked as helpful
0 - PNicholas Tapia• 60
@tapzx2
Submitted
The fonts are always off in my solutions compared to figma or screenshot. I double checked everything and still not correct. Any ideas why this is happening?
The solution screenshot is not what is being displayed in any browser I look at. Suggestions on how to fix this?
Thanks!
Stefan• 620@stfnpczk
Posted
Hi Nicholas, I also have the impression that the font in Figma appears crisper than in the browser. I believe, this is because they both run different rendering engines. For more details see this figma forum post.
As for the screenshot, you compare two jpg images against each other. Jpg is a lossy image format which is why it also looks different from what you see in the browser.
Marked as helpful
1 - Rosi• 440
@strosi
Submitted
Hi everyone :) In this challenge I tried to add some short effects (to the texts and the button) on page load. I'm not sure if that's the right way to do this so any advice on the subject would be very welcome.
Stefan• 620@stfnpczk
Posted
Hi Rosi, your solution looks fantastic as all of your solutions do by the way. Really great stuff :)
In terms of animations, I unfortunately can’t contribute anything valuable yet. So far, I’ve always been lazy to incorporate any sort of animation, it’s on my list of things to look into though ;)
But look-wise, I think, you put a really nice touch on your animations, it’s nice and smooth to look at.
Once again keep up the great work!
Marked as helpful
1 - Rosi• 440
@strosi
Submitted
I had some tough time with positioning the image in this. It works now but was frustrating because I thought I knew that well enough and the only challenge will be the tooltip. I found some new attributes and played a little more with JS.
Any suggestions on code improvement are very welcome.
Stefan• 620@stfnpczk
Posted
pixel perfect awesome job 👍
1 - Neha Nalini Kennedy• 100
@nehanalinik
Submitted
Can anyone tell me how to not allow
overflow:hiddento the box image in the desktop view?Stefan• 620@stfnpczk
Posted
Well done Neha, your solution looks very good and responds well. In order to prevent the box to be cut off, you can place the box in a different container than the images of the shadow and the woman. I suggest you also put
position: relativeon that separate container so the box doesn’t move around with different screen sizes.Once again, well done and happy coding.
Marked as helpful
1 - Volodymyr Balashov• 510
@volod-one
Submitted
Hello community of front end mentor. It's been a while. Here is my solution for this small challenge. I tried to focus on correct naming for classes and use BEM. And one more important thing, our components have to be clean enough to be able insert in section or other component without change our styles or do minimum of changes. This is one of the most important things which I've learned for last half year. So if you will try to inceare number of this cards, just uncomment some styles for parent component and our cards will display better. Please feel free to keep your comment and your doubts about my solution. And see you next time.
Stefan• 620@stfnpczk
Posted
Looks great Volodymyr!
Your code is nicely structured and well done in seeking a modular component approach.
If you mind getting rid of the accessibility warnings in the report, you can do so by adding a
maintag.Have a good one!
1 - Sébastien• 30
@collin25091980
Submitted
Build from scratch and mobile-first
Stefan• 620@stfnpczk
Posted
Well done Sébastien!
If you bother to get the image color even closer to the design, you can put the properties
mix-blend-mode: multiply;andopacity:0.79on the image and use a div with the purple background-color as specified in the style guide.And I noticed, you have an accidental whitespace character in the link font import, fixing that should get rid of the html issue.
Happy Coding!
Marked as helpful
0 - Mihail• 120
@Mihail-Secrii
Submitted
Stefan• 620@stfnpczk
Posted
Hi Mihail, you came up with with a fantastic solution for this challenge and are very close to the design. One small thing you could do to get even closer, is to add some line-height to your paragraph and adjust the height of the container.
I think like
text { line-height: 1.5625rem;}would do the job 😃Marked as helpful
1 - David Victoria• 50
@davic64
Submitted
Stefan• 620@stfnpczk
Posted
Hey David, you did an amazing job on this challenge. Your solution looks very similar to the design and behaves well for the different screen sizes.
One small suggestion I would give, is to include
background-size: coverfor smaller screen sizes so the picture is positioned properly.Marked as helpful
1
