search

Mct8664 / htmlfooter

I can't keep the footer to change every once in awhile
0 stars 0 forks source link

HTML #1

Open Mct8664 opened 4 years ago

Mct8664 commented 4 years ago

The footer doesn't change as I predicted. It's only listing everything as a paragraph. Here are the codes;

Made with ♥ remotely from

Minneapolis, MN St Cloud, MN Brooklyn Park, MN Frisco, TX Roseville, MN Mbezi Beach, Dar Es Salaam Rodgers, MN Oakland, CA Tanzania Tabata Mwisho Posta Kariakoo Grass Valley, California Eagan,MN Austin, TX Brooklyn Center,MN Blaine,MN Spring Lake, MN Fargo, ND Sioux Falls, SD Mankato, MN Moorhead, MN Everywhere Kigoma, Tanzania

Creatoon commented 4 years ago

okay, I have solved your problem. ( can't wait for solution - go to the end).

see what happens is, you can not animate the span elements directly, in order to animate them you have to set its display property, either it can be display: inline-block or display: block, depending upon what type of layout you want from your footer so if you want a paragraph format (use display: inline-block ) or a long vertical column (use display: block ).

and finally use another property in the span element that is:-

animation-fill-mode: backwards; for reference, you can check this property on Mozilla developers or w3schools.

so in the big words and shortcode.

simply use :-

.remote-locations span { animation: remoteFadeInOut 72s linear infinite 0s; display : inline-block; animation-fill-mode: backwards; }

and this will solve your issue.

Creatoon commented 4 years ago

for any other future helps , i will be easily avilable , feel free to contact me

Mct8664 commented 4 years ago

.remote-locations span { animation: remoteFadeInOut 72s linear infinite 0s; display : inline-block; animation-fill-mode: backwards; }

So where will this code go, at the end and do is still have to keep the span code?

Creatoon commented 4 years ago

simply remove the code you written

.remote-locations span { animation: remoteFadeInOut 72s linear infinite 0s; }

and apply this where you removed that code

.remote-locations span { animation: remoteFadeInOut 72s linear infinite 0s; display : inline-block; animation-fill-mode: backwards; }

Mct8664 commented 4 years ago

simply remove the code you written

.remote-locations span { animation: remoteFadeInOut 72s linear infinite 0s; }

and apply this where you removed that code

.remote-locations span { animation: remoteFadeInOut 72s linear infinite 0s; display : inline-block; animation-fill-mode: backwards; } Yeah I wanted the footer to display like on this site. Check the footer on this site 😭 https://dribbble.com/shots/3917322-Tv-On-Demand-UI-Weekly-Challenges-Season-02-Week-1-10/rebounds