Nothing specifically, but any feedback on improving the code or the use of tailwindcss is appreciated.
Would like to know how to position the background image with an offset on the top right of a card.
Need help with the transitions, making the scale on hover more smooth.
Trying to get the the project to look just like the design. Also I uploaded all the files so that I can get help using tailwind correctly. Would love to hear of ways to be more efficient with tailwind. Any tips or tricks are appreciated.
Small project so not a lot there. But any suggestions are welcome, especially concerning my implementation of tailwind.
it feels good knowing little now.
What challenges did you encounter, and how did you overcome them?not really, but hope to get comment that will call my attention towards obvious challenges i have overlooked at.
Congratulations on completing this challenge. Your project looks brilliant. I like the color palate and that you personalized it with your own picture. Your component is responsive, and looks great at desktop and mobile version.
I do have one suggestion. You need a hover state for your buttons. Try this:
.name:hover {
background-color: wheat;
cursor: pointer;
}
Hope this helps.
that is my first time use figma designs
What challenges did you encounter, and how did you overcome them?extract data from figma files and i have to search on youtube
What specific areas of your project would you like help with?that is my first challange,I would like to receive feedback to improve myself to be able to have my first job as frontend developer
Congratulations on completing this challenge. Your component looks great. On the desktop version, the component is centered nicely. However, on the mobile view, the bottom of the component is hidden from view, requiring some vertical scrolling, which is annoying. Most people use their phones to surf the web, which is why mobile-first design is preferred.
The problem is you used margins and transform-Y without adding media queries to account for different screen sizes. A better way to handle this is to use flex display on the containing element.
Remove the margins and transform from div-container. Then add to the body element
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
Now your component centers correctly at all screen sizes. Hope this helps. Keep challenging yourself and getting better.
proud of how cool i am
What challenges did you encounter, and how did you overcome them?dw about it
What specific areas of your project would you like help with?how do you center a div fr
Congratulations on completing this challenge. Your component looks awesome.
In order to center the component, you apply flex display on the body element and use align-items and justify-content to center the component. This article will explain it all.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
Don't forget to set the min-height. Hope this helps
Congratulations on completing this challenge.
I have a few suggestions. First, there is a glitch in the html. You have a <h3>, <br>, and text all wrapped in a <p>. This would be problematic if you ever need to update or maintain this page because the <p> styles will interfere with the <h3> style. Also, using a <br> to separate elements on a page is not good practice. It is better to use something else, such as margin-bottom.
Next, the component needs to be centered on the page. There are several ways to do this; this article will help.
Good luck with your future projects.
Congratulations on completing this challenge. Looks pixel perfect and is very responsive.
What I liked best about your project is how clean and organized it is. The code is simple and readable. File structure will make it super easy to maintain.
Look forward to see what you do next.
Congratulations on completing this challenge. You made very good use of flexbox.
However, the content breaks out of the container; the image overlaps the top and the paragraph overlaps the bottom. This is easily fixed by removing the height: 400px; from the .qr-img-card <div>. If you remove the fixed height the <div> will automatically adjust to contain all of the content with no overlap.
Also, the content is flush against the edges of the .qr-img-card; you need to add padding: 15px to the card div.
Hope this helps. Keep on coding!
