Skip to content
Submitted 3 months ago

responsive landing using display flex

Ashutosh-Neupane•80
@Ashutosh-Neupane
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Many are proud of the innovative solutions or creative ideas they’ve developed, whether in design, problem-solving, or unique approaches to challenges. Better planning and preparation can help avoid pitfalls and improve efficiency. This might include more thorough research or setting clearer goals.

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

Problem: The hover effect on the h1 inside the .card and the zoom effect on the .illustration-article might not be functioning as expected.

Possible Solutions:

Check Specificity: Ensure that the CSS selectors are specific enough and not being overridden by other styles. Verify CSS Linking: Confirm that the CSS file is correctly linked and loaded by the browser. Inspect with DevTools: Use browser developer tools to inspect the element and check if the styles are applied correctly.

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

I’d like help with optimizing the responsiveness and visual appeal of my project, ensuring smooth and effective hover and transition effects, and improving performance by optimizing images and refining code. Additionally, I need assistance with enhancing accessibility, ensuring cross-browser compatibility, and managing deployment to ensure a seamless and user-friendly experience.

Community feedback

  • Nico•330
    @Nico243Posted 3 months ago

    Everything looks great and well put together!

    Instead of using divs you might want to use the following that gave me more structure and helped me save time: (Semantic Elements)

    <body> <main> <article> <header> 
      </header>
  <section>
    <p></p>
    <p></p>
    <h1></h1>
    <p></p>
    <footer>
      
    </footer>
  </section>
</article>
    </main>

    It helps me with preperation planning and executation!

    Good job

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord