! - " ", . ?


HTML:
PHP :
        <div class="s-btn">
          <
a href="#how-to-start" class="btn"> </a>
        </
div

PHP :
      <div id="how-to-start">
        <
div class="how-to">
          <
h2></h2>
            <
h3></h3>
      </
div>
      </
div

CSS:
PHP :
#how-to-start {
    
positionabsolute;
    
width100%;
    
height100%;
    
top0;
    
left0;
    
background-colorrgba(000.8);
}

.
dowl-btn {
  
margin-top34px;
  
padding-left42px;
}

.
how-to {
  
border-radius18px;
    
positionabsolute;
    
width700px;
    
left50%;
    
top50%;
    
transformtranslate(-50%, -50%);
    
padding40px;
    
box-sizingborder-box;
    
background-color#fff;
    
color#29272D;
  
box-shadow0 6px 55px #29272D;
  
text-aligncenter;
  
text-transformuppercase;
}

.
how-to h3 {
  
font18px/22px 'TT Norms'sans-serif;
  
text-transformnone;
  
margin-top: -24px;
  
font-size16px;
}

.
how-to h4 {
  
margin-top40px;
  
margin-bottom20px;
  
font-size14px;
  
color#D0D0D0;


JS:
PHP :
$('.btn').click(function() {
    $(
'#how-to-start').fadeIn();
    $(
'#how-to-start').addClass('disabled');
}); 
//     

$('.close').click(function() {
    $(
'#how-to-start').fadeOut();

}); 
//     

$(document).mouseup(function (e) {
    var 
popup = $('.how-to');
    if (
e.target!=popup[0]&&popup.has(e.target).length === 0){
        $(
'#how-to-start').fadeOut();
    }
});  
//