Combining two effects on one page - CSS clashing

[Kittybiccy]

Hi Mike,
I am trying to use both effect 6 and 12 on a page but the supplied CSS is clashing. I've tried to look at your CSS on the main demo page and notice you are renaming things to ehover but could you help me combine the CSS for just those 2? Or any tips you could give would be great - I'm not very technical.
Thanks in advance,
Hannah

[miketricking]

Hi Hannah,

Of course! Yes I renamed them all to use all 12 in my example.

As you are not very technical I would recommend doing it this way just so it really clearly separates both the effects even though some code would be reused. So copy the first effect you want to use and use it.

Then when you copy the code for effect 12 rename all the references of "hovereffect" to "hovereffect2" in the css and html for hover effect 12

So in your case hovereffect will be effect 6 and hovereffect2 will be effect 12.

If this is still confusing let me know

[Kittybiccy]

That's perfect, thanks. Just have to tweak it all now.
One final question (sorry). On the effect 12 you have the social media icons which seem to be pulling in from somewhere. Do you know how I could get these to work/how I can link to them?
Thank you so much for your speedy response!
Hannah

Date: Thu, 18 Feb 2016 07:15:10 -0800
From: notifications@github.com
To: miketricking.github.io@noreply.github.com
CC: kittybiccy@hotmail.com
Subject: Re: [miketricking.github.io] Combining two effects on one page - CSS clashing (#3)

Hi Hannah,

Of course! Yes I renamed them all to use all 12 in my example.

As you are not very technical I would recommend doing it this way just so it really clearly separates both the effects even though some code would be reused. So copy the first effect you want to use and use it.

Then when you copy the code for effect 12 rename all the references of "hovereffect" to "hovereffect2" in the css and html for hover effect 12

So in your case hovereffect will be effect 6 and hovereffect2 will be effect 12.

If this is still confusing let me know

—
Reply to this email directly or view it on GitHub.

[miketricking]

I think this is what you are looking for:

https://fortawesome.github.io/Font-Awesome/get-started/

I am using font-awesome icons for the social media icons. With my code that you have copied it will work. All you need to do is import the font awesome icons by putting:

In the section of your HTML file

[Kittybiccy]

Thanks for the link- that works perfectly!
Kind regards,
Hannah

Date: Thu, 18 Feb 2016 08:04:14 -0800
From: notifications@github.com
To: miketricking.github.io@noreply.github.com
CC: kittybiccy@hotmail.com
Subject: Re: [miketricking.github.io] Combining two effects on one page - CSS clashing (#3)

I think this is what you are looking for:

https://fortawesome.github.io/Font-Awesome/get-started/

I am using font-awesome icons for the social media icons. With my code that you have copied it will work. All you need to do is import the font awesome icons by putting:

In the section of your HTML file

—
Reply to this email directly or view it on GitHub.