Skip to content
OverviewSolutions
35
Comments
14
T.Praveen
@gwtpraveen

All comments

  • kellyc•140
    @kelly1801Submitted about 2 years ago

    Hi everyone,

    I would like to know if it's a good approach to hide the medium hero image in the desktop with display none, to add it again in the medium and small view, thank you.

    Meet landing page

    2
    T.Praveen•870
    @gwtpraveenPosted about 2 years ago

    Hey, congratulations on completing the challenge. I've noticed a problem in the footer background image. It repeated, so to fix that

    footer {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

    I hope this will help.

    Marked as helpful
    0
  • Khalil Nazari•220
    @khalilnazariSubmitted over 2 years ago

    Dear members,

    It is the second submission for this challenge because the first one had a few bugs which is removed in the solution. The code is improved based on the comment on the previous solution.

    Kindly comment on your idea about this submission.

    Thanks & regards,

    Khalil

    NFT preview card component

    2
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    Congratulation on completing the challenge.

    • In terms of accessibility issues simply wrap all your content between main tags.

    • Instead of an a tag, I recommend wrapping your img tag in a div tag.

        <div class="image-wrapper">
        <img class="ntf-img" src="./images/image-equilibrium.jpg" alt="">
    </div>

    Happy Coding!!

    0
  • T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    Your solution is fantastic, but I believe you should change the background-blend-mode to overlay to match the design.

    1
  • Andes Court•50
    @alcb1310Submitted over 2 years ago

    I couldn't make the images in the cards to show behind the blue background, would very mush appreciate if anyone can teach me how to

    Time Tracking Dashboard

    2
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    good job completing the challenge!

    to fix the issue,

        .card .data {
        position: relative;
        z-index: 4;
    }

    You do this because you set the z-index: 3 of the class icon and must set position relative because the z-index has no effect on the element if it is not positioned.

    i think this will help!

    Marked as helpful
    0
  • Andrew Saganda•50
    @asagandaSubmitted over 2 years ago

    Hello - I'd like feedback on how i could better vertically center the "per month" copy next to "$29" under "Monthly Subscription"? How have others written the html markup? I used a paragraph tag to contain that sentence but maybe i should use another tag instead Feedback is welcome Thanks

    Responsive price grid component built with html css flexbox

    5
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    hi Andrew Saganda, good job completing this challenge

    in terms of accessibility issues simply wrap all content between main tag and you should have one level one heading h1 tag

    keep up the good work...!

    0
  • T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    Hey good job completing this challenge

    Keep up the good work

    to prevent overflow on smaller screens set media query max-width greater than card's width like this

        @media screen and (max-width: 650px) {...}

    In terms of accessibility issues simply wrap all your content between main tags

    I hope this helps

    Marked as helpful
    0
  • Factorial•160
    @developer866Submitted over 2 years ago

    I'm having a problem with the social icon and the background, and I'd appreciate it if someone could shed some light on it.

    Html and Css

    1
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    Hey good job completing this challenge!

    to fix background use background-size.

        body {
        background-size: cover;
        min-height: 100vh;
    }

    or shorthand

        body {
        background: url("./images/bg-desktop.svg") no-repeat center/cover;
    }

    and, in accordance with the style guide, the background should be hsl(257, 40%, 49%).

    for social icons use fontawesome

    in terms of accessibility issues simply wrap all your content between main tags

    keep up the good work...!

    0
  • T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    Hey good job completing this challenge

    Keep up the good work

    In terms of accessibility issues, simply wrap section tags with main tags.

    I hope this helps

    Other than that, the solution looks amazing.

    Marked as helpful
    0
  • Antonio Novak•480
    @Nova988Submitted over 2 years ago

    Hello,

    Would love some feedback on the project.

    I was wondering what are some other ways to change the color of a svg when hovering over it? I did it now using Filter(), but i think it is more grey then white.

    Solution using Sass and JS

    3
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    congratulation on completing the challenge

    use fill attribute to change the hover color

        <svg class="icon">
        <path d="M20 2.172a8.192 ......." fill="#fff" fill-rule="nonzero"/>
    </svg>

    inside css

        .icon:hover {
        fill: "#000"
    }
    0
  • Kylee Bustamante•90
    @kyleebustamanteSubmitted over 2 years ago

    Could anyone help me with aligning the svgs to the the center in relation to the text to the right of them? As always if you see other areas of improvement feedback is welcome!

    NFT Product Card with CSS Flexbox

    4
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    congratulation on completing the challenge. to align the svg with the text, use display flex and align items center.

    .flex-item {
    display: flex;
    align-items: center;
}

.cyan {
    margin-left: 8px;
}

    try not to use height instead use min-height

        body {
    min-height: 100vh;
}
    Marked as helpful
    1
  • Silviu Daniel•50
    @sildanielsSubmitted over 2 years ago

    This is my finished project. Can someone explain me why the 2 images that should be on the background, doesn't show up?

    Thank you in advance!

    Profile Card Component

    2
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    congratulation on completing the challenge.

    your CSS file locate in the dict file so in this case if you want to access the image file you want to go to the parent directory like this

        ../images/###

        body {
        background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
    }

    ./ represent current directory

    Marked as helpful
    0
  • Fetra•40
    @SupafeiSubmitted over 2 years ago

    I made it with flexbox... Can't put it on the center of the page. And it's seem to be an error with loading images

    3 columns

    2
    T.Praveen•870
    @gwtpraveenPosted over 2 years ago

    Congratulation on completing the challenge

    to put the container middle on the screen try this

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

    From your code

        .contenair {
    display: flex;
    flex-direction: row; 
}
    • default flex-direction value is row so in this case, you don't need to set it.

    flexbox CSS-TRICK - a complete guide to flexbox

    Keep up the good work!!

    Marked as helpful
    0