All solutions

Any feedback with respect to the use of CSS Grids and SCSS would be appreciated.

I'm still struggling with how to go about organizing my SCSS files; any recommendations for front-end architecture would be appreciated!

Hi, I implemented CSS Grid in the following way:

1. Designed for the Mobile first as per design requirements.
2. In between the Mobile and the Desktop design I add the following code: grid-template-columns: repeat(auto-fit, minmax(327px, 0.75fr)) so as to adapt to the screen viewport width.
3. Designed for the Desktop as per design requirements; placing the grid items explicitly and then using the CSS transform property to achieve the desired look.

Please let me know, if my approach was correct! Thanks in advance!

The chanllenge was particularly difficult - specially when it came to layout of the images.

Used transform: translateX(); with Flexbox and GRID in trying to control the layout of the images only.

Add some basic CSS transitions for the buttons.

Let me know how the site feels in terms of fluidity and responsiveness and if there's anything I overlooked.

Thanks in advance!

Hi, Built a responsive landing page for all screen sizes. I used a new CSS property:

• background-attachment: fixed; to fix the background image and allow the content the scroll over it for a nice effect for viewport size to at most 1200px.

Also used a simple regex for the email validation.

I'm interested to know if there's a different implementation to get the image behind the content? I used background-image to achieve the desired design.

Any other feedback on how I can improve or if I missed out anything in the design would be greatly appreciated!

Thanks in advance!

Hi, Any recommendations are welcome!!!

Specifically with my responsiveness of the project and if everything is centered correctly and if it looks and feel good!

Thanks in advance!!!

In the mobile design I've wrapped my images in a <figure> tag and applied a background-color to the tag. The reason is the use of the "mix-blend-mode: multiply" in CSS to the <img> tag to obtain the overlay effect, since the <img> tag will use the parent's container background-color to achieve this effect.

However, you'll notice that the <figure> height is much taller than the actual image, and I get the horizontal pink/purple line.

How to I overcome this?

Thanks in advance!

Any feedback welcomed!

Especially with regards to responsiveness of the site.

Thanks in advance!

Any feedback welcomed!

Specifically on the responsive side.

Thanks in advance!

Any comments and suggestions are welcome!

Any specific comments on the JS code would be appreciated; since I've just started learning to code in JS, any refactoring suggestions are welcome.

Also, how do you like the responsiveness of the site?

Thanks in advance!

Hi, Any feedback is appreciated! Also, for the Kindle Fire Tablet had to add a "background: repeat-y" since the bottom was just showing the violet colour, which didn't flow well.

Also, added a very basic transition on the "Register" button to highlight when the end-user is signing up for the service.

Thanks in advance!

This was a definite challenge!

Any feedback is appreciated.

Any ideas on how to set the layout for the iPad and other tablets?

Thanks in advance!!!

Hi, Would love to get feedback on my Grid implementation and CSS stylings.

Also, HTML structuring of the document flow and any semantics tags that can be used.

How do I get a box-shadow around the content? Do I need to wrap my content in another <div> element and add the box-shadow to that element?

Thanks in advance!

Hi, Thanks for checking my projects.

Kindly provide any constructive feedback on the responsive-ness of the website: from 375px (mobile) right up to 1920px (widescreen).

Did I use CSS Grids and Flexbox correctly? Since, I just learned the technologies.

Also, does my HTMl need any restructing? Or refactoring of my CSS code?

Your help is highly appreciated! Thanks in advance!