Skip to content
OverviewSolutions
30
Comments
46
Dimitar Radev
@Mitko90

All comments

  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution

    It looks great.

    To your issue:

    The background of the circle needs to be a colour to transparent gradient. I looked at your code and you have

    .result-container{
  background: linear-gradient(var(--clr-primary-500), var(--clr-secondary-hsl-500));
}

    You need to switch your var(--clr-secondary-hsl-500) with a transparent colour, in your case that's var(--persian-blue) So your gradient should look like this:

    .result-container{
  background: linear-gradient(var(--clr-primary-500), var(--persian-blue));
}

    Honestly any colour with 0% opacity will work, I just looked at your custom properties and found this one. This should fix it.

    Hope I was helpful

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Hello, there

    I suggest you take a look at this video

    He explains everything in such a way that everybody can understand.

    Happy coding

  • Dimitar Radev•930
    @Mitko90

    I just wanted to drop in and say:

    You are a master at perfection. 🙌️🙌️🙌️

  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution.

    It looks great. Pixel perfect

    Maybe you can check some suggestions I have for you:

    • You used three times the <h1> heading. This heading should only be used once. Maybe change it to <h2> as it can be reused. Of course every page should have an h1 heading so I suggest adding a visually-hidden one to the page, so it doesn't generate an accessibility report.
    • Your buttons should direct the user to a different part or page of the site. So maybe switch the <button> with the <a> tag.

    I had the exact same mistakes when I did this challenge so I redid it with the changes. You can, if you want, check both of my submissions here and here.

    Above all the solution you submitted looks great.

    Happy coding.

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution. It looks very similar to the design.

    I have only one little thing to note:

    You have display: flex on the body, which is great, but then on your .card you have justify-self: center

    The justify-self does not have any effect here as the parent is set to flex. justify-self is used on items which parents have display: grid. You can delete it and nothing will change.

    Keep up the good work and Happy New Year 🎉️🎉️🎉️

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Your image is not loading because the path to it is incorrect. You need to rplace images/image-qr-code.png in your HTML with image-qr-code.png because your image is not located in images folder

  • Dimitar Radev•930
    @Mitko90

    I use app.netlify.com for my pages.

    There you can link it to github and deploy your repositories or you can drag and drop your site folder and you have a working page. It's easy. If you need further explaining or help, feel free to hit me up.

  • nothandokoster•30
    @nothandokoster

    qr-code

    #accessibility#angular#astro#backbone#bootstrap
    1
    Dimitar Radev•930
    @Mitko90

    Hello, nice solution

    You can read This article about what's the difference between padding and margin. In few words margin is the space outside the element, while padding is the space within the element.

    The article explains it better and with illustrations.

  • Cesar•10
    @Lasteplay

    Basic

    #accessibility
    2
    Dimitar Radev•930
    @Mitko90

    The gradient on the card needs different colours, as the left side of the card is the same colour as the background.

    I also don't like the lightblue under the qr code, maybe change that to something that matches your design better.

    Overall nice. I like the idea of the dark theme

  • Dimitar Radev•930
    @Mitko90

    I like your version of the image more than the design's. I don't know why but I like it. Something about the colour. 😎️

  • Dimitar Radev•930
    @Mitko90

    Hi there, nice solution.

    Maybe if you looked again at your container

    .container {
	max-width: 85%;
	background-color: var(--Yellow);
	margin: 200px auto 0;
	align-content: center;
	height: 800px;
}

    You don't need the max-width there to be percentage , also get rid of the align-content because it is used for grid containers so it does nothing here. I would also get rid of the height since the card inside will have its own height. The yellow background I would put on the body tag so the whole page will be yellow. Also on the body you can throw

    min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;

    This will center your card on the page

    Hope I was helpful

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Hi there,

    I like your solution.

    I can help you with your layout.

    You have a class .col in your CSS and there is align-items: centerin there.

    If you replace the align-items: center with justify-content: center, your first and last card will jump to the middle like it is in the design.

    Hope I was helpful

  • Dimitar Radev•930
    @Mitko90

    Hey there,

    It looks great.

    One thing I've noticed is that when I'm looking at it on my phone, the image doesn't load. My advice is to always check all your pages on your phone (not only browser's responsive mode).

    I can offer a solution to the image problem.

    There are a couple of ways to swap the images between screen sizes:

    • Using the picture tag in HTML

    You can set this in html file. It will look something like this

    <picture class="img">
      <source srcset="images/image-product-desktop.jpg" media="(min-width: 600px)">
      <img src="images/image-product-mobile.jpg" alt="">
</picture>

    This is how I've done it and you can, if you want, view my submission here.

    • Using the display property in CSS

    You can add both of your images in the html one after the other and in the CSS display one as block and one as none. Then switch them in the media queries.

    HTML

    <img src="images/image-product-desktop.jpg" alt="" class="desktop">
<img src="images/image-product-mobile.jpg" alt="" class="mobile">

    CSS

    .desktop{
    display: block;
}

.mobile{
    display: none;
}

@media{
    .desktop{
        display: none;
    }
    
   .mobile{
       .display: block; 
   }
}

    Hope I could help.

    Happy coding

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    It looks amazing.

    Almost pixel perfect

    Nicely done

  • Dimitar Radev•930
    @Mitko90

    Hey there, congrats onthe solution 🎉️

    It looks good

    Maybe I can suggest something

    • You don't need the poitioning here
    .cont{
    display: grid;
    place-items: center;
    position: relative;
    top: 50px;
}

    Do this instead

    body{
	display: grid;
	place-items: center;
	min-height: 100vh;
}

    and you card should be centered. So now you can remove completely the <div class="cont"> as you son't need it.

    • On your .child remove the height as it causes issues.

    • There is no need to give font-size on img as it is an image, it doesn't need a font size.

    • You can remove the font-family from the p as it is set in the .child class.

    • You can also remove all the position: relative top and right because all the text is aligned center so it shoud be ok.

    Hope you find this helpful.

    Keep up the good work and Happy coding 👍️

  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution. 👍️

    I have some suggestions regarding your questions and more.

    • There is no need for position: relative on this project.

    • In order to center the card to the screen, you can do this

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

    • There is no need for setting width and height to the body because it only messes it up in this case.

    • There is no need for adjusting to mobile size because the component is small enough to be perfectly visible on phone and computer. You can give the card a max-width of let's say 310px or so, and you should be fine.

    • Rely on margins to separate the text blocks, rather than positioning. Give the card a small padding and you will be on the right way.

    • Here is a link to my submission to this challenge, maybe you can look at my (or other users') code.

    Keep up the good work and happy coding. Hope I was helpful. 👍️

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Hi,

    Nice solution.

    We all have a lot to learn, and this is why we are here.

    I used this video for this challenge and it was tons of learning experience, then I tackled it on my own.

    Hope it helps

  • Dimitar Radev•930
    @Mitko90

    Hi, I really like your solution to this challenge.

    I use a 1440 lenovo ideapad and when I open your site, it gave me the mobile version.

    Maybe you can twitch a little your breakpoint.

    Keep up the good work.