I was really unsure of the shadow. I also couldn't figure out a way to push it down the page without margin-top since there were no other elements. Any tips there? Any best practice mistakes I made?
Is there a way for me to deploy to my custom url with a directory at the end.
ex. I have vash.codes If I want to deploy to vash.codes/qr-code any tips on doing that?
Hi Vashinator, congratulations on completing a challenge 🎉 it's look good so far in desktop and mobile.
The point you need to fix on the project is when the page is rendering on tablet device
first my suggestion on placing a object on the center of the page try using
body{
height:100vh;
}
.container{
display: gird;
place-content: center;
}
and you can using 'container' class as a wrapper for your content BTW another suggestion is I need you try to checking on a padding and margin of the content of the card.
Keep Practice , Keep Learning
Hi Lira, congratulations on completing first challenge 🎉 it's look good so far in desktop and mobile.
By the way my suggestion for rating section is to custom a input radio ( or checkbox) for that element instead of using a button element. check out how to create custom input radio ( or checkbox) here you can adapt that on Tailwind CSS too.
and may be you can check out my solution too here
Keep Practice , Keep Learning
Hi fggdfg , congratulations on completing the challenge 🎉
So at first I want to recommend you to try to rewriting on Card class first
it using so many margin , instead of you using margin you can try learning on display:flex or display:grid it will help you centering a content (or a card in this project) you can learn it here
flex and grid
and about hovering on image it will should to having a overlay effect on the image you can learning how to create overlay effect here
last but not least you can change cursor to pointer on hover at text or element by using
ELEMENT:hover{ cursor: pointer; }
you can change so many cursor style, you can learn about it here
and may be you can check out my solution too here
Keep Practice , Keep Learning
Hi Carlos, congratulations on completing the challenge 🎉 it's look good so far in desktop but it not responsive for mobile , may be you can checking out "Media Query" here to made a width of card responsive on mobile.
Also my suggestion for
<button> <div class="btn"> <img src="images/icon-cart.svg" alt="" class="cart-img"> <p class="p-btn">Add to cart</p> </div> </button>
try to don't using any html tag in button may be you can try to using ::before in CSS to made a cart icon appear before a button text [here is a information for ::before (:before)] (https://developer.mozilla.org/en-US/docs/Web/CSS/::before)
and may be you can check out my solution too here
Keep Practice , Keep Learning
My first challenge using JS , feedback will be helpful
Hi Itaro, congratulations on completing the challenge 🎉 it's look good so far in desktop but in mobile it not so responsive and look not well may be you can checking out "Media Query" here to made a width of card responsive on mobile.
Also my suggestion for rating section is to custom a input radio ( or checkbox) for that element instead of using a button element. check out how to create custom input radio ( or checkbox) here
and may be you can check out my solution too here
This is my first project. I couldn't handle changing image properties with using hover. Maybe some useful comments help me about responsive resolution.
You doing great so far I think you can try learning on "display: flex" and how to using it and learning about create a overlay image I will leave the link to W3 here https://www.w3schools.com/HOWTO/howto_css_image_overlay_icon.asp
and may be you can check out my solution too https://www.frontendmentor.io/solutions/nftpreviewcardreact-0LX74FpMCP
