<Project id=“Product Landing Page” />

here is my third project the Product Landing Page

any feedback would be nice. Thanks in advance :handshake:

It feels a little unfinished. I do like the feature text rotate you have implemented.

  1. Give your links some actual text, like product, video, and contact. Make sure the user lands on the sections correctly when navigating using the links (more info). Maybe give the nav links some hover style.

  2. Remove the default margin and padding on the #nav-bar ul so when it stacks it is centered.

  3. Add a web font and make the typography stand out more.

  4. Make the video responsive so it doesn’t cause an overflow on small screens.

  5. Center the Pricing table on the page.

  6. Give the form some styles.

It’s not a bad start, I just think it needs a bit more.

1 Like

thank you very much @lasjorg for your review

i will work on it now
and that article is just in time
i realized the problem but didn’t know what to do about it :relaxed:
i will finish it and post the update soon

@lasjorg i did the 6 points you mentioned except the first one

Make sure the user lands on the sections correctly when navigating using the links (more info). Maybe give the nav links some hover style.

i got lost trying to make it work for the video or the features section in the big screen min-width: 960px
i red the solutions in the link but too many ways and i don’t know which way for which element :unamused:
i really don’t get it

i fixed the pricing section using pseudo element ::before

if you can help me with the iframe tag i may solve the rest of it .

thanks in advance :pray:

I would move the #link1 id from the section to the parent div with the video class. Then give the section a new class for the styles you had in the #link1 selector. So you end up only having the link landing correction CSS on the #link1 id and all other styles for that section on a new class.

Not sure how much sense that made, I made a fork of your project. You can make your own fork of my version so you have a copy. Just let me know when you have it and I will delete my fork of your project. I didn’t really use much time making any real adjustments so you will still have to add the spacing as you want it.
edit: deleted https://codepen.io/lasjorg/pen/zVRLBg

1 Like

from what i understand until now :relaxed: that my mistake that i wrapped the <section> inside a <div> and what i had to do is to wrap the <ifram> inside a <div>inside the <section>

and all of that happens to make the video responsive so i have to wrap my head around it for some time
i think if it was separate problems it would be easier

when i try to fix the youtube video i lose the link target and vice versa
i will fork it and give it some time (may be re code the video section again )
to see it clearly because i can’t now
i understand or (see) your changes but i still don’t know why it didn’t work without changing the link2 id

i still have the same problem with the features section too so i have to give it some time before moving to the next project

thanks @lasjorg for you time and your amazing help
i really appreciate it . :two_hearts:

Just let me know if you need any help.

Did you fork the Codepen I linked to? I just want to know if I can delete it, or if you still need it?

Yes i did you can delete it
thank you

ok my friend @lasjorg i fixed it all
i recoded the ifram section and fix the other tow sections
i used a transparent border top it work very will for my layout

what do you think now , any more problems? :grinning:

hmm… I’d add a bit more styling the the input and button at the bottom.
like this: https://codepen.io/phpdude/pen/YoLYVr

thank you @Steffan153
check it now :hugs:

I don’t see a difference yet… did you save it?

:relaxed::relaxed::relaxed:
now i did

When you hover over the button, the text is green which is hard to read on black. I’d recommend changing the text color to white. Also, did you do anything with the input?

Also, I’d recommend adding a border radius to the input and button to make it a bit rounded :slight_smile:

done now

and about the input
i added a hover and focus background color
and now i added a border radius

the border radius is only on hover, or is that intended?

It looks a lot better now, good job. I like the spinning logo that’s a nice touch.

  1. Give the nav links a bigger click area, maybe something like 20px padding on the <a> elements in the nav.

  2. I would bump up the font size on everything.

  3. The input and submit button needs to be bigger. Give them some padding. Remember it’s a call to action, it needs to stand out more.

  4. I wish the pricing table stacked on small screens. It’s a bit more complicated because of it being an actual table element. One option is to make two tables and switch them in a media query.

  5. This is more of a personal UX thing, but I’m not sure how I feel about the animation on the submit button. Maybe try something a bit more subtle (e.g. a faint slow pulsing effect). It’s not so much about the animation itself but the context it is used in. I feel like that wiggle animation is more of a happy/fun type of animation. I’m not sure it really fits the overall mood of the page. Not that the page gives much context, because we don’t know what the product is, but from the colors and style I still get more of a classy/serious vibe then happy/fun.

the border radius is only on hover, or is that intended?

yes it was intended

but i changed it now
i hope you like it
tell me i you don’t :pray:

i forked it so here is the new link

  1. Give the nav links a bigger click area, maybe something like 20px padding on the <a> elements in the nav.
  2. I would bump up the font size on everything.
  3. The input and submit button needs to be bigger. Give them some padding. Remember it’s a call to action, it needs to stand out more.
  4. I wish the pricing table stacked on small screens. It’s a bit more complicated because of it being an actual table element. One option is to make two tables and switch them in a media query.

1+3+4. done
2. thank you very much about that one i realized that i changed my browser font size before and i forget that (every thing was big by default )

his is more of a personal UX thing, but I’m not sure how I feel about the animation on the submit button. Maybe try something a bit more subtle (e.g. a faint slow pulsing effect). It’s not so much about the animation itself but the context it is used in. I feel like that wiggle animation is more of a happy/fun type of animation. I’m not sure it really fits the overall mood of the page. Not that the page gives much context, because we don’t know what the product is, but from the colors and style I still get more of a classy/serious vibe then happy/fun.

5. i think you right about that
(i used to be character animator before so some times i over animate stuff)

i forked it so here is the new link

hmmm… you’re getting interesting :sunglasses: