Hugo Del Miranda ๐ธโข 180
@hugodelmiranda
Submitted
Pirate
@ima9gh
All comments
- Pirateโข 170
@ima9gh
Posted
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โข 10
@snigdha-sukun
Submitted
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
Pirateโข 170@ima9gh
Posted
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
@vinirangel
Submitted
What specific areas of your project would you like help with?
I would like to know the proper semantic html solution.
Pirateโข 170@ima9gh
Posted
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,660
@0xabdulkhaliq
Submitted
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..โจ
Pirateโข 170@ima9gh
Posted
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 - gayathri-v1โข 170
@gayathri-v1
Submitted
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
Pirateโข 170@ima9gh
Posted
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 - ABโข 60
@rvupmo33
Submitted
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!
Pirateโข 170@ima9gh
Posted
This comment was deleted
0 - Amirul Afanndyโข 30
@amirulafanndy
Submitted
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.
Pirateโข 170@ima9gh
Posted
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
