Join html, css and javascript

Good day everyone,

Have one problem, source from here,

    <div class="offer offer-blocked">
<img src="https://i.sstatic.net/b1oc4.jpg"></img>
  <div class="fb-like" data-href="http://www.windows-help-support.com"    data-send="false" data-width="450" data-show-faces="false"></div>
<div id="fb-root"></div>

    .offer-blocked {
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    top:0;
    left:0;
  }
  img {
    @width: 10px;
    filter: blur(@width);
    // Browser Specific
    -webkit-filter: blur(@width);
    -moz-filter: blur(@width);
    -o-filter: blur(@width);
    -ms-filter: blur(@width);
  }
  .fb-like {
    z-index: 100;
    position: absolute;
    top: 30%;
    left: 30%;
    margin-left:-20px;
    color: #fff;
  }
  .fb-like:after {
    content:"Please click on the LIKE button to unlock the OFFER";
   display:'block';
   position: absolute;
   width: 100%;
   left: 0;
   top: 50px;
    font-size: 25px;
    font-family: verdana;
  }
}

    jQuery( function() {

  window.fbAsyncInit = function() {
// Don't use my app id, use your own or it won't work!
 FB.init({appId: '134385103436857', status: true, cookie: true, xfbml:  true});


    FB.Event.subscribe('edge.create', function(href, widget) {
      console.dir(href);
      console.dir(widget);
    jQuery(".offer.offer-blocked").removeClass("offer-blocked");
    jQuery(".fb-like").hide();
  });
};
(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&                       appId=134385103436857";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

``});

What I need to do is put all this code together into the HTML. This will be later in a wordpress.COM webpage.

Tried to put the code inside of the HTML, inside the and adding the styles inline, but this did not work.

Thank you in advance.

Solution

I think you're looking for the basic structure of html, in html you can include the <style> and <script> tags.

But you can put styles and scripts in separate files and reference in html, see script and style attributes.

<!DOCTYPE html>
<html>
   <head>
       <style type="text/css">
           /*Your style here.*/
       </style>
       <script type="text/javascript">
            //Your script goes here
       </script>
    </head>
    <body>
    </body>
</html>