@AbdoB3
Submitted
I found difficulties when adding the background images. If you have any suggestions
@lisztomania23
@AbdoB3
Submitted
I found difficulties when adding the background images. If you have any suggestions
@lisztomania23
Posted
Could you please provide a walkthrough on how to run this locally?
@devdavix2
Submitted
@lisztomania23
Posted
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 the body
a height
of 100vh
or 100svh
and display: 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.
@franklynxchill
Submitted
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. πβοΈ
@lisztomania23
Posted
I 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.
@beowulf1958
Submitted
Anyone know why the jpg isn't switching correctly? And why are the dimensions off?
@lisztomania23
Posted
Hello, I made a few tweaks and created a pull request to your GitHub repo; merge it if you like.
@beowulf1958
Submitted
What 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
@lisztomania23
Posted
Hello, I made a few tweaks and created a pull request to your GitHub repo; merge it if you like.
@Mahmoud-770
Submitted
@lisztomania23
Posted
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 helpful
@vitviki
Submitted
@lisztomania23
Posted
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 helpful
@KofiFloki
Submitted
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?
@lisztomania23
Posted
Kudos! π 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. ππ
@ZENSE-THAI
Submitted
@lisztomania23
Posted
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 using div
.
And, use rem
units for text instead of px
.
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 helpful
@molLbach
Submitted
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.
@lisztomania23
Posted
Hello, I've made a pull request with a few changes to your Github repo, merge it if you like.
@tajwararik
Submitted
Feedback is appreciated.
@lisztomania23
Posted
You've missed adding cursor: pointer
in your hover effects. Besides that, everything looks good and seems perfect π. However, I suggest using rem
instead of em
or clamp()
for more fluid responsiveness. Check out my solutions and provide feedback if you'd like. Happy coding! ππ
@abhay0480-eng
Submitted
@lisztomania23
Posted
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 helpful