NFT Preview Card Component Using Flexbox

Hey!! Congratulations for completing this challenge.. .

Here are my suggestions..

1-Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h1 instead h2 and change font-size if you want .. This should fix most of your accessibility issues

--------------------------------- And To make code more semantic and readable ----------------------------------

1- Use <figure> instead <div class="card"> to make code more semantic and understandable for e-reader

2- to center Card in the page use this code :

/*it is the container and remove padding in the body flex-box solve all problems*/
body {margin :0;display:flex;flex-direction:column; min-height:100vh}

/*it is a child and we make flex-grow:1 to distribute space-equally in top and bottom*/
main{display:flex;place-items:center;place-content:center;flex-grow:1}

/*to make identical css design with  (div.card)or figure you should use box-shadow like this with colors in style-guide but I put colors in variables  */
:root {
    --main-bg-color: hsl(217, 54%, 11%);
    --card-bg-color: hsl(216, 50%, 16%);
    --dark-blue-line: hsl(215, 32%, 27%);
    --white-color: hsl(0, 0%, 100%);
    --primary-color-soft-blue: hsl(215, 51%, 70%);
    --primary-color-cyan: hsl(178, 100%, 50%);
}
figure{box-shadow: 0px 20px 2px 14px var(--dark-shadow), 0px 24px 30px 33px var(--light-shadow)};

/*you can make it in this challenge to get identical design but don't make it in really site you work on as semantic layout should contain header,main,nav,footer,etc. */
footer{display:none;margin:0}

Regardless you did amazing... hope you find this useful... Happy coding and nice day :-)!!!

Very Nice