All solutions

What challenges did you encounter, and how did you overcome them?

a relatively smooth sail.

What specific areas of your project would you like help with?

box shadows, I find it hard to replicate them closely to the reference images.

What challenges did you encounter, and how did you overcome them?

This challenge had me thinking for a while. I zoom in a lot when browsing the web, so using viewport dimensions, or percentages on outside boxes was a no go for me. If you are not familiar with this, think of this example:

As zooming in stretches every pixel by the zooming ratio, if you have a width: 250px on an element, and you do 200% zoom, the width will be 500px on the screen. However if you were to use width: 50% on an element, after you do 200% zoom, even though the element will shrink in pixel size, it will still take 50% width space in the screen.

So, to allow zooming, I set every outside box's dimensions with pixels. And proceeded to use media queries with html { zoom: x } to achieve something similar to vw, vh or %'s to make sure the website works on different dimensions of viewports.

What challenges did you encounter, and how did you overcome them?

It was hard to make texts scale down with the flexbox. When flexbox shrank, the box of the text elements would shrink aswell, however the text inside would not. They continued to have the same font size, and this would make the contents of the flexbox overflow. I tried using vw's, em's, rem's and in the end I settled with using cqi font sizes.

I also attempted to use @container to make the font sizes change with the container's width or height. However @container required container-type: inline-size to be used (if you want to check width), and that would break the whole projects font sizes, so I had to find a new solution.

What challenges did you encounter, and how did you overcome them?

I used:

html, body { height: 100%; }

and body { display: flex; flex-direction: column; }

However this (for a reason beyond me) made the contents of the flexbox (info-box) overflow. Is there a good solution for this problem? Is doing height: auto; on the body a good solution?

What specific areas of your project would you like help with?

I don't understand why the !important was required for the hover animation on the button to work (the color of the text wouldn't change otherwise).

One other challenge I faced during this is that, I used display: flex; on the with justify-content: center; the uppermost box in the mobile view would be out of bounds (It wasn't allowing me to scroll up there).

What challenges did you encounter, and how did you overcome them?

I encountered two obstacles during this, one was to align one element to the left, while aligning the other to the right. Luckily some "flex" magic was able to solve this.

Second problem encountered was successfully replicating the hover animation for the image, I believe this second problem thought me valuable knowledge and to use hover selectors more creatively. In the end I used two containers with different z-index values, and the upper layer contained the icon-view image inside of it in HTML, while also containing the background tint as a RGBA color in the stylesheet. This allowed me to change the opacity from 0 to 1 without fully obfuscating the original image, as RGBA allowed me to set the alpha channel to 0.7

• So with this workaround the icon-view's opacity went from 0 -> 1
• The cyan background's opacity went from 0 -> 0.7 and the problem was solved.

What specific areas of your project would you like help with?

Definitely with organizing the CSS, during this challenge I had a very messy CSS file, even though the challenge itself was relatively simple.

What challenges did you encounter, and how did you overcome them?

This challenge reminded me how much of a torture working with tables are. Also because the preview image of the website for PC and Mobile users vary (mobile version lacks the top paddings and rounded corners) they led me to explore responsive design to address the differences in the forementioned versions.