All solutions

Hello everyone, this is my solution to the feature cards section challenge.

Any and every feedback is appreciated. Thank you.

Hello, everybody!

This is my solution to the Social Proof section challenge! This time around, I used a popular JavaScript library known as React.js to map some of the repeated elements using external data files that exported arrays of objects, instead of copy pasting the same HTML over and over.

I hope you won't mind the fact that it isn't pixel perfect (because I do not have access to the pro member design files for exact measurements), but I did try my best to capture the essence of the given design from the starter photos.

As always, any and every feedback is appreciated and much needed. That's all I have to say, thank you very much for stopping by my solution. Have an amazing day!

Hello, everyone! This is my solution to the Huddle landing page hero section.

I wasn't able to reproduce the design given as a photo 100%, but I tried my best. There are no fancy animations this time around, given that it's my first time making a hero section for a Frontend Mentor challenge, so I want to stick to the bare minimum required, to keep it simple.

All and any feedback is appreciated. Thank you in advance, and see you in the next challenge!

Hello, everyone!

This is my solution to the product preview card component!

This time around, I changed some things about the general presentation of my project in the README.md profile of the repository, by organizing the already existing sections, while also including some new ones.

Some techniques I utilized in this project:

• the picture tag, for responsive images without style sheets
• cleaner SCSS according to the Sass guidelines
• mobile-first approach

The only question I have this time is if anyone knows a good way of 'eyeing' the paddings and margins, when you don't have access to the design file.

That's all, thank you to anyone who decides to reach out and give feedback. Have a wonderful day!

Hello, everyone!

This is my solution to the Single Price Grid component, built with semantic HTML and responsive SCSS.

Some things that I used in this project:

• SCSS maps
• Multiple CSS animations
• Mobile-first approach

I don't have any specific questions this time around, besides requesting some feedback on my SCSS (to make it less repetitive / more organized).

(I would also like to apologize if my margins or padding is a bit off, that's because I'm not currently a pro member so I do not have access to the specific values available in the design files.)

That's all, thank you if you decide to preview my project, and have an amazing day!

Hello, everyone!

This is my solution to the profile card component challenge. It only misses one single thing, the background patterns, and that is because I couldn't figure out how to make them scale up and down when the window shrinks in width (to make them responsive).

I guess that's the only question I have this time around haha, so thank you to anyone who decides to respond this time again. Have an amazing day!!

Hey folks!

This time around I don't really have any questions about the project I just finished, so please do enjoy my solution.

( Some things I utilized for this challenge:

• SCSS (Syntactically awesome style sheets)
• SCSS Partials
• Animations (@keyframes)
• Responsive layout (@media) )

Hello, everyone!

Glad to be here again. This time I took my workflow a step further and introduced my first CSS pre-processor framework, SCSS, also known as Sass.

I am looking forward to all of your feedback, and the only question that's pressing me about this project is if I nailed the file structure for the new and improved SCSS stylesheets (since this is my first time using it, haha).

Thank you in advance to anyone who decides to respond! Have an amazing day!!

Hello, everyone!

I have a really small question regarding the animations I used in this project. (Just for some context - this is the first time I've ever used animations for something in HTML and CSS.) Is there any way to make the animations 'stagger' a bit? Like complete the first set for the first card, wait a few milliseconds and then move on to the next, etc?

If anyone knows the answers and decides to respond, thank you in advance! I hope you all have an amazing day / night.

Hello, all! This is my solution to the NFT Preview Card Component challenge.

The only question I have this time around is this: Was there any other way to make the eye icon appear on the preview image while hovering without using JavaScript?

Thank you, if anyone decides to respond. Have an amazing day!

Hello, all!

I would like to know more about how fonts work and how I could've imported them easier rather than creating a font-face declaration for each and every weight of that specific font family.

Other than that, I think this project was relatively alright, since I learned how to use data attributes and make use of the CSS cascade.

Hello!

I would like to know how I could have made the heading and the paragraph of the card shrink down in width without having to use margin-inline inside of the card.

Thanks in advance!