Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
23
Md Ajmal Shadab
@mdajmalshadab

All comments

  • Sujeet Kumar Manjhi•40
    @alias01
    Submitted over 3 years ago

    HTML CSS BEM structure

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Your result looks pretty good, just try aligning all 3 buttons in your card. Rest is perfectly fine. Go ahead and take a new challenge.

    Marked as helpful
  • Sean Brookstein•150
    @CassiuSRSA
    Submitted over 3 years ago

    Order Summary Component

    2
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey nice work, you just need to add some background color to your page body so that it could match with the challenge template. Keep coding!😊

    Marked as helpful
  • Josh•20
    @J0shcodes
    Submitted over 3 years ago

    Responsive summary card with CSS Flexbox

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    hey you have done a great job, I liked the responsiveness of the page. Go head and take a new challenge. Keep coding!

  • Nabil•160
    @Nabil19911
    Submitted over 3 years ago

    React JS and Style Components

    2
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey, nice work, everything is fine except the fact that the card is jumping a bit while changing the screen size and try increasing the length of the button shadow and add hovering color change on the button if possible. Happy Coding!

    Marked as helpful
  • Andrei Minciuna•40
    @AndreiM987
    Submitted over 3 years ago

    Profile card component

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey nice work on the card! For the background you can do....

    Add following CSS property inside your page body/main

    background-image: url("url-1"), url("url-2) The two image urls separated by comma Next you can position it accordingly also seperated by comma for example....

    background-position: left 10px top 10px, left 30px top 30px;

    These numerical values are just for example, tweek it as it best fits. Keep coding!

  • Ezra Adeyinka•40
    @adeyinkaezra123
    Submitted over 3 years ago

    Mobile first Order summary component

    2
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey you have done it nicely, only you just need to reduce some bottom padding of the card, then it'll match with the given challenge. Keep coding ✌️

    Marked as helpful
  • Alan Santos•140
    @alan-ssantos
    Submitted over 3 years ago

    Profile Card Component

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    You have done it perfectly! I liked it quite much. Keep doing new challenges 😊

  • ankit sahu•80
    @nerdgeek007
    Submitted over 3 years ago

    stats preview card solution with html5,css3 using flexbox

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Well I guess, you submitted your solution in wrong challenge, btw try changing the color of car names to white in your card. And also try aligning all three buttons on same level, rest is pretty good. Keep coding✌️

  • SakshiSawant•50
    @SakshiSawant
    Submitted over 3 years ago

    3-column preview card component

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey nice work! Just reduce left/right padding inside each button and add little margin to the top and bottom of the button, rest is good I guess. Keep coding!

  • Martín Beltramino•10
    @darkabysm
    Submitted over 3 years ago

    Static home page using CSS Flexbox

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey nice work, you need to change the color of the button in hovering state by using :hover with your button class in CSS. You can also add right padding to individual cards to match your design to the given challenge.

    Keep Coding!

    Marked as helpful
  • John Carson•50
    @wppaing
    Submitted over 3 years ago

    Card design using html and css

    2
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey, that's a very good work for the first challenge, one thing I would like to pin point here is that you did not used the background image (wavy curve) that is shown in the original design.

    Keep coding! Keep doing new challenges!😊

  • SakshiSawant•50
    @SakshiSawant
    Submitted over 3 years ago

    Profile Card Component

    3
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Another way that you can use is what I did while doing this challenge.....

    I created a parent class 'bg' and its two child classes 'bg-1` and 'bg-2', following are the CSS property I used for positioning my two background images.

    .bg { margin: 0; display: flex; justify-content: center; position: relative; width: 100%; height: 100%; z-index: -1; overflow: hidden; }

    .bg-img-1 { position: absolute; right: 52%; bottom: 40%; }

    .bg-img-2 { position: absolute; left: 50%; top: 50%; }

    if you have any doubt you can refer to my github code

  • SakshiSawant•50
    @SakshiSawant
    Submitted over 3 years ago

    Profile Card Component

    3
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey, nice work for the card section, for background part you can use the following CSS property in you main/body element background-image: url("image-url-1"), url("image-url-2"); and then accordingly position your background using background-position: left -80px top 50px, left -570px top -300px; NOTE: These positions are random and just for example, you can position your two background images by separating it with comma.

    Marked as helpful
  • Pankaj Shalikram Pawar•120
    @DamnItAzriel
    Submitted over 3 years ago

    Responsive webpage using HTML and CSS

    2
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    That's very good work! keep doing new challenges :)

    Marked as helpful
  • Pancha•30
    @Pancha99x
    Submitted over 3 years ago

    Col-Preview-Card

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Hey, really good work for the first challenge. Keep coding!

    Marked as helpful
  • Riz•30
    @vantevie
    Submitted over 3 years ago

    Second Challenge | Stats- Preview-Card-Component

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted over 3 years ago

    Nice Work! Try using display: flex in the parent container of your image and card body, it'll automatically divide equal space for your image and card body.

  • Heath Allred•35
    @Heathallred4
    Submitted almost 4 years ago

    Desktop First-Site using HTML and CSS

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted almost 4 years ago

    Hey, that's really good one. I think you just forgot to change the color of headings and paragraphs, change it to dark blue and it'll be same as original template. Keep Coding!

    Marked as helpful
  • Erel Ropeta•385
    @ereljapco
    Submitted almost 4 years ago

    Mobile first using HTML and CSS

    1
    Md Ajmal Shadab•410
    @mdajmalshadab
    Posted almost 4 years ago

    Hey Great Work! Regarding those breakpoints I would recommend using background-image CSS property inside your main container, and then accordingly position your background using background-position property to match the desired layout.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub