Creating the layout for the accordion with the arrows on the right hand side, I used flex and separated the question text and the arrow icon using space-between. This has meant that I have only got the dropdown part to work when click the text. Any advice on an improvement to this so that clicking the icon also activates the dropdown would be great.
Hey Good Job on the challenge!
In order to get the dropdown to work when clicking the arrow as well as the text, I'd suggest not using a separate <img> tag for the arrow. I'd suggest using something like the ::after pseudo-element to add the arrow.
This works with your current code to get the arrow in the correct position:
.accordion-btn::after {
content: '';
background-image: url(./images/icon-arrow-down.svg);
background-repeat: no-repeat;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 10px;
aspect-ratio: 1;
}
Then you can remove the display: flex in .accordion-question so that the .accordion-btn takes up the whole width:
.accordion-question { padding-top: 1.5rem; cursor: pointer; }
This way clicking anywhere will trigger the onclick event.
The way I have the code written, when the Eye is hovered, the teal background stops showing, I wasn't able to figure out a good way to fix this. Any tips would be appreciated.
Thanks!
Good work on the design. The issue is that the eye image is on top of the cube image. So hovering on the eye stops it from registering a hover on the cube image. Very simple fix is to add a pointer-events: none; to the .eth-eye-img class. That makes the cursor not interact with that element but it can still interact with elements under it.
Another solution:
Since you're already using the eye image as a background image in your .eth-eye-img class, I'd suggest changing to a <div> instead of an <img> tag. That way you could set the overlay color as the background color on that element. Then set the default opacity of that div to zero and change the opacity of that div to 0.5 on hover. That way the eye and the color would overlay the cube img.
This is my solution for the 'Social proof section'. Let me know Are there any problems.
Hey, the link to the github repo doesn't seem to be working.
While the preview site looks good on a larger screen size (aside from some color differences), the content gets cut off at smaller screen sizes. You can consider using media queries to create breakpoints for different screen sizes to change the layout of the page.
A common design pattern would be to start with the mobile version of the page, in this case, the layout could be done with a display: flex; with a flex-direction: column. Then at larger screen sizes you can switch to a display: grid; or do something with flex as a row.
In terms of the HTML markup, consider putting the markup inside of a <main> tag rather than a <header>.
