Skip to content
OverviewSolutions
24
Comments
6
User9511
@User9511

All comments

  • User9511•370
    @User9511

    Looks good!

    A small update I would make would be to update the following, This will make your project look more like the design.

    .container {
max-width: 19rem;
background-color: white;
padding: 1rem;
border-radius: 18px;
text-align: center;
margin: 0 1em;
}
  • User9511•370
    @User9511

    Thanks for the feedback Grace! :)

    I've updated my code now,

    Let me know if there are any other changes you think I shoud make.

    Thanks, Shane

  • User9511•370
    @User9511

    Looks really good!

    The only thing I can see that you are missing

    .payment a {
        text-decoration: underline;
}

.payment a:hover {
         color: var(--Bright-blue);
}
  • User9511•370
    @User9511

    I would change your .container to this

    .container {
        max-width:25rem;
        background:linear-gradient(14deg, rgba(23, 30, 40, 1) 0%, rgba(33, 40, 50, 1) 90%);
}
  • User9511•370
    @User9511

    Unable to view your project.

    Firefox says it's a dangerous potentially phishing website.

  • User9511•370
    @User9511

    Hey Akash Nagindar Tayde,

    You are missing the active hover states on your buttons.

    This is how I would solve that issue by creating a new variable in the :root:

    :root {
      --Lighter-Blue: hsl(233, 100%, 78%);
}

    btn btn-blue:hover {
      background-color: var(--Lighter-Blue);
}

    You should also add a hover state for the links in the footer:

    footer p:hover {
     color: var(--Strong-Cyan);
}

    Also, the footer links should be in an unordered list using this syntax:

    <footer>
     <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
     </ul>
</footer>
    Marked as helpful