All comments

• 

  Hugo Del Miranda 🛸•190

  @hugodelmirandaSubmitted 3 months ago

  

  Responsive using flex box

  1

  20
  

  Pirate•170

  @ima9ghPosted 3 months ago

  Hello there!

  𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

  𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

  I have a suggestion to improve your challenge!

  ●To set the correct color of the circles, change the 𝗖𝗦𝗦 code:

   .contain time ul li::marker{
   color: hsl(332, 51%, 32%);
   }
  

  You gave brown color to 𝗮𝗹𝗹 𝘁𝗵𝗲 𝗰𝗶𝗿𝗰𝗹𝗲𝘀 by selecting 𝘂𝗹 𝗹𝗶::𝗺𝗮𝗿𝗸𝗲𝗿!

  ●Also, change the font of the titles to: font-family: YoungSerif-Regular;

  Let me know if this comment was helpful.

  𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

  0
• 

  Snigdha Sukun•90

  @snigdha-sukunSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I’m proud of myself for creating and deploying my first live application. Although it’s a simple app, it was my first time doing this. I used online references to complete the solution, but next time, I plan to rely more on my own efforts. Throughout this process, I learned a lot about CSS and how to deploy using Vercel.

  What challenges did you encounter, and how did you overcome them?

  I encountered some difficulty while writing the CSS code, particularly in accurately positioning the QR element according to the design. I referred to a few CSS tutorial websites for syntax and values, and after some trial and error, I was able to get it right.

  What specific areas of your project would you like help with?

  CSS techniques

  

  QR Code

  1

  41
  

  Pirate•170

  @ima9ghPosted 3 months ago

  Hello there!

  𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

  𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

  I have a suggestion to improve your challenge!

  ●To move the card to the center of the page, change the 𝗖𝗦𝗦 code:

  body{ 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  box-sizing: border-box;
  }
  

  ●To correctly break the words in your 𝗤𝗿 𝗰𝗼𝗱𝗲:

  𝘄𝗼𝗿𝗱-𝗯𝗿𝗲𝗮𝗸 can be used to break words and make texts more similar to the main challenge.

  𝗜𝗳 𝘁𝗵𝗲𝘆 𝗮𝗿𝗲 𝗻𝗼𝘁 𝗯𝗿𝗼𝗸𝗲𝗻 𝗮𝘀 𝘆𝗼𝘂 𝘄𝗮𝗻𝘁, 𝗷𝘂𝘀𝘁 𝗿𝗲𝗱𝘂𝗰𝗲 𝘁𝗵𝗲 𝘄𝗶𝗱𝘁𝗵 𝗼𝗳 𝘁𝗵𝗮𝘁 𝗶𝘁𝗲𝗺!

  Let me know if this comment was helpful.

  𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

  Marked as helpful

  1
• 

  vinirangel•40

  @vinirangelSubmitted 3 months ago

  What specific areas of your project would you like help with?

  I would like to know the proper semantic html solution.

  

  Social Links Profile with interactive buttons

  2

  10
  

  Pirate•170

  @ima9ghPosted 3 months ago

  Hello there!

  𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

  𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

  I have a suggestion to improve your challenge!

  ●To move the card to the center of the page, change the 𝗖𝗦𝗦 code:

  body{ 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  box-sizing: border-box;
  }
  

  Why didn't you change the background color and li text on hover?

  ●To fix this defect, use the following codes:

  li:hover{
  background-color: hsl(75, 94%, 57%);
  color: black;
  }
  

  Let me know if this comment was helpful.

  𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqSubmitted almost 2 years ago

  Hello everyone..👨‍💻

  • This was an excellent challenge to train and improve my knowledge with grid & flex layout.
  • This helps me to practice about turning designs into actual website
  • I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!

  Feel free to leave comments on how I can improve my code.

  Peace be upon you..✨

  

  NFT Preview card - Using CSS3's Grid & Flex

  2

  293
  

  Pirate•170

  @ima9ghPosted 3 months ago

  Hi please help me.

  What is the problem with my code, why doesn't it work? Although the opacity on hover is 1!

  The eye is the icon on the photo when hovering

  .NTF .eye{
  position: absolute;
  background-image: url(images/icon-view.svg) no-repeat center;
  background-color: var(--clrBGeye);
  width: 290px;
  height: 290px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 130px;
  border-radius: 5px;
  opacity: 0;
  }
  
  .NTF .eye :hover{
  opacity: 1;
   }
  

  : I haven't uploaded the challenge yet.

  1

  This comment has received 2 repliesShow
