All solutions

This is the last pure HTML/CSS challenge before moving onto learning Javascript :). I used only grid for the layouts. I just coded up the two design layouts as best as I could. I also put a few scaling and brightness effects on the buttons. The main takeaways for me are that I need to revise my semantic HTML, I just find it a bit dull hahaha compared to the visual design work. Many thanks Steve

I challenged myself to use pure grid for everything on this project. I really learned a lot and certainly, it's easier for some layouts. Many thanks Steve

Mobile-first development of the two layouts. I found it very difficult to get the header background image to look like the design without editing the image as it wasn't deep enough. I mainly used flexbox, but for the footer I used grid, which saved so much time. Next time I think I will try and develop the next project with pure grid to improve my skills. I just did the responsive for 375px and 1000px upwards for now. Many thanks Steve

I actually took time to kind of plan the layout ahead of time instead of just coding. I used purely Flexbox for this challenge, although maybe the footer might have been easier in the grid. Let me know what you think. I need to revise the use of Semantic HTML, although at the moment I'm just concentrating on understanding the use of CSS.

Thanks Steve

I found this challenge quite difficult and taught me that I should plan the sections first before coding. The footer was particularly tricky. I just coded the two designs for their respective layouts.

Many thanks Steve

I found this challenge quite tricky, but really enjoyed it. I learnt a lot of new CSS, especially when working out how to style background gradients, the desktop chat box shape and progress bar for the storage component. Please let me know what you think. Kind regards Steve

I really enjoyed this challenge as it gave me the opportunity to use grid-template-areas for the desktop layout. As usual for, mobile-first :) Feedback is welcome.

Many thanks, Steve

Mobile-first approach. I used Flexbox for the desktop layout. Kind regards Steve

I developed this using a mobile-first methodology. I used CSS grid for the desktop layout. Please let me know your feedback King regards Steve

I really enjoyed this challenge. It was a great introduction to using more advanced absolute positioning and transformation techniques. I used flexbox for positioning all the elements inside the cards. As before I developed the site using a mobile-first methodology. Please let me know your feedback. Many thanks Steve

I used Flexbox for all the layouts. I appreciate any feedback you may have.

Kind regards Steve

This is my first crack at web design after doing some free online courses. I mainly used flexbox for alignment and centering. I found the main card design very straight forward to do, although I was stuck on the background circle images for hours.

At first, I embedded img tags in the HTML and positioned them relatively via CSS. But I found this created little scroll bars/space and made the images and site non-responsive, I couldn't figure out via this method how to make them size dynamically. So in the end, I used pseudo before and after elements on the main container and background code and that worked. Any suggestions would be much appreciated :) Many thanks Steve