Skip to content
OverviewSolutions
5
Comments
4

Shaihu Mohammed

@shaihumohammed100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Shaihu Mohammed•100
    @shaihumohammed

    the information about this and other stuffs are in the style-guide.md in the starter file you downloaded. hope this is helpfull :)

    p {
color : hsl(220, 15%, 55%)
}
  • Shaihu Mohammed•100
    @shaihumohammed

    I hope this helps

    <button type="button" className="button">
        horver
      </button>
      <p class="para-one">lorem</p>
      <p class="para-two">eipsum</p>
  • Shaihu Mohammed•100
    @shaihumohammed

    it could be more accurate if you center the card in the middle of the viewport

    body{
 position : relative;
}
 .card{
 position:absolute;
 top:50%;
 left:50%;
 transfrom:translate(-50%,-50%);
}
/*hover effects*/
selector:hover{
 background: hsl(75, 94%, 57%);
}

    also you could use a fluid value for the card to prevent overflow

    hope this helps :)

    Marked as helpful
  • Shaihu Mohammed•100
    @shaihumohammed

    its good if you place the card in the center of the viewport.

       body{
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    or

    body{
      position: relative;
 
    }
  .card{
      position: absolute;
      top: 50%;
      width: 50%;
      transform: translate(-50%,-50%);
    }

    :)

    Marked as helpful