Solution with HTML and CSS-Flexbox

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job with this challenge. Viewing your solution you did well as your first project. I would suggest the following for you...

  • You should invert the background of the button from the hover state. Modify the properties in the rule set like this...

  
  .button1 {
    display: block;
    width: 70%;
    margin: auto;
    padding: 15px;
    color: hsl(224, 23%, 55%);
    background-color: hsl(245, 75%, 52%);
    font-family: "Red Hat Display", sans-serif;
    font-weight: 700;
    border-radius: 10px;
    border-style: none;
  }
  
  .button1:hover {
    background: hsla(223, 53%, 55%, 0.79);
    color: #fff;
  }
  
  

  • Make the cancel button into a link, you can do it like this..

  HTML:
  <a href="#" class="button2">Cancel</a>
  
  CSS:
  .button2 {
    width: 70%;
    padding: 15px;
    margin-top: 30px;
    color: hsl(224, 23%, 55%);
    font-family: "Red Hat Display", sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
  }
  

  and eliminate the hover state

  • Wrap the container with main tag
  • Use a validator to check your solution

  Hope this helps and keep up the good work!

  Marked as helpful

  1

  ---

  

  Mehmet Cevat•70

  @morcicekPosted almost 3 years ago

  @RioCantre Thank you so much.Like you said it was my first solution and I'm so grateful for the feedback..

  1

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @morcicek Great job! Keep it up, you'll be good at it in no time. Cheers!

  Marked as helpful

  1