I am trying to make a code widget appear on the page;
-
Do i put the codes CSS in the or the part of the page settings?
-
Is there anything that i need to preface my pasted code with, such as before i post in the code; and once the code has finished?
For the widget i seek to embed, i posted in the correct html and css, yet it failed to render. This is why i ask; and i do understand it could be the developer’s faulty code, but it also could be me not doing the right steps in pasting the code in the CSS section.
Thank you,
Elliot
p.s.
heres the code i posted in css:
.xoWrap {
height:300px;
padding:50px 0;
position: relative;
text-align: center;
margin:0 auto;
width:260px;
transform:translate3d(30px,0,0);
}
.xoShadowBack {
perspective: 800px;
perspective-origin: 50% 100px;
}
.xoShadow {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.xoShadow div{
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0px 0px 50px #000;
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.xoCubeBack {
perspective: 800px;
perspective-origin: 50% 100px;
}
.xoCube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.xoCube a {
outline:none;
width:100%;
height:100%;
display:block;
}
.xoCube i {
padding: 40px 0;
color:white;
font-size:8em;
}
.xo1 i {
transition:color .25s ease;
}
.xo1:hover i,
.xo2:hover i,
.xo3:hover i,
.xo4:hover i {
color:black;
transition:color .25s ease;
}
.xoCube div {
position: absolute;
width: 200px;
height: 200px;
box-shadow: inset 0 0 50px #555, 0 0 2px #555;
}
.xo1 {
transform: translateZ(100px);
background-color: #3b5998;
}
.xo2 {
transform: translateZ(-100px) rotateY(180deg);
background-color: #517fa4;
}
.xo4 {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
background-color: #cb2027;
}
.xo3 {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
background-color: #00aced;
}
.xoCube,
.xoShadow {
animation: xoSpin 20s infinite linear;
}
@keyframes xoSpin {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(-360deg);
}
}