Personal Portfolio icons animation

HTML-CSS
1

Hello everyone. This is my portfolio with html and css. I have a question:
Why don’t the contact icons (at the bottom of the page) have animation after I specified them clearly in the 111-118 css file?
Also, I accept some feedback or/and advice. I know it’s ugly :grimacing:, but I’m very bad at design, I’m working on it.
Thank you .

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0.

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

Because the elements are inline. Set the links to be inline-block (or some other non-inline display type).

.icon-efect{
  display: inline-block;
  transition: transform 0.3s ease-out;
}

Maybe check out one of the color palette generator web sites for some color inspiration.

3

Awesome !! It’s working now. I need to find more info about that. :thinking: Thank you very much for your quick response and for your explanation. I will check some color palette. :+1:

4

You can check out the MDN link, or the specs, but it quickly gets a little technical.

transform

Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

transformable element

A transformable element is an element in one of these categories:

all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],

all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].

1 Like
5
  • You have a lot of duplicate id's. Remember, an id must be unique within the document.
  • img elements, except under certain circumstances, must have an alt attibute.

https://www.w3.org/wiki/HTML/Usage/TextAlternatives

1 Like
6

Thank you again. MDN its my favorite place for reference. …I have to keep that in mind every time I use transform :sweat_smile:

7

Oh you’re right! That’s a big mistake. Thank you very much :+1: