How can I use insta box from photographer demo in another demo

2 replies · opened Nov 19, 2019

GgorkemdurNov 19, 2019

Hi,

I want to use instagram box (see attached screen shot) in another demo.

What should I do to do that?

I mean which css and/or javascript I need to use?

Thanks,
Gorkem

GgorkemdurNov 26, 2019

I could not get a response for this.

SSemicolon WebSTAFFNov 27, 2019

Hello,

Thanks for your Patience and Really sorry for Late Reply. There is no Javascript Code. You need to add only HTML & CSS3 Codes. Here are your Codes.

HTML Codes:


	
		
			
				
![attachment](demos/photographer/images/icons/instagram.svg)

			
			
			
View Our Instagram Stories

			[instagram ](http://instagram.com/semicolonweb)
		
	

CSS Codes:

.gradient-border {
	--borderSize: 4px; /* Set Border Size */
	position: relative;
	border-radius: 3px;
	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	animation: animatedgradient 3s ease alternate infinite;
	background-size: 300% 300%;
}

.gradient-border:before {
	content: '';
	position: absolute;
	top: var(--borderSize, 4px);
	left: var(--borderSize, 4px);
	height: calc(100% - var(--borderSize, 4px) * 2);
	width: calc(100% - var(--borderSize, 4px) * 2);
	background: #FFF;
	border-radius: 3px;
}

@keyframes animatedgradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard