Some feedback for my landing page, please

Code Feedback
1

Please take a look and say me how is it :slight_smile:
https://codepen.io/kattty/full/XLXMyw

2

It looks pretty nice, I like the colors and overall design. I will point out a few issues.

  1. Your way of centering using margin-left and transform: translate is causing overflow on the page. You also have it on elements that do not need it, like the .btn class on the price cards buttons and the column classes on the footer elements.

Remove this…

margin-left: 50%;
transform: translate(-50%);

…from the .btn and .left-column, .center-column, .right-column classes. Everything will still be centered but you won’t have an overflow.

  1. I would push the about us section down more. I’d suggest moving the top margin from the h1 and add it as padding on the section instead.

  2. Because of how you are making the nav using floats with reverse source order and floating right, the order is switching on the stacked layout. This isn’t great UX. Personally, I would suggest not using floats for this. But if you do want to use floats, then you have to use normal source order, float the li left and then float the ul to the right. You will have to remove the float on the ul when stacking the nav.

<ul>
  <li>
    <a class="nav-link" href="#aboutus">About us</a>
  </li>
  <li>
    <a class="nav-link" href="#pricing">Pricing</a>
  </li>
  <li>
    <a class="nav-link" href="#contacts">Contacts</a>
  </li>
</ul>

li {
  float: left;
  border: 1px solid #51382E;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: right;
}

@media (max-width: 800px) {
  #nav-bar > ul {
    float: none;
  }
}
  1. You need to switch the media queries around so you have the largest max first.

Example
https://codepen.io/anon/pen/xoVWqL

  1. You are repeating a lot of styles that do not change between the breakpoints, only add styles that need to change. There seems to be very little in the 600px media query that actually needs to be there. In fact, if you add flex-wrap: wrap; to the .price-box class, I think you can just delete it completely.