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

Product Preview Card Component Main

Snow 100

@LuanS0

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


In this challenge, I learned practical fundamentals of flexbox and CSS styling. Another step of fundamental importance is the one related to semantic HTML, in order to make the code more readable.

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hey there,

your custom design in dark mode looks pretty cool! Great job with it. I'd suggest perhaps increasing the line-height for the paragraph a little more so that text lines do not appear too close to each other and have some breathing room. Also background color of the main container could be very slightly brighter in value so that it is more distinguishable from the page background.

Hope you find this feedback helpful!

Marked as helpful

1

Snow 100

@LuanS0

Posted

@visualdenniss

Thanks for the tips on the palette colors used in this project. For another project I'll be paying attention to how to use colors.

Thank you for participating and supporting me.

0
Klaudia 120

@klaudiapalubska

Posted

I must admit that your project looks really cool!

tml, body, div, article, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
    box-sizing: border-box;
}

But I think is better use * in that case

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
    box-sizing: border-box;
}

Marked as helpful

1

Snow 100

@LuanS0

Posted

@Sephiress

Hi there! 👋 Thanks for noting,

But this code about CSS Reset is a reference to Eric Meyer Reset conventional term to be used in projects in general, so it becomes a good practice to use them and not the simple use of the universal selector.

Any comments are welcome. 😁✅📈

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