Tribute page - monochromatic style

Hello everyone… I’ve just finished my tribute page project. I’m not the best at design so this is really simple. But I can’t figure out what else to do: https://codepen.io/nikkiczx/pen/gORYPKX

Here are some things I did:

  1. Animation - I added some animation to the buttons when you hover over them.

  2. Box-shadows - I have 2 different box shadow designs
    i. Image. I like that it makes the image look like it’s floating.
    ii. Content section. Just to give colour to that section, and it was more of the colour bleeding into the page.
    iii. Buttons. Similar to the image but different shadow colour.

  3. I added a linear gradient for for the h1 text but it looks like the gradient went on the background and the style being monochromatic, it’s a little hard to see the transition of colour from a lighter shade to a slightly darker shade.

For accessibility’s sake, I couldn’t decide if the colour (teal?) was too bright, especially for the buttons. Does anybody know?

Feedback is highly encouraged. Thank you in advanced! :smiley:

I think it looks amazing and very creative!

.button:hover {
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;

Very cool teal bounce buttons does give a bit of 90’s nostalgic web feel when many used to do this and I kinda like it.

What? You mean I’m 30 years too late? :joy:

Anyways, thank you for saying nice things. Much appreciated :bowing_woman:

I’m thinking of attempting a…how do I explain this… an animation where it draws the outline/border of a button when you hover over it. It’s been something that’s niggling at me. I’ll find out if that’s at all possible :upside_down_face:

All good. You’re doing awesome!

Definately can be done.

1 Like

Ahhh!! You’re a star! Will definitely check that out! :star_struck:

1 Like

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