HTML Box Pro Prestashop- Code Not displaying

Question

I am using HTML Box Pro module from Prestashop addons store, contacted them several times to say that it does not work after adding hooks to the .tpl file etc. with no response and this is a project I need to finish before December, code below just incase I'm formatting wrong

any help greatly appreciated

<style><!--
body
{
/*background-color:#f0f0f0;*/
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2BmZU1kR795PbCjY--    wGWcdHvgdq4oM43UgpHSGKF6rk-qrhMiEFqGFe-) no-repeat;
width: auto;
height: auto;
background-size: contain;
}

.container
{
margin:0 auto;
width:90%;
}
.perspective
{
background: url("http://www.gadgetsuk.com/behind1.jpg");
background-repeat: no-repeat;
background-position: center center;
position: relative;
display: inline;
float: left;
height: 395px;
width: 395px;
margin: 20px;
margin-left: 140px;
margin-top: 125px;
-webkit-perspective: 450;
border-radius: 3px;
box-sizing: border-box;
z-index: 1;
}

.thumb
{
background: url("http://www.gadgetsuk.com/a1.jpg");
background-repeat: no-repeat;
background-position: center center;
width: 400px;
height: 400px;
position: absolute;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset;
transition: 1s transform linear;
transform-origin: left;
cursor: pointer;
 }

.thumbOpened
{
transform: rotateY(-90deg);
transform-origin: 8px;
transition: .5s linear;
 }

.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #000;

transform-origin: left;
transform:rotateY(180deg);
opacity:0;
animation-name: go;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-delay: 0.5s;
width:350px;
}
@keyframes go {
100%{
opacity:1;
transform:rotateY(0deg);
}
}
--></style>
<script type="text/javascript">// <![CDATA[
function openDoor(field) {
var y = $(field).find(".thumb");
var x = y.attr("class");
if (y.hasClass("thumbOpened")) {
y.removeClass("thumbOpened");
}
else {
$(".thumb").removeClass("thumbOpened");
y.addClass("thumbOpened");
}
}
// ]]></script>

Answer 1

You could try to open this module files modules/yourmodule/ 1. Check main .PHP file. You should assign JS / CSS files to header to get in use this. 2. Write CSS to CSS file 3. Write JS to JS file 4. Now check your HOOK and return to this HOOK your .TPL FILE.

Now you can USE this CSS style and JS and do whatever you want.

You can`t add hook in module .tpl you must do it in .PHP file. But You can write {HOOK_YOURHOOK} to show a hook in that place.