Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
7

Deepti Singh

@DeeptiGit22Noida120 points

I love designing and building websites. I use Figma for design and create websites with HTML, CSS, React, and Angular.

Latest solutions

  • Responsive Testimonial Grid Section


    Deepti Singh•120
    Submitted about 1 year ago

    .


    1 comment
  • Responsive Four Card Section


    Deepti Singh•120
    Submitted about 1 year ago

    .


    2 comments
  • Responsive Product Preview Card


    Deepti Singh•120
    Submitted about 1 year ago

    .


    1 comment
  • Responsive Social links profile


    Deepti Singh•120
    Submitted over 1 year ago

    .


    1 comment
  • Responsive Blog preview card


    Deepti Singh•120
    Submitted over 1 year ago

    .


    1 comment
  • Responsive QR-Code Design


    Deepti Singh•120
    Submitted over 1 year ago

    .


    1 comment
View more solutions

Latest comments

  • P
    jasoneczek•320
    @jasoneczek
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    For this challenge I took a bit of a different approach than in my previous few solutions by experimenting with utility classes with my custom properties for colors, typography, and basic layout. This allowed me to write Bootstrap-like classes directly into my html. For responsiveness, I used grid-template-areas to place the testimonial cards on the grid.

    What challenges did you encounter, and how did you overcome them?

    I did my best to match the design as closely as possible, but I found some challenges when it came to spacing the elements within each testimonial and landing on the same height/width as in the Figma file. Eventually I created little boxes directly in the Figma file itself to measure spacing, e.g. (8x8px, 16x16px, 24x24px) and converted these to rem units in my CSS. I tried a few line heights for the paragraphs as well until I got within a few pixels of the correct heights and widths of the cards for mobile and desktop views without hardcoding them.

    What specific areas of your project would you like help with?

    I used the and elements, and I'm wondering if how I used as the wrapper for the entire card is OK, or if the cards also need to be's in a `` for this challenge.

    Testimonials Grid Section

    1
    Deepti Singh•120
    @DeeptiGit22
    Posted about 1 year ago

    nice work

  • TobiA34•240
    @TobiA34
    Submitted over 1 year ago

    Four card feature

    1
    Deepti Singh•120
    @DeeptiGit22
    Posted about 1 year ago

    use box shadow.

  • P
    DalaScript•600
    @DalaScript
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?
    • There was no particular difficulty; I completed it easily and quickly. ✅🚀
    What challenges did you encounter, and how did you overcome them?
    • There were no special difficulties in this project. 👍✨
    What specific areas of your project would you like help with?
    • Everything was clear, as I mentioned, there were no special difficulties. ✔️
    • However, I'd still love to get advice from other developers to improve the code. 🧩👨‍💻
    • Any feedback or suggestions would be greatly appreciated. 🌟💬

    Product preview card component using Flexbox, BEM and SCSS

    #bem#sass/scss
    1
    Deepti Singh•120
    @DeeptiGit22
    Posted about 1 year ago

    The design is good, similar to the provided one. But you could change your media query a little bit. Because on the Laptop screen also I see the mobile image instead of a desktop image. @media screen and (min-width: 768px)

  • Caiquedev123•80
    @Caiquedev123
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    aprendendo sempre a mais

    What challenges did you encounter, and how did you overcome them?

    css

    What specific areas of your project would you like help with?

    js

    dev3

    2
    Deepti Singh•120
    @DeeptiGit22
    Posted over 1 year ago

    you are missing the background color on preparation time section and border-bottom in lots of places.

  • Tiago de Oliveira•20
    @tiago1820
    Submitted over 1 year ago

    Social Links Profile

    1
    Deepti Singh•120
    @DeeptiGit22
    Posted over 1 year ago

    use align-item : center for aligning your card in the center of your page. ( only if you are using flex for centering your card).

    Marked as helpful
  • Mark Suson•100
    @marksuson
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Simple HTML, CSS. Glad I kept it simple.

    What challenges did you encounter, and how did you overcome them?

    No Challenges.

    What specific areas of your project would you like help with?

    accessibility

    responsive blog card

    1
    Deepti Singh•120
    @DeeptiGit22
    Posted over 1 year ago

    use the correct color for paragraph

View more comments
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