Skip to content
OverviewSolutions
5
Comments
4
Shaihu Mohammed
@shaihumohammed

All comments

  • jchu62•10
    @jchu62Submitted 10 months ago
    1. The font styling for the paragraph was a bit different, I wasn't exactly sure how to get it to be the exact same as the example. Ideally I'd like some headers on why my font styling wasn't the same as the provided example.
    2. I know the challenge was designed for the white box to be a static size but for dynamic sizes what would I do?
    3. Were there any accessibility issues that I missed? I know this was a small project but I'd like to know how to make this accessible to everyone.

    React Page for QR Code

    2
    Shaihu Mohammed•100
    @shaihumohammedPosted 10 months ago

    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%)
}
    1
  • Sara Mkz•30
    @SaramkzSubmitted 10 months ago

    This was a bit challenging for me as I am learning CSS. And I need an answer because I couldn't find a way to achieve this : when i hover over the h2 HTML & CSS, not only do I want it to become yellow (which happened), I also wanted at the same time the bow shadow of my container to become bigger.

    How do I hover over one element and make another one react ?

    And of course, if you can tell me how i could have improved my code, that would be lovely !

    Thank you !

    Responsive card using CSS

    2
    Shaihu Mohammed•100
    @shaihumohammedPosted 10 months ago

    I hope this helps

    <button type="button" className="button">
        horver
      </button>
      <p class="para-one">lorem</p>
      <p class="para-two">eipsum</p>
    0
  • Shaihu Mohammed•100
    @shaihumohammedPosted 10 months ago

    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
    0
  • Shaihu Mohammed•100
    @shaihumohammedPosted 10 months ago

    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
    0