• 

  gayathri-v1•170

  @gayathri-v1Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  I was able to understand the media queries, learnt more on flex and grid.

  What challenges did you encounter, and how did you overcome them?

  while resizing the screen, the content in the container overlaps with other divs.I should use relative units instead of just px.

  What specific areas of your project would you like help with?

  nothing as such

  

  product preview card solution

  2

  30
  

  Pirate•170

  @ima9ghPosted 5 months ago

  Hello there!

  𝗖𝗼𝗻𝗴𝗿𝗮𝘁𝘂𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗼𝗻 𝗰𝗼𝗺𝗽𝗹𝗲𝘁𝗶𝗻𝗴 𝘁𝗵𝗲 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

  𝗬𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗹𝗼𝗼𝗸𝘀 𝗴𝗿𝗲𝗮𝘁.

  I have a suggestion to improve your challenge!

  ●To move the card to the center of the page, change the 𝗖𝗦𝗦 code:

  body{ 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  box-sizing: border-box;
  background-color: hsl(30, 38%, 92%);
  }
  

  ●To make it responsive from :

  You should find the size of fonts and other items in smaller sizes to avoid cluttering your project!

  𝗧𝗵𝗲𝘀𝗲 𝘀𝗶𝘇𝗲𝘀 𝗺𝗮𝘆 𝗯𝗲 𝘂𝘀𝗲𝗳𝘂𝗹 𝗳𝗼𝗿 𝘁𝗵𝗲 𝗵𝗲𝗶𝗴𝗵𝘁 𝗮𝗻𝗱 𝘄𝗶𝗱𝘁𝗵 𝗼𝗳 𝘆𝗼𝘂𝗿 𝗰𝗵𝗮𝗹𝗹𝗲𝗻𝗴𝗲.

  @media screen and (max-width: 400px){ 
   .container{
   height:300px;
  }     
  picture .image{
      height: 300px;
      width: 170px;
  }
  }
  
  @media (min-width: 500px){
  .container{
      height:340px;
  }
  picture .image{
      height: 340px;
      width: 200px;
  } 
  }
  

  Let me know if this comment was helpful.

  𝗚𝗼𝗼𝗱 𝗹𝘂𝗰𝗸 𝗰𝗼𝗱𝗶𝗻𝗴!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  AB•60

  @rvupmo33Submitted 5 months ago

  What are you most proud of, and what would you do differently next time?

  Being able to make something somewhat similar despite not using the figma file.

  What challenges did you encounter, and how did you overcome them?

  Media queries. However, I was able to understand them after watching a tutorial.

  What specific areas of your project would you like help with?

  Open to any and all feedback!

  

  Social links profile main

  1

  10
  

  Pirate•170

  @ima9ghPosted 5 months ago

  This comment was deleted 3 months ago

  0

  This comment has received 1 replyShow
• 

  Amirul Afanndy•30

  @amirulafanndySubmitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  I am using basic CSS for styling. I will try to use CSS framework like Bootstrap or TailwindCSS next time.

  What challenges did you encounter, and how did you overcome them?

  I got problem with centering the item in the div elements tag. I learn how to use CSS flexbox property to solve this.

  What specific areas of your project would you like help with?

  Look at my CSS structure if it is written clean and structured or it is messed up.

  

  frontend mentor qrcode solution

  1

  40
  

  Pirate•170

  @ima9ghPosted 6 months ago

  Hello! Looks like you did it right and clean.

  You did not pay attention to the font size of the title and breaking the words in the lines!

  Good luck.

  0

  This comment has received 2 repliesShow