ping solution

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello, @Gab-Ferreira. You did a great job👏🎉. Now you can try to move forwards to another challenge. don't stop at this challenge. Every time you will try to make it better and free of mistakes, somehow you will find mistakes. So Go to the next challenge and never stops.

  However for this challenge you can do the following:

  • To change input placeholder styles you can use the following:

    • For more information's you can Read this W3 documnetation.

      #email-input::placeholder {
       color: var(--blue);
       font-size: 16px
      }
    

  • Extra styles for input to look close to the design

      #email-input {
        padding: 0 1.8rem; /* 3rem padding for the left was too much */
        border: solid var(--blue) 1px;
        font-size: 18px; /* previous font size was too small */
      }
    

  • For social media svg icons you can change it's color on hover by the following:

    • For more information's you can Read this article.

    .icon-box {
       border: 1px solid  var(--blue);
       transition: 200ms linear;  /* for soft transitions on hover */
    }
    
    .icon-box svg{
       fill:  var(--blue);
       max-width: 80%; /* To make icons smaller */
    }
    
    .icon-box:hover{
       background-color:  var(--blue);
    }
    
    .icon-box:hover svg{
       fill:  #FFF; 
    }
    

  • To fix the issues in the report above:

    • HTML Validations

      • remove action attribute from the form element.
      • add value to the name attribute for the input element. More information's Read this.

    • Accessibility

      • add aria-label to the attribution div like: <div class="attribution" aria-label="copyrights"></div

  • By the time your websites responsiveness will be better.

  I hope this was useful for you😍.

  Goodbye and have a nice day. Keep coding🚀

  Marked as helpful

  0