UFC gym landing page

Code Feedback
1

Hi guys!

This is the last landing page I am going to make for the moment, I am going to move onto the next project from tomorrow.

https://codepen.io/ValerioCipolla/pen/eYvymaE?editors=1000

I tried my best with this one to make it look as good as I could, the idea was to make something to be proud to show on my portfolio (when I will make one).

I tried applying all the things I learned and I tried doing it all on my own without looking at previous codes.

Feedback is highly appreciated!

Thank you!

1 Like
2

Congrats on finishing this challenge. It looks nice. One thing to mention is that it is not a bad thing if you look at previous challenges to finish the projects. No one can memorize everything and everyone is searching for a solution when they face an issue. Don’t be shy to look/search for what you are stuck on. Overall the page looks great :grinning:

1 Like
3

Thank you @ErFy!
Yes I did exactly that, I looked at other projects whenever I got stuck somewhere.
I know there is so many things! it’s impossible to remember all of them!
Thanks for your feedback

4

It looks super awesome! Congrats!

You just gave me an idea to use Font Awesome icons! Cheers!

1 Like
5

It looks really nice!

One thing I noticed, is that when I hover the top-right links, the hover effect is puhing the buttons to the left. I think the padding is the one causing this, so maybe you could consider adding the same padding to the normal links (without hover):

.nav-link {
  text-decoration: none;
  text-transform: uppercase;
  color: #FFF;
  padding: 5px; /* try this */
}

This behaviour could also be due to font-weight: 600; , but I’m not sure.

1 Like
6

@Darthcolo Thank you for your feedback. Yes I knew there was this little problem, I just put it off for a while but It’s fixed now.

I added the padding on .nav-link when (min-width: 600) - because it wasn’t giving me the problem with a width < 600, since the nav was a column and not a row.

Interestingly I had to add a padding of 10px and not 5px to fix the problem. I guess that’s because the 5px padding in .nav-link:hover means 5px on both sides, which adds up to 10.

Thanks for spotting that

2 Likes
7

This gives an awesome retro look to me. However I suggest to try some modern gradients too… Just suggestion to play around with, you already have a design if you don’t like the new look btw but it’s worth trying…

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.