Submitted over 2 years ago

Nft-preview-card-component challenge

Hannah O• 60

@hannahro15

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, any feedback would be much appreciated. I had a few problems lining up the icons next to the small text, above the footer/image at the bottom. I also didn't know how to do the straight line across above the footer, and the active states. Other than I think it is ok. Thanks.

Community feedback

Jennifer Boateng• 90

@jboat86

Posted over 2 years ago

Hello Hannah. Overall, good attempt. However, I'll note the following issues:

Solution on mobile view is missing the following features:

the horizontal line is not showing SVG icons beside the text in the flex layout is slightly are not aligned.

On Desktop view: Overall alignment needs to be adjusted, including the avatar image I would thus, suggest the following changes:

Best to put the "@import" link at the very top of the external CSS file rather than in the HTML style tag; makes code more neat and readable by others.

Rename "element-1&2" to something more meaningful e.g: equilibrium-image- I know it"s a bit longer but it's best to use names provided in the styling guide. This is to make the code again more readable.

The avatar image is missing the white border and the active state doesn't work.

Rename element-1&2 to something more meaningful like equilibrium-image for example (I understand it's a lot longer than your example, but makes code easier for someone else to understand-best to use names provided in the style guide). I know I've written so much here, but I hope this helps. Best of luck.

Marked as helpful

Biljana Kotevska• 130

@BiljanaKotev

Posted over 2 years ago

Can you link your code so i can look at it? When i try to view your code there's an error msg: This repository is empty.

Marked as helpful

Hannah O• 60

@hannahro15

Posted over 2 years ago

@BiljanaKotev Should work now.

Biljana Kotevska• 130

@BiljanaKotev

Posted over 2 years ago

@hannahro15 I updated some of the css to align your element 1 and 2 in the Flexbox:

body { background-color: hsl(217, 54%, 11%); }

.container { border: 250px; background-color: hsl(216, 50%, 16%); max-width: 260px; border-radius: 15px; max-height: 520px; margin: auto; margin-top: 100px; }

h2 { color: white; padding-left: 12px; text-align: justify; font-family:'Outfit'; font-size: 20px; }

p { color: hsl(215, 51%, 70%); margin-left: 10px; margin-top: 10px; padding-left: 5px; padding-right: 5px;

}

img { max-width: 240px; padding: 10px; border-radius: 15px; }

div { max-width: 375px; max-height: 400px; }

hr { padding: 10px; border-top: 3px solid #bbb; }

.flex-container { display: flex; justify-content: space-around; margin-left: 25px; margin-top: -10px; gap: 60px;

}

#text-1 { color: hsl(178, 100%, 50%); font-size: 15px; margin-left: 5px;

}

#text-2 { color: hsl(215, 51%, 70%); font-size: 15px; margin-top: 20px; }

.element-1 { padding-top: 16px; }

.element-2 { display: flex; padding-top: 15px; }

span { color: white; }

footer { color:hsl(215, 51%, 70%); text-align: center; }

.avatar { display: flex;

}

#avatar { height: 50px;

}

footer { margin-top: 20px; }

I also added the following to the svg: for the eth icon: margin-left: -10px margin-bottom: 21px

for the clock: margin-top:20px

for the line you can add the following html after the flexbox

<hr> then css:

hr { background-color: hsl(215, 32%, 27%); border: none; height: 1px; margin: 5px 10px; width: 90%; }

to make the links change color over hover ad an anchor element inside your h1 and p tags then you need to add a psuedo class of hover to your anchor element in css. Hope this helps!

Please log in to post a comment

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