Submitted
Blog Preview Card
- HTML
- CSS
@BelumS
Submitted
Submitted
Hello everyone,
This is my first challenge in quite a while, so it took a lot longer to get the smaller details correct.
I found it difficult to switch the background-color
to the dark-slate-grey
when the screen changes.
The Form Page needed the white background to stick around until a much later viewport size, whilst the Success Page changed its background-color
at an earlier viewport size.
I think I did well with the form styling, form validation, and the responsiveness. I realized that the responsive design is not restricted to what we're given, and can be based on the content.
I also had wanted to nest my CSS, but it's not as widely supported.
Submitted
Hi Everyone,
This one took me quite some time to complete the form validations, and I'm sure I didn't validate all of the scenarios either.
I combined the input
and change
events, but I feel it was a bit sloppy, and I also ended up with a lot of duplicate code.
I also wasn't able to complete the bonus animation, so any tips there would be greatly appreciated too!
Thanks,
Belum
Submitted
Submitted
Hello everyone, I ran into issues with the form validation causing the lower form elements to move upwards to accommodate them.
Also with placing the text onto the card for desktop mode, it looks wonky at certain breakpoints.
Submitted
Submitted
Submitted
Submitted
Hi everyone, this is my first JS challenge in a while. My main issue was the active state for desktop.
Thanks,
Bel
Submitted
Submitted
I botched the middle images, so I left them out entirely.
Submitted
Submitted
Submitted
Hello all, I have a question about whitespace management.
I tried my best using row-gap
and margin
, but I'm sure there's a more efficient way?
Submitted
Hello everyone, I struggle a bit aligning the flex items, and with the dimensions, but I'm proud of how it looks in the end.
My question is about the range slider, after I wrote the custom CSS, it lost it's functionality. During my research, it stated that that's just what happens in -webkit
browsers. So I have to resort to JS to get it to work again?
I also ran into issues with the background-image
for the desktop design, I added background-position: top;
to get it to stretch the full vh
, but when I opened the dev tools, it still had whitespace in the top-right corner.
Submitted
Submitted
Submitted
Hello everyone, I'm really looking forward to this one, as I struggled quite a bit with positioning and alignment.
How did you get the arrows to align perfectly to the right of the text?
I used justify-content: flex-end;
to no avail.
Were you able to perform it with just CSS, if so, how?
If you used JS, how'd you get the styles to remain stable during the animations?
How did you align the main image for mobile and desktop? For the desktop style, how'd you get the box image to position off the side of the card, while the main image was overflowed?
How'd you style the after effect of the image with the darkened color?
I attempted to use ::after
, and that failed.
Any help is appreciated, thanks!
Submitted
Submitted
Hi all, feedback is appreciated.
I struggled with the responsiveness as the viewport width increased, especially for tablet -> desktop sizes.
.content
, and the .icons
.How would you seamlessly and efficiently do the desktop design?
Submitted
Submitted
Submitted
Submitted