Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
11
darshii
@darshii98

All comments

  • vishal wankhade•495
    @Vishal-wankhade
    Submitted almost 4 years ago

    3-column-preview-card-component-main

    4
    darshii•525
    @darshii98
    Posted almost 4 years ago

    No reponsiveness in your design mate, maybe either work with flexbox or at every suitable width of screen, decrease the width of your container, also set your entire container's overflow to hidden.

    Marked as helpful
  • Tyson W•305
    @Tyson-Wellings
    Submitted almost 4 years ago

    Responsive Donation page made with Vanilla JS. Updating components.

    2
    darshii•525
    @darshii98
    Posted almost 4 years ago

    Your amount increases but backers don't increase. So maybe try to change that!!. Also adding some transitions might help smooth things out in case of buttons and bookmark. Awesome Job bdw!!

    Marked as helpful
  • 7milkyways•100
    @iamdestinychild
    Submitted almost 4 years ago

    interactive-pricing-component

    2
    darshii•525
    @darshii98
    Posted almost 4 years ago

    The slider component is not smooth. 8, 12, 16 are showing in the beginning and 36 at the end. Maybe you should think about implementing a uniform step size. Also below 400px screen width, the toggle switch appears to be very small, and the toggle effect isn't effective, try to maybe put a min-width on the toggle. Everything else looks great. Happy Coding!

    Marked as helpful
  • Deepak Kumar Asnani•310
    @deepak-asnani
    Submitted about 4 years ago

    Todo app using HTML, CSS and JS

    2
    darshii•525
    @darshii98
    Posted about 4 years ago

    Awesome job man. One small nitpick, when on the active tab if I check some items as completed, they still remain there and do not immediately get transferred to completed. I have to click completed and then on active again, to see that they are not there. If that could somehow change, then it will be a great app.

    Marked as helpful
  • Asfand Yar•20
    @asfand687
    Submitted about 4 years ago

    Flexbox, CSS Grid for the layout.

    1
    darshii•525
    @darshii98
    Posted about 4 years ago
    1. Set visibility to hidden below a certain screen length, preferably at tablet size(768), then you can make the container of the nav-links flex, with flex direction column, make position absolute, and give some padding to the links, to make it look like a list. To add transition effect either you can use transform translate or you can make the height of the container zero and when menu burger icon is clicked, set the height to unset or original and use transition to animate it.

    2. Sometimes its better to use directly images, but in case of the design and photography section of your site, you can use image as background.

    3. Svgs I have used in the sass itself and used filter property to change the color. (for icons I have used ion-icons, but you can also use the provided ones and change their color using filter when hovering)

    Marked as helpful
  • Saif Narpali•590
    @SaifN97
    Submitted about 4 years ago

    Mobile first approach using node SASS, Flexbox and parcel-bundler

    1
    darshii•525
    @darshii98
    Posted about 4 years ago

    Use the filter property to change color of images. You can find it in mdn. Something like " filter: brightness(0) saturate(100%) invert(37%) sepia(13%) saturate(2008%) hue-rotate(116deg) brightness(93%) contrast(93%);"

    Marked as helpful
  • Rohit•330
    @Rohitgour03
    Submitted about 4 years ago

    Profile card component

    1
    darshii•525
    @darshii98
    Posted about 4 years ago

    GIve the container a background url() and set it's position in terms of vh vw...something like " background-position: right 51vw bottom 40vh, left 49vw top 49vh", .

    Marked as helpful
  • Writam Biswas•105
    @bwritam
    Submitted about 4 years ago

    css

    1
    darshii•525
    @darshii98
    Posted about 4 years ago

    Below 760px screen width, you can set the background of the card to 'repeat'. Because right now it just shows the background image on one side and white space on other.

    Marked as helpful
  • Anwar•375
    @Anwar11234
    Submitted about 4 years ago

    HTML and CSS landing page

    1
    darshii•525
    @darshii98
    Posted about 4 years ago

    Set your background's repeat as no-repeat. Other than that, it looks great ;)

  • Jacob•130
    @Vastagon
    Submitted about 4 years ago

    Semi-Responsive 3 column card using Flexbox

    1
    darshii•525
    @darshii98
    Posted about 4 years ago

    Make your single card component's position relative and your button's position as absolute, then give a distance from bottom to your button, it will work. You can refer my solution if you want. Also change your entire card component's flex direction to column if you want to make it responsive in mobile view.

    Marked as helpful
  • Anna•545
    @NitaLewska
    Submitted about 4 years ago

    Intro component with sign-up form

    2
    darshii•525
    @darshii98
    Posted about 4 years ago

    You could set the input values to "", after submit button is clicked (when no errors), so that it would seem as if form is submitted. Bdw, nice job !! ;)

    Marked as helpful

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