All comments

• 

  SheikBazith• 240

  @SheikBazith

  Submitted 8 months ago

  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.

  

  Profile-Card

  1

  60

  

  Abdulrahman Zaki• 330

  @aazs-edu

  Posted 8 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

  This comment has received 1 replyShow
• 

  Dwayne N Rodrigues• 140

  @drod109

  Submitted 8 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.

  

  HTML | CSS | Flexbox

  3

  130

  

  Abdulrahman Zaki• 330

  @aazs-edu

  Posted 8 months ago

  Hello 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 helpful

  2

  This comment has received 1 replyShow
• 

  Dwayne N Rodrigues• 140

  @drod109

  Submitted 9 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.

  

  HTML | CSS | Flexbox | JavaScript

  1

  80

  

  Abdulrahman Zaki• 330

  @aazs-edu

  Posted 9 months ago

  Perfect. I liked that the submit button does not work until a rating is selected.

  Marked as helpful

  1
• 

  Dwayne N Rodrigues• 140

  @drod109

  Submitted 9 months ago

  

  Responsive Product Preview Card using Flexbox

  1

  60

  

  Abdulrahman Zaki• 330

  @aazs-edu

  Posted 9 months ago

  Awesome. Just add cursor: pointer; on button.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Hunter Blake• 40

  @hdblake

  Submitted 9 months ago

  

  QR Code Challenge

  1

  40

  

  Abdulrahman Zaki• 330

  @aazs-edu

  Posted 9 months ago

  You can replace .normal-text {margin-right: 8px;} with .normal-text {padding: 0 4px;}

  1
• 

  Natacode• 10

  @devBayu

  Submitted 9 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.

  

  QR code component

  3

  60

  

  Abdulrahman Zaki• 330

  @aazs-edu

  Posted 9 months ago

  Your 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:

  1. change .container {background-color: aqua;} to .container {hsl(212, 45%, 89%);}
  2. change .title_card {font-size: 1.2rem;} to .title_card {font-size: 1.375rem;}

  Overall, great work!

  Marked as helpful

  0