Project Landing Page assistance

Project Landing Page assistance
0.0 0

#1

Hi there! Ok so I was doing really well on this project then ran into some snags that are driving me crazy. So before I add my @media tags and some other requirements to finish the project, I want to make sure the format is pristine first. Here are the things I need guidance on:

  1. My header navbar tags need to be to the right of the element
  2. My “features” icons need to be inline with their text (icon on the left, text right) and the element centered
  3. My buttons inside the “pricing” boxes" need to all be in the same place and remain there while resizing

These all seem pretty basic, even as I type them out, but I just can’t seem to find a solution. Any guidance would be of great assistance! Thanks in advance!

codepen link


#2
  1. “My header navbar tags need to be to the right of the element”
    do you mean that you want the header-img and logo-name to be left aligned while the nav-bar is right aligned?

  2. instead of putting the flex css on icon and text, try putting it on the feat-box so you can control how items within feat-box are aligned.

  3. well, first of all, .pricing.btn should be .pricing .btn
    and i don’t know what this is doing, if anything:

.pricing h3 {
	position: relative;
	bottom: 20px;
}

if you add position:relative; to .price-box-a, .price-box-b, .price-box-c then you can absolutely position the buttons inside the price boxes.

hope that helps!


#3

Hi Megan,

Thanks, I was able to fix my feat-box issue with the solution you presented. To answer your question:

“do you mean that you want the header-img and logo-name to be left aligned while the nav-bar is right aligned?”
-Yes! I need this exactly. I tried playing with the position:relative and absolute values like you suggested for my 3rd problem, but I’m running into complications with it.

In both cases, my text is now stacked on top of everything. In the case of the pricing boxes, when I set the position of the descriptive text and the button to absolute to assign them a position within the parent element, the box gets smaller.

I have updated the code if you’d like to take a second look. And thanks again for the assistance.


#4

OK, so to fix the nav bar, i would put the logo img inside the logo name div. then you can do justify-content: space-between and that should align the logo and name to the left and the nav items to the right.