Preview Card

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job with this project.Viewing your solution, I would suggest the following for you...

  • Add the background-color: hsl(217, 54%, 11%); in the body rule set
  • Remove all the properties in the .outer-container and add margin-top: 8rem; to align the content in the center
  • Remove the position: absolute;, left: 35.625em; and top: 4.25em; and add margin: auto;
  • Add the hover state of the design. Starting with the Hero image, you can take this example Overlay in image. Add color: hsl(178, 100%, 50%); and cursor:pointer; for the hover states of the fonts in .content p and span name
  • Wrap these section with a div and use flexbox for the alignment

  <div>
   <img class="avatar" src="images/image-avatar.png" alt="avatar image">
          <span style="color:hsl(215, 51%, 70%);">Creation of</span><span class="name"> Nihar Saxena</span>
  </div>
  

  • Wrap the outer-container with specific tag like main for readability
  • Adjust the size of the .avatar into 28px and add border: 1px solid white; and border-radius: 50%;

  Hope this is helpful and Keep it going!

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi NIHAR, great job!

  Try use Flexbox for center the card, read here -> flex guide

  You just miss them the effect :hover. For example, I created a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution

  In the end try to adding a little transition on the element with hover effect

  Hope this help ;) And keep it up!

  Marked as helpful

  0
• 

  Sarang-Patel•190

  @Sarang-PatelPosted almost 3 years ago

  Congratulations, on getting the solution.

  Just a few things to note:

  1. add all elements in the body in a main tag
  2. use atleast one h1 tag.
  3. use :hover in css to get the hover effects of changing color.

  points 1 & 2 will help remove accessibility issues.

  Hope this helps.

  0