Skip to content
Submitted about 3 years ago

Trying to get as closest as possible to the design :) - 3 columns

Stefan•180
@st3wn
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

Hi guys, hope your like my work.

Does anyone know how to set the button color on transparent so that the color of the button has the color of the div? (in HTML and CSS only) When I set it to transparent it gets ofc the background-color of the button.

Anyways, this was the only problem I had.

Community feedback

  • Alucard•870
    @Alucard2169Posted about 3 years ago

    for Accessibility errors :

    • consider using just <html lang="en"> the browser recognizes everything by default so you don't have to use dir or data-cmp, also you don't use class attribute on html tag cause you don't have to select it for anything and it is also a accessibility and syntax error.

    • Viewport tag: by setting the maximum-scale and minimum-scale to 1 you are basically disabling the zooming which is very bad for you site. <meta name = "viewport" content="width = device-width, initial-scale = 1"> this is how it should be.

    • your html document should at least contain one <h1> heading element.

    • if you are using class main on your div then you should avoid using div for this and just use main as your html tag. You can learn more about that on semantic html.

    Marked as helpful
    0
  • Alucard•870
    @Alucard2169Posted about 3 years ago

    Hi, great work on this project.🥳🥳

    for changing the color of your button on hover you have to use pseudo class on your button like this:

    button:hover{
   background: your_background_color;
   color: your_text_color;
}

    not only that, you can change many things on hover or using pseudo class ( trust me pseudo class are very fun )

    This Video gives a good grasp on hover This lesson from W3schools gives a brief introduction to pseudo classes.

    Anyway Great work out there, Keep it up.😊

    0
    Stefan•180
    @st3wnPosted about 3 years ago

    @Alucard2169 Oops, forgot that. I normaly use transition 0.4s ease; for a ncie hover effect

    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