I found difficulties when adding the background images. If you have any suggestions
lisztomania23
@lisztomania23All comments
- @AbdoB3Submitted about 1 year ago@lisztomania23Posted about 1 year ago
Could you please provide a walkthrough on how to run this locally?
0 - @devdavix2Submitted about 1 year ago@lisztomania23Posted about 1 year ago
Hello Obi, I looked at your code and saw that you centered the card by using
margin
. It is not good practice. Instead, you could have achieved it by giving thebody
aheight
of100vh
or100svh
anddisplay: flex;
flex-direction: column;
justify-content: center;
align-items: center;
and also for correctly positioning the background, instead of using:
background-position: left top, right bottom; background-size: 700px, 1000px; background-position-x: -10px, 600px; background-position-y: -350px, 300px;
you could have put
background-position: right 50vw bottom 45vh, left 50vw top 40vh;
Congrats on completing the challenge! Happy coding!
Ping me if you want me to make a few changes and create a PR.
0 - @franklynxchillSubmitted about 1 year ago
Hello, Frontend Mentor community 👋,
I’m Franklynxchill and this is my solution for the Huddle landing page with alternating feature blocks. 🚀 Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 😊✌️
@lisztomania23Posted about 1 year agoI see you have posted quite a few solutions in the past few days. That's impressive! Though, why the hurry? This page is not very responsive. I'll check and suggest some changes when I get some time.
0 - @beowulf1958Submitted about 1 year ago
Anyone know why the jpg isn't switching correctly? And why are the dimensions off?
@lisztomania23Posted about 1 year agoHello, I made a few tweaks and created a pull request to your GitHub repo; merge it if you like.
1 - @beowulf1958Submitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
learning to use Sass variables
What challenges did you encounter, and how did you overcome them?I had a bit of trouble with centering the card at first; check on solutions to other challenges by other people and was able to finally get it centered
What specific areas of your project would you like help with?my h1 breaks the line differently than the design jpg
@lisztomania23Posted about 1 year agoHello, I made a few tweaks and created a pull request to your GitHub repo; merge it if you like.
1 - @Mahmoud-770Submitted about 1 year ago@lisztomania23Posted about 1 year ago
Hello, I have submitted a pull request to your GitHub repository with some adjustments to your code, ensuring responsiveness. Additionally, I have included support for mobile devices. See the changes I made and merge it if you like.
Marked as helpful1 - @vitvikiSubmitted about 1 year ago@lisztomania23Posted about 1 year ago
Hi, I made a few tweaks and created a pull request on your GitHub repo, give any feedback there and merge it if you like.
Marked as helpful0 - @KofiFlokiSubmitted about 1 year ago
As a beginner, I struggled knowing the most appropriate tags to use exactly to make my code look cleaner and readable. Took me a long while. I also struggled being able to attach some of the css elements.
I will want to know how developers are able to bring certain ideas in life using HTML. e.g. with Figma, I could have easily drawn the rectangles and put the bar code image on it. Would have been easier to make the corners of the box curved. I struggled figuring out what to do to generate that box and how to style it. What is the trick?
@lisztomania23Posted about 1 year agoKudos! 🎉 on completing your first challenge. Your code looks clean. Just decrease the width a little bit, add padding to the bottom, and you'll have a pixel-perfect version of what you've given to make. Just keep following what challenges ask. Look for solutions in the community, experiment with their code, look for stuff, create some stuff, implement it, and yeah, that's the trick: the more you know, the slower you're going to do things. 👍🚀
0 - @ZENSE-THAISubmitted about 1 year ago@lisztomania23Posted about 1 year ago
Congratulations on completing your first challenge! 🎉🎉
Your HTML and CSS code looks good but, I have few suggestions:
-
It is a good practice to use HTML semantics, like wrapping the main content of the body in the
main
tag instead of just usingdiv
. -
And, use
rem
units for text instead ofpx
.
Reference:
Why You Should Use rem to Set Font Size in CSS
I've made pull request on your GitHub repository with few tweaks, merge it if you like.
Happy coding! 😊🚀
Marked as helpful0 -
- @molLbachSubmitted about 1 year ago
The code is easy overall, it's obviously targeted at people who are learning css/html, the only difficulty lies on centering the div and playing with the box model to make things look like the design given.
@lisztomania23Posted about 1 year agoHello, I've made a pull request with a few changes to your Github repo, merge it if you like.
0 - @tajwararikSubmitted about 1 year ago
Feedback is appreciated.
@lisztomania23Posted about 1 year agoYou've missed adding
cursor: pointer
in your hover effects. Besides that, everything looks good and seems perfect 👌. However, I suggest usingrem
instead ofem
orclamp()
for more fluid responsiveness. Check out my solutions and provide feedback if you'd like. Happy coding! 😊🚀0 - @abhay0480-engSubmitted about 1 year ago@lisztomania23Posted about 1 year ago
Your background doesn't appear the same as the one provided. Remove the Tailwind utility and incorporate the following into your body style:
background: hsl(185, 75%, 39%); background-image: url('./images/bg-pattern-top.svg'), url('./images/bg-pattern-bottom.svg'); background-position: calc(50% - 510px) calc(50% - 390px), calc(50% + 470px) calc(50% + 500px); background-repeat: no-repeat;
Also, you didn't use the 'Kumbh Sans' font in your code. Anyway your code looks nice, and it was great to take a look at your code and your Tailwind implementation.
Marked as helpful1