UltiCode | Product Landing Page - FeedBack Appreciated! | FCC RWD Project

Hello Beautiful & Awesome Campers! :smiling_face_with_three_hearts::smiling_face_with_three_hearts::smiling_face_with_three_hearts::smiling_face_with_three_hearts:

Just completed the 3rd FCC RWD Project and really appreciate your feedback.

Would love to know areas in which I need to improve upon.

Have An Awesome Day (or Night :hugs:)

1 Like

Nice, this is impressive! The background image appears to shake, and the changing animation can be a little odd. The images also flash when they change.

The title, ULTICODE, overflows on mobile so you’d probably want to look at taking that down.

Nice site! :smiley:

1 Like

Thanks alot!

Would definitely work on that

:handshake::handshake::handshake::handshake:

Okey-dokey !!!

Tried making improvements on it and finally done and dusted !!! :hammer_and_wrench::hammer_and_wrench::hammer_and_wrench:

P.S: Still not impressed with the hero background animation. What do you think of it?
:thinking::thinking::thinking::thinking::thinking:
Should I eliminate it or probably leave it as it is.

Thanks In Advance

I’ll check tomorrow when I’m on desktop :slightly_smiling_face:

Very nice, good job.

  1. Just let the hero animation run one time.

  2. I would change some of the hovers to just use transitions and make them all faster, like a lot faster.

  3. If you want to add a border as a hover effect you have to account for the extra space the element will take up after it has a border, otherwise you end up with elements that jump up and down.

Example for the nav links, I removed the opacity change and it is only the relevant CSS:

#nav-bar .nav-links .nav-link {
  /* 1px margin to counter the transparent border */
  margin: 0 2rem 1px 0;
  /* transparent border */
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}

#nav-bar .nav-links .nav-link:hover {
   /* Just transition the color */
   border-color: #e6eeff;
}

Another example for the card, just the transition CSS. Much simpler and cleaner. It also has an in and out state now, so it transitions back to the original state.

.card {
  transition: transform .4s ease-out;
}

.card:hover {
  transform: scale(1.1);
}
  1. Your icons are acting a little odd at some screen sizes, remove the width: 100px; from the .f-ico class.

  2. I would stack the cards sooner, like around 1020px.

  3. I would separate the Features and Pricing sections more.

  4. Make the video responsive.

  5. Organize your CSS a little better, follow the source order and group related CSS. Example, the card hover selector should be near the card selector.

  6. Name your animations something others can understand. Example, sub. That does not tell me anything, I can gather it is for the subscribe buttons if I look, but that isn’t really the point of the animation name. Call it something descriptive like invertButton. Or better yet, don’t tie its name to any element and just call it invert. That way you can use it on other elements and it will still make sense what it does.

Here is a fork of your project with some of the changes and a few comments.

Again very nice page I really do like a lot of what you have done, good use of colors as well. I looked at some of your other projects and they are also great. You definitely have design skills.

Note: I liked the page and had nothing much better to do so that is why the feedback is a bit long. Hopefully, you see this as constructive feedback and not too overwhelming. It also gave me a chance to work on something, so I will admit my reasons may also be a bit selfish. :slight_smile:

I like it. I’m just starting so yours seems pretty impressive to me. I like how you added extra icons. Thanks for sharing and inspiring. :slight_smile:

Thanks a lot :+1: :+1: :+1: :+1: :+1:

I would only get rid of the shadows under the containers. Flat design is better.

Thanks a lot. Really appreciate it. Was finally able to understand some areas of advanced CSS I was trying to figure out… Thanks a bunch. :star_struck::star_struck::star_struck::star_struck::star_struck:

Was finally able to fork the awesome changes you made and also applied them. Might have forgotten some though :smiley::smiley::smiley::smiley::smiley:

Thanks :+1: :+1: :+1: :+1: :+1:. But what do you think, if I just reduced the blur radius. Kind of like the Material Design shadow concept

:grinning: :grinning: :grinning: :grinning: :grinning:

Your animations are well done!

Thanks A Lot :+1: :+1: :+1::+1: :+1:

1 Like

Happy to help.

Did you check out the responsive video part I added? You haven’t implemented it.