Skip to content
OverviewSolutions
51
Comments
10
Souleymane Sy
@SouleymaneSy7

All comments

  • Salah Najem•350
    @Salah1221
    What are you most proud of, and what would you do differently next time?

    I wanted to create an animation for switching between dark and light themes, similar to the one in the Telegram mobile app, and I'm happy with the result. However, I wish I had organized my code better since it's a mess, especially with the class names in the HTML and CSS.

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

    The trick that I've used in my project for the dark/light switching animation depends solely on mix-blend-mode: difference, so I needed to invert most of the colors in the website. Would that impose a problem if used in a real-world project?

    E-commerce Produce Page with Dark mode

    2
    Souleymane Sy•980
    @SouleymaneSy7

    Waaww you make this project better. Cool animation & all. Congrats for the project!!

  • Souleymane Sy•980
    @SouleymaneSy7

    This is a great work! 👍👏

  • Souleymane Sy•980
    @SouleymaneSy7

    Set the body element height to 100vh and use flexbox or grid to center it like so:

    
body {
  height: 100vh;
  display: grid;
  place-items: center;
}

    And don't use inline css style. Instead separate your css and html. Put the css in another file and use the link tag to connect it with the html. However it a good work 👏👍

  • Souleymane Sy•980
    @SouleymaneSy7

    For the height of your wrapper element don' t put a specific height on it. Like:

    .wrapper {
    height: 70vh;
}

    Instead, don't specify the height. Let it's child element put the height!

    Marked as helpful
  • Souleymane Sy•980
    @SouleymaneSy7

    You could change the main content background color and try to make it responsive for mobile phone! Anyhow It's a good work 👏

  • Souleymane Sy•980
    @SouleymaneSy7

    Waww it's a good work. And the work with pixel perfect is a good advice.

  • Souleymane Sy•980
    @SouleymaneSy7

    Good Job for completing this challenges!

    Marked as helpful
  • Souleymane Sy•980
    @SouleymaneSy7

    Waaw good job

  • Souleymane Sy•980
    @SouleymaneSy7

    Hi 👋@Abdurahman-05, congratulation for your solution.

    To improve it, you should put the img tag in div and give 50% width of the parent element to make it take half of the parent size. And this will improve your solution to make it as close to the design provided!

    Also it a good work

    Marked as helpful
  • Souleymane Sy•980
    @SouleymaneSy7

    Hi, congrats for completing this challenge.😁

    For creating a dropdown menu, you can use Javasript to make it dynamic. Just add an event listener on the dropdown elements to toggle with a active class and style this particular class in the css to make more styled. And that's it, if you have any issue, search on Google for how to add a dropdown menu on projects.

    Marked as helpful