I got stuck with the background image where 2 circles are on top and bottom. Any help on how to achieve it? Thanks in advance.
Abdulrahman Zaki
@aazs-eduAll comments
- @SheikBazithSubmitted 11 months ago@aazs-eduPosted 11 months ago
Here is background pattern code.
background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh;
I hope you find this helpful. thank you.
1 - @drod109Submitted 11 months ago
Hi all,
Here is my submission for the NFT Preview Card Challenge. I attempt to really focus on code that is efficient and highly maintainable by leveraging increased
:root
variable declaration.I would appreciate any all feedback, thank you in advance.
@aazs-eduPosted 11 months agoHello Dwayne, Great as usual, my friend. Keep up the good work.
- HTML:
I have identified a small issue. There are 2 missing closing </div> tags right before </main>.
Here is the updated code: Just add
</div> </div>
before</main>
.- CSS:
In the :root, you have a typo in the variable --spacing-small. You wrote 0.5erm instead of 0.5rem.
Here is the updated code:
--spacing-small: 0.5rem;
I hope you find this helpful. Thanks.
Marked as helpful2 - @drod109Submitted 11 months ago
The only area I found challenging was trying to match the gradient pattern and the card size with just the design images provided but it was fun.
@aazs-eduPosted 11 months agoPerfect. I liked that the submit button does not work until a rating is selected.
Marked as helpful1 - @drod109Submitted 11 months ago@aazs-eduPosted 11 months ago
Awesome. Just add
cursor: pointer;
on button.Marked as helpful1 - @hdblakeSubmitted 11 months ago@aazs-eduPosted 11 months ago
You can replace
.normal-text {margin-right: 8px;}
with.normal-text {padding: 0 4px;}
1 - @devBayuSubmitted 11 months ago
What did you find difficult while building the project ? Answer : For this challenge, I am very aware that my CSS skills are not yet proficient, leading to difficulties with syntax and usage.
Which areas of your code are you unsure of ? Answer : I am confident in my code, but in my mind, I feel like I've created too much code, so there should be some code that can be refactored and improved.
Do you have any questions about best practices ? Answer : Certainly, how to apply CSS correctly to the code so that it is easy to read and the result is a very modern CSS.
@aazs-eduPosted 11 months agoYour HTML and CSS code looks well-structured and clean, and it appears that you've put effort into creating a responsive design.
- Suggestions for Improvement:
- change
.container {background-color: aqua;}
to.container {hsl(212, 45%, 89%);}
- change
.title_card {font-size: 1.2rem;}
to.title_card {font-size: 1.375rem;}
Overall, great work!
Marked as helpful0