UFC gym landing page

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.


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

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

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

It looks super awesome! Congrats!

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

1 Like

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

@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


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…

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