All solutions

Enjoyed the challenge

Made it responsive even on outside Galaxy Fold Screen

Created everything with CSS only

I had problems with placing the pointed shape tip on the tooltip component.

Hello guys,

This is my sixth challenge.

There was a time gap between when I wrote the HTML and when I wrote the CSS so I lost track of how I initially meant to structure it. The code is not as DRY as I would like; there are a lot of unused IDs and repeated code, but the functionality is there -- everything works as it should.

Feel free to leave a comment. Any kind of feedback is highly welcome.

Hello Guys,

I had a lot of fun with this one. Frontend Mentor does not provide designs for tablets so I used a max-width of 1000px for the media query. I found this to be the best design for tablets, landscape, and smartphone screens.

However, I am still struggling to find the most suitable method for SVG styling. The logo, for instance, is a different size in the header and footer. I thought I could use CSS to change the viewBox and viewport heights and widths, but I was unable to do so. I had to place the footer SVG inline in HTML and style it there.

I also was unable to change the fill property of SVG social icons on hover or active states. I know I could have used Font Awesome to do this instead, but I wanted to challenge myself.

I would appreciate a better method than the one I have used for styling SVGs in CSS and HTML. I wish to make the code as optimized as possible.

Thank you.

I have enjoyed this project the most so far because I believe it best challenges my CSS and HTML skill levels.

However, I have never come across SVGs in tutorials and my previous practice projects.

In this project, I struggled with applying the z-index property to the background quotation marks, and I could hardly find an elaborate explanation online about SVGs, why they are important, and how to use them.

I will be highly appreciative of any insight and online resources regarding the same. Thank you :-)

I opted to use 600px instead of 365px as the max-width for smaller screens. I did this because smartphones have bigger screens these days. Am I mistaken? What is the best max-width to use when deploying media queries for smartphone screens?

I also struggled with matching the colors. I usually cannot tell certain colors apart.