Skip to content
OverviewSolutions
30
Comments
48
Dimitar Radev
@Mitko90

All comments

  • Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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
    1
  • Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    Hello, there

    I suggest you take a look at this video

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

    Happy coding

    0
  • Melvin Aguilar πŸ§‘πŸ»β€πŸ’»β€’61,140
    @MelvinAguilarSubmitted 11 months ago

    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    🎁 Features:

    • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. πŸ“Š
    • Progressive Web App (PWA) support. πŸ“±πŸŒ
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. πŸ’»

    πŸ› οΈ Built With:

    • TailwindCSS. 🎨
    • npm - prettier - prettier-plugin-tailwindcss. πŸ’»

    Thank you. 😊✌️

    Social proof section (Tailwind CSS 🎨)

    6
    Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    I just wanted to drop in and say:

    You are a master at perfection. πŸ™ŒοΈπŸ™ŒοΈπŸ™ŒοΈ

    1
  • amakura-411β€’60
    @amakura-411Submitted 11 months ago

    Greetings

    Hello there! πŸ‘‹πŸŒŸ

    Request

    Hey everyone from the Frontend Mentor community, could I ask for your help?

    I'm seeking a code review. Do you have any advice?

    Project Specification

    Currently, I'm working on3-column-preview-card-component-main.

    I welcome feedback from various perspectives.

    Any suggestions or ideas are greatly appreciated! πŸ› οΈ

    Points of Concern

    In relation to this project, I don't have any specific points of concern,

    but I'm open to any suggestions or ideas! πŸ€”

    Appreciation

    Your opinions and ideas are warmly welcomed!

    Thank you in advance for your contributions! πŸš€

    CSS γ‚°γƒͺγƒƒγƒ‰γ‚’δ½Ώη”¨γ—γŸγƒ¬γ‚Ήγƒγƒ³γ‚·γƒ–γƒ©γƒ³γƒ‡γ‚£γƒ³γ‚°γƒšγƒΌγ‚Έ

    1
    Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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
    1
  • Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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
    0
  • Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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

    1
  • DingiestSplashβ€’10
    @DingiestSplashSubmitted 11 months ago

    This was my first time using GitHub and working out how to actually end up with a live product was my biggest challenge. Still not entirely sure how the file system works even now. I was fairly confident using bootstrap as I have recently been learning about it and it was good practice.

    CSS Style Sheet with Bootstrap

    1
    Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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.

    0
  • nothandokosterβ€’30
    @nothandokosterSubmitted 11 months ago

    had difficult in differentiating between padding and margin

    qr-code

    1
    Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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.

    0
  • Cesarβ€’10
    @LasteplaySubmitted 11 months ago

    lol

    Basic

    2
    Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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

    0
  • Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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. 😎️

    0
  • Nickβ€’260
    @nn-code80Submitted 11 months ago

    Hey everyone, this is my first project. Any feedback to help me improve my code would be much appreciated. Thanks for the help!

    Blog Preview Card

    1
    Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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
    2
  • Dimitar Radevβ€’930
    @Mitko90Posted 11 months ago

    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

    0