Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Preview Page using HTML and CSS 2

Uche Ofatu 260

@Macnelson9

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

I encountered the challenge of adapting it for mobile screens. I worked on my HTML code by removing the header, paragraphs tags from the div containers I initially put them in and styled them accordingly.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hey, that's much better! Well done =) You even make it responsive via flex-wrap, cool =)

A couple semantic suggestions:

  • There should be only one h1 tag on the page.
  • Add a cursor: pointer to button tag.

Oh, and a little tip - you can use letter-spacing property for PERFUME text to move the letters apart. Sorry, I forgot to tell about it earlier, but your solution is good too =)

0

Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Thank you so much. Oh I didn't know about the semantics. I'll work on that. And also the cursor too, and a hover effect too, I guess lol. I'd like to connect off of here that's if you're interested. Also, I followed you on your GitHub.

0
Alex 3,130

@Alex-Archer-I

Posted

@Macnelson9

Hi! Do you have the same nick on the discord? I wrote you there a few days ago.

Anyway, if you want to ask something you can write here or there =)

0
Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Hey, I really don't know how discord works but I have an account there lol

0
Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I I texted you back

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord