Skip to content
OverviewSolutions
3
Comments
23
lisztomania23
@lisztomania23

All comments

  • lisztomania23•170
    @lisztomania23Posted 12 months ago

    Could you please provide a walkthrough on how to run this locally?

    0
  • lisztomania23•170
    @lisztomania23Posted 12 months 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 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.

    0
  • lisztomania23•170
    @lisztomania23Posted 12 months ago

    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.

    0
  • lisztomania23•170
    @lisztomania23Posted 12 months ago

    Hello, I made a few tweaks and created a pull request to your GitHub repo; merge it if you like.

    1
  • beowulf1958•1,450
    @beowulf1958Submitted 12 months ago
    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

    QR Code version 2 semantic HTML

    2
    lisztomania23•170
    @lisztomania23Posted 12 months ago

    Hello, I made a few tweaks and created a pull request to your GitHub repo; merge it if you like.

    1
  • lisztomania23•170
    @lisztomania23Posted 12 months 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 helpful
    1
  • lisztomania23•170
    @lisztomania23Posted 12 months 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 helpful
    0
  • Jeremiah Martey•10
    @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?

    HTML, CSS and watching tutorials on how to style the page

    1
    lisztomania23•170
    @lisztomania23Posted about 1 year ago

    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. 👍🚀

    0
  • lisztomania23•170
    @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 using div.

    • And, use rem units for text instead of px.

    Reference:

    Semantic HTML - web.dev

    Semantic HTML

    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
    0
  • molLbach•30
    @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.

    QR code css problem solution

    3
    lisztomania23•170
    @lisztomania23Posted about 1 year ago

    Hello, I've made a pull request with a few changes to your Github repo, merge it if you like.

    0
  • lisztomania23•170
    @lisztomania23Posted about 1 year ago

    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! 😊🚀

    0
  • lisztomania23•170
    @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 helpful
    1