Skip to content
Submitted about 3 years ago

Zeref's 3-Column Preview Card

Abhishek Singh Negi•40
@ZerefResearchs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

If I've Done something messy OR if the project could've been done in lesser space, feel free to please point it out. :)

Community feedback

  • dewslyse•3,025
    @dewslysePosted about 3 years ago

    Hello @ZerefResearchs. Congrats completing your first challenge. Some things to note:

    • Remember to wrap your the main content of your document in the main tag. This improves accessibility and also resolves most of the issues raised in the report.
    <body>
   <main>
      .
      .
      .
   </main>
</body>
    • It would be easier to create the component using flex properties. Using position: absolute is not the best approach. I have reworked your code without the position property. I wrapped everything within the body in a main.
    body {
  color: hsl(0, 0%, 95%);
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: auto 30px;
}

.Sedan {
    width: 275px;
    background-color: hsl(31, 77%, 52%);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 40px;
}

.para {
    color: hsla(0, 0%, 100%, 0.75);
    font-size: 15px;
    font-family: 'Lexend Deca', sans-serif;
    margin: 0 0 100px 0;
}

.btn1 {
    border-radius: 20px;
    font-family: Arial;
    color: #f28509;
    background: #ededed;
    padding: 10px 20px 10px 20px;
    border: solid #f7f7f7 2px;
    text-decoration: none;
    margin: 50px 0;
}

    The above styles can be applied for all cards. You just need to use the appropriate background colours for each. With this approach, you can lose the class selectors on the imgs. They are not needed anymore.

    • You should create a page for mobile devices using media query.
    @media  (max-width: 960px) {
     main {
        flex-direction: column;
     }
}

    you can then make the necessary adjustments as you see fit.

    Best of luck and happy coding!!

    Marked as helpful
    1

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