Skip to content
OverviewSolutions
37
Comments
6
Suvankar Pradhan
@suvankarpradhan

All comments

  • Johan Jubin•90
    @Johan-JubinSubmitted over 3 years ago

    Made my first project in Frontend Mentor, I had 2 problems:

    1. I can't position the background circles in their respective positions.
    2. I can't add a white circle behind the profile picture.

    All your valuable feedbacks are always welcome. Please review my code & suggest ways to tackle the problems

    I used Vanilla HTML & Css

    2
    Suvankar Pradhan•670
    @suvankarpradhanPosted over 3 years ago

    good job...you can remove two images from your css and use this process.... add two images within your body tag like this<body> <img class="top-img" src="images/bg-pattern-top.svg" alt="img1"> <img class="bottom-img" src="images/bg-pattern-bottom.svg" alt="im2"></body>

    then use css -->

    .top-img, .bottom-img { position: absolute; } .top-img { transform: translate(-30%, -50%); } .bottom-img { transform: translate(70%, 40%); }`

    hope this will work ..

    1
  • Karan Mishra•10
    @karanmishra0904Submitted over 3 years ago

    How do I have 50% width for the image and also keep it responsive? Also, is there any way I could have been more efficient with my css?

    Any other feedback would be appreciated. Thanks a lot.

    Flexbox

    2
    Suvankar Pradhan•670
    @suvankarpradhanPosted over 3 years ago

    Try this..... .main-box { position: relative; height: 100vh; padding: 10% } .main-box-inner { display: flex; flex-direction: row; } .left-box { background-color: hsl(244, 38%, 16%); display: flex; flex: 50%; flex-direction: column; justify-content: space-between; padding: 50px 60px; border-radius: 10px 0 0 10px; } .right-box { display: flex; background-color: hsl(277, 64%, 61%); flex: 50%; border-radius: 0 10px 10px 0; }

    0
  • Suvankar Pradhan•670
    @suvankarpradhanPosted over 3 years ago

    good job.. try media query for responsiveness on different screen size.

    0
  • Suvankar Pradhan•670
    @suvankarpradhanPosted over 3 years ago

    Good job.. Here you wrote srcset in img tag like, "<img src=/img/icon-star.png alt= srcset=>", if you remove srcset from your img tag, you get no html issues.

    second html issue is, you wrote h3 tag between small tag, here you can use h4 or h5 or h6 tag, but don't use small tag like this way.

    Thank you.

    1
  • Muskan2905•20
    @Muskan2905Submitted over 3 years ago

    Hey, Guys, this is my second newbie challenge from frontendmentor, I made this three-column card component using HTML and CSS. Your suggestions are welcome if you find something inaccurate. Thanks.

    3-Column-Card-Component using HTML and CSS

    2
    Suvankar Pradhan•670
    @suvankarpradhanPosted over 3 years ago

    you should use '/' in any path selection. Don't use ''. good work.

    1
  • Athreya G•410
    @AthreyaG4Submitted over 3 years ago

    My first challenge. I am new to Frontend Web development. Feel free to give me some suggestions. Thank you

    Basic HTML,CSS

    3
    Suvankar Pradhan•670
    @suvankarpradhanPosted over 3 years ago

    good work, you can add top and bottom margin in mobile view.

    0