Landing page difficulties

I have two problems:

  1. Firstly, I have followed all the instructions, yet I get 15/16;
  2. Secondary, how do I make my cards not have the same height. I want to eliminate the extra space under the first two cards.

Here is a link to my project

just below the failing test (you can often see there the reason of why the test is failing) there is written

The #email element's name attribute should have a value of "email"

what’s the value of the name attribute of that element?

1 Like

@humbleAfriqan, click on the red button to see the failing test and read the error message. In this case it says “The #email element’s name attribute should have a value of “email” : expected ‘name’ to equal ‘email’”

For balance it looks better if the cards are the same size. What you can do is add some margin and/or padding to the buttons so they line up along the bottom of the cards. That will give them balance.

1 Like

Did you try using flexbox?

.card {
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

I’d also suggest adding box-sizing: border-box to your universal selector (*).