VIDEO
HTML Beginner’s Tutorial:Hyper Text Markup Language, HTML Basics
Welcome to our HTML beginner’s tutorial. This tutorial is designed for absolute beginners with no previous knowledge of HTML. By the end of this tutorial, you will have a good understanding of the basics of Hyper Text Markup Language and will be able to create a simple web page using HTML.
What is HTML?
HTML elements are the building blocks of an HTML document. An HTML element is everything from the start tag to the end tag:
The start tag is also called the opening tag, and the end tag is also called the closing tag.
All HTML documents must start with a document type declaration: .
The document type declaration tells the web browser about the version of HTML used in the document.
The element is the root element of an HTML page:
All other elements must be children of this element.
The
element contains all the contents of an HTML page:
The
element contains information about your page which isn’t shown on your page:
The
element specifies a title for your page which is shown in browsers’ title bar or tab bar: </p>
<p> You can see how all these elements are nested inside each other in the code example below:<br />
HTML code example: </p>
<p><!DOCTYPE html> <!--document type declaration--><br />
<html> <!--root element--><br />
<body> <!--contains all body content--> </p>
<h1>My First Heading</h1>
<p> <!--heading--> </p>
<p>My first paragraph.</p>
<p> <!--paragraph--><br />
</body> <!--closing tag for body content--><br />
</html> <!--closing tag for root element--> –></p>
<p> How do I create an HTML file? –> An HTML file must have two parts: a head and a body : –> The head part contains information about your page which isn’t shown on your page. This includes things like your page’s title and CSS stylesheets . –> The body part contains all the contents of your page which are shown on your page (i.e., what you see when you visit a website). This includes things like text, images, videos, etc. To create an HTML file, you can use any text editor (e.g., Notepad++ ,Sublime Text , Atom ). When you’re done editing your file, save it with an .html extension (e.g., mypage.html ). Now you can open your file in a web browser (e.g., Google Chrome , Mozilla Firefox , Microsoft Edge ) and view your web page! –> That’s all there is to it! In the next section, we’ll go over some basic tags that are commonly used in HTML documents.</p>
</div>
<div class="tags-bg p-2 mt-3 mb-3">
</div>
<nav class="navigation post-navigation" aria-label="Posts">
<h2 class="screen-reader-text">Post navigation</h2>
<div class="nav-links"><div class="nav-previous"><a href="https://www.recue.com/mac-pc-flash-web-banner-ad-on-cnn-com/" rel="prev"><span class="meta-nav" aria-hidden="true">Previous</span> <span class="screen-reader-text">Previous post:</span> <span class="post-title">Mac/PC Flash web banner ad on CNN.com</span></a></div><div class="nav-next"><a href="https://www.recue.com/how-to-post-craigslist-ads-without-getting-flagged-why-craigslist-flagged-my-post-craigslist/" rel="next"><span class="meta-nav" aria-hidden="true">Next</span> <span class="screen-reader-text">Next post:</span> <span class="post-title">How To Post CRAIGSLIST Ads Without Getting Flagged ! WHY Craigslist Flagged My Post ! CRAIGSLIST</span></a></div></div>
</nav> <div class="related-post">
<h3 class="py-3">Related Post</h3>
<div class="row">
<div class="col-lg-4 col-md-6">
<article id="post-93527" class="inner-service post-93527 post type-post status-publish format-standard has-post-thumbnail hentry category-html-php-javascript">
<div class="post-main-box p-3 mb-3 text-center wow zoomIn" data-wow-duration="2s">
<div class="box-image">
<img width="1280" height="720" src="https://www.recue.com/wp-content/uploads/2023/04/1682788173_maxresdefault.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="https://www.recue.com/wp-content/uploads/2023/04/1682788173_maxresdefault.jpg 1280w, https://www.recue.com/wp-content/uploads/2023/04/1682788173_maxresdefault-300x169.jpg 300w, https://www.recue.com/wp-content/uploads/2023/04/1682788173_maxresdefault-1024x576.jpg 1024w, https://www.recue.com/wp-content/uploads/2023/04/1682788173_maxresdefault-768x432.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px" /> </div>
<h2 class="section-title mt-0 pt-0"><a href="https://www.recue.com/html-tutorial-beginner-to-advance-text-formatting/">HTML Tutorial Beginner to Advance (Text Formatting)<span class="screen-reader-text">HTML Tutorial Beginner to Advance (Text Formatting)</span></a></h2>
<div class="new-text">
<p>
Text Formatting Tags are discussed in this Videos such as Strong Emphasize del Strike Blockquote q small address code and … </p>
</div>
<div class="more-btn mt-4 mb-4">
<a class="p-3" href="https://www.recue.com/html-tutorial-beginner-to-advance-text-formatting/">Read More<span class="screen-reader-text">Read More</span></a>
</div>
</div>
<div class="clearfix"></div>
</article>
</div>
<div class="col-lg-4 col-md-6">
<article id="post-119478" class="inner-service post-119478 post type-post status-publish format-standard has-post-thumbnail hentry category-html-php-javascript">
<div class="post-main-box p-3 mb-3 text-center wow zoomIn" data-wow-duration="2s">
<div class="box-image">
<img width="1280" height="720" src="https://www.recue.com/wp-content/uploads/2023/12/1703933185_maxresdefault.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" srcset="https://www.recue.com/wp-content/uploads/2023/12/1703933185_maxresdefault.jpg 1280w, https://www.recue.com/wp-content/uploads/2023/12/1703933185_maxresdefault-300x169.jpg 300w, https://www.recue.com/wp-content/uploads/2023/12/1703933185_maxresdefault-1024x576.jpg 1024w, https://www.recue.com/wp-content/uploads/2023/12/1703933185_maxresdefault-768x432.jpg 768w" sizes="(max-width: 1280px) 100vw, 1280px" /> </div>
<h2 class="section-title mt-0 pt-0"><a href="https://www.recue.com/javascript-onsubmit-event-tutorial-for-beginners-how-to-handle-forms-in-javascript/">Javascript OnSubmit Event Tutorial for Beginners | How to Handle Forms in Javascript<span class="screen-reader-text">Javascript OnSubmit Event Tutorial for Beginners | How to Handle Forms in Javascript</span></a></h2>
<div class="new-text">
<p>
Welcome Folks My name is Gautam and Welcome to Coding Shiksha a Place for All Programmers. You can learn Web … </p>
</div>
<div class="more-btn mt-4 mb-4">
<a class="p-3" href="https://www.recue.com/javascript-onsubmit-event-tutorial-for-beginners-how-to-handle-forms-in-javascript/">Read More<span class="screen-reader-text">Read More</span></a>
</div>
</div>
<div class="clearfix"></div>
</article>
</div>
<div class="col-lg-4 col-md-6">
<article id="post-9612" class="inner-service post-9612 post type-post status-publish format-standard has-post-thumbnail hentry category-html-php-javascript tag-html-basics">
<div class="post-main-box p-3 mb-3 text-center wow zoomIn" data-wow-duration="2s">
<div class="box-image">
<img width="640" height="360" src="https://www.recue.com/wp-content/uploads/2022/01/Stock-Market-Basics--A-Simple-Way-to-Turn-Your-Pennies-Into-Dollars.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Stock Market Basics – A Simple Way to Turn Your Pennies Into Dollars" decoding="async" srcset="https://www.recue.com/wp-content/uploads/2022/01/Stock-Market-Basics--A-Simple-Way-to-Turn-Your-Pennies-Into-Dollars.png 640w, https://www.recue.com/wp-content/uploads/2022/01/Stock-Market-Basics--A-Simple-Way-to-Turn-Your-Pennies-Into-Dollars-300x169.png 300w" sizes="(max-width: 640px) 100vw, 640px" /> </div>
<h2 class="section-title mt-0 pt-0"><a href="https://www.recue.com/stock-market-basics-a-simple-way-to-turn-your-pennies-into-dollars/">Stock Market Basics – A Simple Way to Turn Your Pennies Into Dollars<span class="screen-reader-text">Stock Market Basics – A Simple Way to Turn Your Pennies Into Dollars</span></a></h2>
<div class="new-text">
<p>
When it comes to the complex world of invest vehicles, knowing which stocks to “drive” down the road to financial success means you have to know the stock market basics. </p>
</div>
<div class="more-btn mt-4 mb-4">
<a class="p-3" href="https://www.recue.com/stock-market-basics-a-simple-way-to-turn-your-pennies-into-dollars/">Read More<span class="screen-reader-text">Read More</span></a>
</div>
</div>
<div class="clearfix"></div>
</article>
</div> </div>
</div>
</article><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<div id="amzn-assoc-ad-90f901ba-fbc9-4246-9599-3d26a31c2f42"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=90f901ba-fbc9-4246-9599-3d26a31c2f42"></script></div>
<div class="navigation">
<div class="clearfix"></div>
</div>
</div>
<div class="col-lg-4 col-md-4" id="sidebar"><aside id="search-2" class="widget mb-5 p-3 widget_search">
<form method="get" class="search-form" action="https://www.recue.com/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="SEARCH" value="" name="s">
</label>
<input type="submit" class="search-submit" value="SEARCH">
</form></aside><aside id="block-3" class="widget mb-5 p-3 widget_block">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h2 class="wp-block-heading">Recent Posts</h2>
<ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/milken-institute-global-conference-5-06-2024/">Milken Institute Global Conference 5/06/2024</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/the-marketing-expert-how-to-get-more-sales-loyal-customers-and-bigger-promotions/">The Marketing Expert: How to Get More Sales, Loyal Customers, and Bigger Promotions</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/how-to-make-money-online-by-performing-simple-online-earning-tasks-%f0%9f%94%a5-really-%e2%81%89%ef%b8%8f/">How to Make Money Online by Performing Simple Online Earning Tasks 🔥 Really ⁉️</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/shortcut-in-ms-word-to-change-all-caps-msword-mswordshortcuts-shorts/">Shortcut in MS Word to change ALL CAPS #msword #mswordshortcuts #shorts</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/create-ai-automatic-wordpress-website-part-2%f0%9f%94%a5using-chatgpt-api-youtube-to-wp-full-site-setup/">Create AI Automatic WordPress Website Part 2🔥Using ChatGPT & API | YouTube to WP | Full Site Setup</a></li>
</ul></div></div>
</aside><aside id="block-6" class="widget mb-5 p-3 widget_block">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h2 class="wp-block-heading">Categories</h2>
<ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-23"><a href="https://www.recue.com/category/traffic-generation/advertising/">ADVERTISING</a>
</li>
<li class="cat-item cat-item-13"><a href="https://www.recue.com/category/make-money-online/affiliate-marketing/">AFFILIATE MARKETING</a>
</li>
<li class="cat-item cat-item-35"><a href="https://www.recue.com/category/websites/automation/">AUTOMATION</a>
</li>
<li class="cat-item cat-item-28"><a href="https://www.recue.com/category/traffic-generation/banners/">BANNERS</a>
</li>
<li class="cat-item cat-item-15912"><a href="https://www.recue.com/category/bonus/">BONUS</a>
</li>
<li class="cat-item cat-item-30"><a href="https://www.recue.com/category/websites/building-websites/">BUILDING WEBSITES</a>
</li>
<li class="cat-item cat-item-22"><a href="https://www.recue.com/category/traffic-generation/content-traffic/">CONTENT TRAFFIC</a>
</li>
<li class="cat-item cat-item-11"><a href="https://www.recue.com/category/make-money-online/copywriting/">COPYWRITING</a>
</li>
<li class="cat-item cat-item-27"><a href="https://www.recue.com/category/traffic-generation/craigslist/">CRAIGSLIST</a>
</li>
<li class="cat-item cat-item-17"><a href="https://www.recue.com/category/marketing/email-marketing/">EMAIL MARKETING</a>
</li>
<li class="cat-item cat-item-14"><a href="https://www.recue.com/category/make-money-online/freelancing/">FREELANCING</a>
</li>
<li class="cat-item cat-item-32"><a href="https://www.recue.com/category/websites/html-php-javascript/">HTML PHP JAVASCRIPT</a>
</li>
<li class="cat-item cat-item-29"><a href="https://www.recue.com/category/traffic-generation/keywords/">KEYWORDS</a>
</li>
<li class="cat-item cat-item-15"><a href="https://www.recue.com/category/marketing/lead-generation/">LEAD GENERATION</a>
</li>
<li class="cat-item cat-item-6"><a href="https://www.recue.com/category/make-money-online/">MAKE MONEY ONLINE</a>
</li>
<li class="cat-item cat-item-7"><a href="https://www.recue.com/category/marketing/">MARKETING</a>
</li>
<li class="cat-item cat-item-20"><a href="https://www.recue.com/category/marketing/mobile-marketing/">MOBILE MARKETING</a>
</li>
<li class="cat-item cat-item-26"><a href="https://www.recue.com/category/traffic-generation/ppc/">PPC</a>
</li>
<li class="cat-item cat-item-21"><a href="https://www.recue.com/category/traffic-generation/seo/">SEO</a>
</li>
<li class="cat-item cat-item-24"><a href="https://www.recue.com/category/traffic-generation/social-traffic/">SOCIAL TRAFFIC</a>
</li>
<li class="cat-item cat-item-25"><a href="https://www.recue.com/category/traffic-generation/solo-ads/">SOLO ADS</a>
</li>
<li class="cat-item cat-item-9"><a href="https://www.recue.com/category/traffic-generation/">TRAFFIC GENERATION</a>
</li>
<li class="cat-item cat-item-1"><a href="https://www.recue.com/category/uncategorized/">Uncategorized</a>
</li>
<li class="cat-item cat-item-18"><a href="https://www.recue.com/category/marketing/video-marketing/">VIDEO MARKETING</a>
</li>
<li class="cat-item cat-item-10"><a href="https://www.recue.com/category/websites/">WEBSITES</a>
</li>
<li class="cat-item cat-item-31"><a href="https://www.recue.com/category/websites/wordpress/">WORDPRESS</a>
</li>
</ul></div></div>
</aside></div>
</div>
<div class="clearfix"></div>
</main>
</div>
<footer role="contentinfo">
<aside id="footer" class="copyright-wrapper" role="complementary" aria-label="Footer">
<div class="container">
<div class="row">
<div class="footer_hide col-xs-12 footer-block">
</div>
<div class="footer_hide col-xs-12 footer-block">
</div>
<div class="footer_hide col-xs-12 col-xs-12 footer-block">
</div>
<div class="footer_hide col-xs-12 footer-block">
</div>
</div>
</div>
</aside>
<div id="footer-2" class="pt-3 pb-3 text-center">
<div class="copyright container">
<!---
<p class="mb-0"><a href=https://www.vwthemes.com/themes/free-review-wordpress-theme/ target='_blank'>Affiliate Review WordPress Theme</a> By VWThemes</p>
--->
<a href="#" class="scrollup"><i class="fas fa-long-arrow-alt-up"></i><span class="screen-reader-text">Scroll Up</span></a>
</div>
<div class="clear"></div>
</div>
</footer>
<div class="mysticky-welcomebar-fixed mysticky-welcomebar-position-top mysticky-welcomebar-showx-desktop mysticky-welcomebar-showx-mobile mysticky-welcomebar-display-desktop mysticky-welcomebar-display-mobile mysticky-welcomebar-attention-default mysticky-welcomebar-entry-effect-slide-in" style="" data-after-triger="after_a_few_seconds" data-triger-sec="0" data-position="top" data-height="60" data-rediect="close_bar" data-aftersubmission="dont_show_welcomebar">
<div class="mysticky-welcomebar-fixed-wrap">
<div class="mysticky-welcomebar-content">
<p>IMPORTANT NEWS - Just added - Free QR Code Generator for your blog or website, advertisments, salesletters- Take a look at this incredible opportunity to give your business the BIG BOOST it needs to grow and prosper! <a href="https://www.recue.com/QR/" target="_blank"><font color="#0000FF"><b><u>TRY IT NOW</u></b></font></a></p>
</div>
<div class="mysticky-welcomebar-btn">
<a href="javascript:void(0)" >Got it!</a>
</div>
<a href="javascript:void(0)" class="mysticky-welcomebar-close">X</a>
</div>
</div>
<script>
jQuery(document).ready(function($){
var adminBarHeight = 0;
if ( $("#wpadminbar").length != 0 ){
var adminBarHeight = $('#wpadminbar').height();
}
var mysticky_welcomebar_height = adminBarHeight + jQuery( '.mysticky-welcomebar-fixed' ).outerHeight();
if( jQuery( '.mysticky-welcomebar-fixed' ).data('position') == 'top' ) {
jQuery( '.mysticky-welcomebar-entry-effect-slide-in.mysticky-welcomebar-fixed' ).css( 'top', '-' + mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-entry-effect-slide-in.mysticky-welcomebar-fixed' ).css( 'bottom', '-' + mysticky_welcomebar_height + 'px' );
}
var divi_topbar_height = $( '.et_fixed_nav #top-header' ).outerHeight();
var divi_total_height = mysticky_welcomebar_height + divi_topbar_height;
var welcombar_aftersubmission = $( '.mysticky-welcomebar-fixed' ).data('aftersubmission');
if( welcombar_aftersubmission == 'dont_show_welcomebar' ){
var welcomebar_storage = localStorage.getItem("welcomebar_close");
} else if( welcombar_aftersubmission == 'show_welcomebar_next_visit' ) {
var welcomebar_storage = sessionStorage.getItem("welcomebar_close");
} else {
sessionStorage.removeItem('welcomebar_close');
localStorage.removeItem('welcomebar_close');
var welcomebar_storage = null;
}
if ( welcomebar_storage === null ){
var after_trigger = jQuery( '.mysticky-welcomebar-fixed' ).data('after-triger');
jQuery( 'body' ).addClass( 'mysticky-welcomebar-apper' );
if ( after_trigger == 'after_a_few_seconds' ) {
if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-desktop' ) ) {
if ( $( window ).width() > 767 ) {
var trigger_sec = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec') * 1000;
var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position');
var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight();
setTimeout(function(){
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' );
$( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' );
if ( welcombar_position == 'top' ) {
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', (adminBarHeight + 0) + 'px' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-bottom', '' );
jQuery( '#mysticky_divi_style' ).remove();
jQuery( '.et_fixed_nav #top-header' ).css( 'top', welcombar_height + 'px' );
jQuery( 'head' ).append( '<style id="mysticky_divi_style" type="text/css">.et_fixed_nav #main-header {top: ' + welcombar_height + 'px !important}.et_fixed_nav #top-header + #main-header{top: ' + divi_total_height + 'px !important}</style>' );
$( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' );
$( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-top', '' );
jQuery( '#mysticky_divi_style' ).remove();
jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' );
$( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' );
}
}, trigger_sec );
}
}
}
if ( $( window ).width() < 767 ) {
if ( after_trigger == 'after_a_few_seconds' ) {
if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) {
var trigger_sec = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec') * 1000;
var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position');
var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight();
setTimeout(function(){
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' );
$( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' );
jQuery( '#mysticky_divi_style' ).remove();
jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' );
if ( welcombar_position == 'top' ) {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-bottom', '' );
$( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' );
$( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-top', '' );
$( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' );
}
}, trigger_sec );
}
}
}
mystickyelements_present();
}
$( window ).resize( function(){
var mysticky_welcomebar_height = jQuery( '.mysticky-welcomebar-fixed' ).outerHeight();
if( welcombar_aftersubmission == 'dont_show_welcomebar' ){
var welcomebar_storage = localStorage.getItem("welcomebar_close");
} else if( welcombar_aftersubmission == 'show_welcomebar_next_visit' ) {
var welcomebar_storage = sessionStorage.getItem("welcomebar_close");
} else {
sessionStorage.removeItem('welcomebar_close');
localStorage.removeItem('welcomebar_close');
var welcomebar_storage = null;
}
if ( welcomebar_storage === null ){
var after_trigger = jQuery( '.mysticky-welcomebar-fixed' ).data('after-triger');
if ( ! $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-notapper' ) ) {
jQuery( 'body' ).addClass( 'mysticky-welcomebar-apper' );
} else {
jQuery( 'body' ).removeClass( 'mysticky-welcomebar-apper' );
}
if ( after_trigger == 'after_a_few_seconds' ) {
var trigger_sec = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec') * 1000;
var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position');
var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight();
if ( $( window ).width() < 767 ) {
if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) {
setTimeout(function(){
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' );
$( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' );
jQuery( '#mysticky_divi_style' ).remove();
jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' );
if ( welcombar_position == 'top' ) {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-bottom', '' );
$( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' );
$( '.mysticky-welcomebar-apper #mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-top', '' );
$( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' );
}
}, trigger_sec );
}
} else {
if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-desktop' ) ) {
setTimeout(function(){
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' );
$( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' );
if ( welcombar_position == 'top' ) {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-bottom', '' );
jQuery( '#mysticky_divi_style' ).remove();
jQuery( '.mysticky-welcomebar-apper.et_fixed_nav #top-header' ).css( 'top', welcombar_height + 'px' );
jQuery( 'head' ).append( '<style id="mysticky_divi_style" type="text/css">.mysticky-welcomebar-apper.et_fixed_nav #main-header {top: ' + welcombar_height + 'px !important}.mysticky-welcomebar-apper.et_fixed_nav #top-header + #main-header{top: ' + divi_total_height + 'px !important}</style>' );
$( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' );
$( '.mysticky-welcomebar-apper #mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-top', '' );
jQuery( '#mysticky_divi_style' ).remove();
jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' );
$( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' );
}
}, trigger_sec );
}
}
}
mystickyelements_present();
}
} );
jQuery(window).on( 'scroll', function(){
if( welcombar_aftersubmission == 'dont_show_welcomebar' ){
var welcomebar_storage = localStorage.getItem("welcomebar_close");
} else if( welcombar_aftersubmission == 'show_welcomebar_next_visit' ) {
var welcomebar_storage = sessionStorage.getItem("welcomebar_close");
} else {
sessionStorage.removeItem('welcomebar_close');
localStorage.removeItem('welcomebar_close');
var welcomebar_storage = null;
}
if ( welcomebar_storage === null ){
var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight();
var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position');
if ( welcombar_position == 'top' ) {
$( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
}
if ( after_trigger === 'after_scroll' ) {
var scroll = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
var after_scroll_val = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec');
var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position');
var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight();
if( scroll > after_scroll_val ) {
if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-desktop' ) ) {
if ( $( window ).width() > 767 ) {
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' );
$( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' );
if ( welcombar_position == 'top' ) {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', (adminBarHeight+ 0 ) + 'px' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-bottom', '' );
$( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' );
$( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-top', '' );
$( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' );
}
}
}
if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) {
if ( $( window ).width() < 767 ) {
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' );
$( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' );
if ( welcombar_position == 'top' ) {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight +0 ) + 'px' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-bottom', '' );
$( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' );
$( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' );
jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' );
$( 'html' ).css( 'margin-top', '' );
$( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' );
}
}
}
}
}
mystickyelements_present();
}
});
jQuery( '.mysticky-welcomebar-close, .mysticky-welcomebar-btn a' ).on( 'click', function(){
if( welcombar_aftersubmission != 'show_welcomebar_every_page' ){
if( welcombar_aftersubmission == 'dont_show_welcomebar' ){
sessionStorage.removeItem('welcomebar_close');
localStorage.setItem('welcomebar_close', 'close');
} else if( welcombar_aftersubmission == 'show_welcomebar_next_visit' ) {
localStorage.removeItem('welcomebar_close');
sessionStorage.setItem('welcomebar_close', 'close');
}
}
var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position');
var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight();
jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-notapper' );
jQuery( 'body' ).removeClass( 'mysticky-welcomebar-apper' );
jQuery( '.mysticky-welcomebar-fixed' ).slideUp( 'slow' );
if ( welcombar_position == 'top' ) {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', '-' + mysticky_welcomebar_height + 'px' );
} else {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '-' + mysticky_welcomebar_height + 'px' );
}
jQuery( '#mysticky_divi_style' ).remove();
jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' );
jQuery( 'html' ).css( 'margin-top', '' );
jQuery( 'html' ).css( 'margin-bottom', '' );
$( '#mysticky-nav' ).css( 'top', '0px' );
/*if mystickyelements show*/
var mystickyelements_show = $( '.mystickyelements-fixed' ).length;
if( mystickyelements_show && $( window ).width() <= 1024 && $( '.mystickyelements-fixed' ).hasClass( 'mystickyelements-position-mobile-top' ) && welcombar_position == 'top' ) {
var mystickyelements_height = $( '.mystickyelements-fixed' ).height();
$( '.mystickyelements-fixed' ).css( 'top', '' );
$( 'html' ).attr( 'style', 'margin-top: ' + mystickyelements_height + 'px !important' );
}
} );
});
function mystickyelements_present() {
var after_trigger = jQuery( '.mysticky-welcomebar-fixed' ).data('after-triger');
var mystickyelements_show = jQuery( '.mystickyelements-fixed' ).length;
var welcombar_position = jQuery( '.mysticky-welcomebar-fixed' ).data('position');
var adminBarHeight = 0;
if ( jQuery("#wpadminbar").length != 0 ){
var adminBarHeight = jQuery('#wpadminbar').height();
}
if ( jQuery( window ).width() <= 600 && jQuery(window).scrollTop() != 0 && welcombar_position == 'top') {
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', '0px' );
var welcombar_height = jQuery( '.mysticky-welcomebar-fixed' ).outerHeight();
jQuery( '#mysticky-nav' ).css( 'top', welcombar_height + 'px' );
} else if ( welcombar_position == 'top' ) {
var mysticky_welcomebar_height = adminBarHeight + jQuery( '.mysticky-welcomebar-fixed' ).outerHeight();
jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' );
jQuery( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' );
}
if( mystickyelements_show ) {
var welcombar_height = jQuery( '.mysticky-welcomebar-fixed' ).outerHeight();
var mystickyelements_height = jQuery( '.mystickyelements-fixed' ).height();
var mystickyelements_total_height = welcombar_height + mystickyelements_height;
if ( jQuery( window ).width() <= 1024 && jQuery( '.mystickyelements-fixed' ).hasClass( 'mystickyelements-position-mobile-top' ) ) {
if ( after_trigger == 'after_a_few_seconds' ) {
if ( jQuery( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) {
var trigger_sec = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec') * 1000;
setTimeout(function(){
if ( welcombar_position == 'top' ) {
jQuery( '.mystickyelements-fixed' ).css( 'top', welcombar_height );
jQuery( 'html' ).attr( 'style', 'margin-top: ' + mystickyelements_total_height + 'px !important' );
} else {
jQuery( '.mystickyelements-fixed' ).css( 'top', '' );
jQuery( 'html' ).attr( 'style', 'margin-bottom: ' + welcombar_height + 'px !important' );
}
}, trigger_sec );
}
} else if ( after_trigger === 'after_scroll' ) {
var scroll = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
var after_scroll_val = $( '.mysticky-welcomebar-fixed' ).data('triger-sec');
if( scroll > after_scroll_val ) {
if ( jQuery( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) {
if ( welcombar_position == 'top' ) {
jQuery( '.mystickyelements-fixed' ).css( 'top', welcombar_height );
jQuery( 'html' ).attr( 'style', 'margin-top: ' + mystickyelements_total_height + 'px !important' );
} else {
jQuery( '.mystickyelements-fixed' ).css( 'top', '' );
jQuery( 'html' ).attr( 'style', 'margin-bottom: ' + welcombar_height + 'px !important' );
}
}
}
}
}
}
}
jQuery(".mysticky-welcomebar-fixed").on(
"animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd",
function() {
jQuery(this).removeClass("animation-start");
}
);
jQuery(document).ready(function() {
var container = jQuery(".mysticky-welcomebar-fixed");
var refreshId = setInterval(function() {
container.addClass("animation-start");
}, 3500);
});
</script>
<style>
.mysticky-welcomebar-fixed , .mysticky-welcomebar-fixed * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mysticky-welcomebar-fixed {
background-color: #03ed96;
font-family: Poppins;
position: fixed;
left: 0;
right: 0;
z-index: 9999999;
opacity: 0;
}
.mysticky-welcomebar-fixed-wrap {
min-height: 60px;
padding: 20px 50px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mysticky-welcomebar-animation {
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
transition: all 1s ease 0s;
}
.mysticky-welcomebar-position-top {
top:0;
}
.mysticky-welcomebar-position-bottom {
bottom:0;
}
.mysticky-welcomebar-position-top.mysticky-welcomebar-entry-effect-slide-in {
top: -60px;
}
.mysticky-welcomebar-position-bottom.mysticky-welcomebar-entry-effect-slide-in {
bottom: -60px;
}
.mysticky-welcomebar-entry-effect-fade {
opacity: 0;
}
.mysticky-welcomebar-entry-effect-none {
display: none;
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-content p a,
.mysticky-welcomebar-fixed .mysticky-welcomebar-content p {
color: #000000;
font-size: 16px;
margin: 0;
padding: 0;
line-height: 1.2;
font-family: inherit;
font-weight: 400;
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-btn {
padding-left: 30px;
display: none;
line-height: 1;
}
.mysticky-welcomebar-fixed.mysticky-welcomebar-btn-desktop .mysticky-welcomebar-btn {
display: block;
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-btn a {
background-color: #000000;
font-family: inherit;
color: #ffffff;
border-radius: 4px;
text-decoration: none;
display: inline-block;
vertical-align: top;
line-height: 1.2;
font-size: 16px;
font-weight: 400;
padding: 5px 20px;
white-space: nowrap;
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-btn a:hover {
/*opacity: 0.7;*/
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-close {
display: none;
vertical-align: top;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 5px;
color: #000;
position: absolute;
top: 5px;
right: 10px;
outline: none;
font-family: Lato;
text-decoration: none;
text-shadow: 0 0 0px #fff;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-close:hover {
opacity: 1;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-close span.dashicons {
font-size: 27px;
}
.mysticky-welcomebar-fixed.mysticky-welcomebar-showx-desktop .mysticky-welcomebar-close {
display: inline-block;
}
/* Animated Buttons */
.mysticky-welcomebar-btn a {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.mysticky-welcomebar-attention-flash.animation-start .mysticky-welcomebar-btn a {
-webkit-animation-name: flash;
animation-name: flash;
}
@keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.mysticky-welcomebar-attention-shake.animation-start .mysticky-welcomebar-btn a {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.mysticky-welcomebar-attention-swing.animation-start .mysticky-welcomebar-btn a {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.mysticky-welcomebar-attention-tada.animation-start .mysticky-welcomebar-btn a {
-webkit-animation-name: tada;
animation-name: tada;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.mysticky-welcomebar-attention-heartbeat.animation-start .mysticky-welcomebar-btn a {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.mysticky-welcomebar-attention-wobble.animation-start .mysticky-welcomebar-btn a {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@media only screen and (min-width: 768px) {
.mysticky-welcomebar-display-desktop.mysticky-welcomebar-entry-effect-fade.entry-effect {
opacity: 1;
}
.mysticky-welcomebar-display-desktop.mysticky-welcomebar-entry-effect-none.entry-effect {
display: block;
}
.mysticky-welcomebar-display-desktop.mysticky-welcomebar-position-top.mysticky-welcomebar-fixed ,
.mysticky-welcomebar-display-desktop.mysticky-welcomebar-position-top.mysticky-welcomebar-entry-effect-slide-in.entry-effect.mysticky-welcomebar-fixed {
top: 0;
}
.mysticky-welcomebar-display-desktop.mysticky-welcomebar-position-bottom.mysticky-welcomebar-fixed ,
.mysticky-welcomebar-display-desktop.mysticky-welcomebar-position-bottom.mysticky-welcomebar-entry-effect-slide-in.entry-effect.mysticky-welcomebar-fixed {
bottom: 0;
}
}
@media only screen and (max-width: 767px) {
.mysticky-welcomebar-display-mobile.mysticky-welcomebar-entry-effect-fade.entry-effect {
opacity: 1;
}
.mysticky-welcomebar-display-mobile.mysticky-welcomebar-entry-effect-none.entry-effect {
display: block;
}
.mysticky-welcomebar-display-mobile.mysticky-welcomebar-position-top.mysticky-welcomebar-fixed ,
.mysticky-welcomebar-display-mobile.mysticky-welcomebar-position-top.mysticky-welcomebar-entry-effect-slide-in.entry-effect.mysticky-welcomebar-fixed {
top: 0;
}
.mysticky-welcomebar-display-mobile.mysticky-welcomebar-position-bottom.mysticky-welcomebar-fixed ,
.mysticky-welcomebar-display-mobile.mysticky-welcomebar-position-bottom.mysticky-welcomebar-entry-effect-slide-in.entry-effect.mysticky-welcomebar-fixed {
bottom: 0;
}
.mysticky-welcomebar-fixed.mysticky-welcomebar-showx-desktop .mysticky-welcomebar-close {
display: none;
}
.mysticky-welcomebar-fixed.mysticky-welcomebar-showx-mobile .mysticky-welcomebar-close {
display: inline-block;
}
.mysticky-welcomebar-fixed.mysticky-welcomebar-btn-desktop .mysticky-welcomebar-btn {
display: none;
}
.mysticky-welcomebar-fixed.mysticky-welcomebar-btn-mobile .mysticky-welcomebar-btn {
display: block;
}
}
@media only screen and (max-width: 480px) {
.mysticky-welcomebar-fixed-wrap {
padding: 15px 36px 35px 10px;
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-btn {
padding-left: 10px;
}
.mysticky-welcomebar-fixed .mysticky-welcomebar-close {
right: 7px;
}
}
body.mysticky-welcomebar-apper #wpadminbar{
z-index:99999999;
}
</style>
<script type="text/javascript">
jQuery(function(){
var arrLiveStats=[];
var WSM_PREFIX="wsm";
jQuery(".if-js-closed").removeClass("if-js-closed").addClass("closed");
var wsmFnSiteLiveStats=function(){
jQuery.ajax({
type: "POST",
url: wsm_ajaxObject.ajax_url,
data: { action: 'liveSiteStats', requests: JSON.stringify(arrLiveStats), r: Math.random() }
}).done(function( strResponse ) {
if(strResponse!="No"){
arrResponse=JSON.parse(strResponse);
jQuery.each(arrResponse, function(key,value){
$element= document.getElementById(key);
oldValue=parseInt($element.getAttribute("data-value").replace(/,/g, ""));
diff=parseInt(value.replace(/,/g, ""))-oldValue;
$class="";
if(diff>=0){
diff="+"+diff;
}else{
$class="wmcRedBack";
}
$element.setAttribute("data-value",value);
$element.innerHTML=diff;
jQuery("#"+key).addClass($class).show().siblings(".wsmH2Number").text(value);
if(key=="SiteUserOnline")
{
var onlineUserCnt = arrResponse.wsmSiteUserOnline;
if(jQuery("#wsmSiteUserOnline").length)
{
jQuery("#wsmSiteUserOnline").attr("data-value",onlineUserCnt); jQuery("#wsmSiteUserOnline").next(".wsmH2Number").html("<a target=\"_blank\" href=\"?page=wsm_traffic&subPage=UsersOnline&subTab=summary\">"+onlineUserCnt+"</a>");
}
}
});
setTimeout(function() {
jQuery.each(arrResponse, function(key,value){
jQuery("#"+key).removeClass("wmcRedBack").hide();
});
}, 1500);
}
});
}
if(arrLiveStats.length>0){
setInterval(wsmFnSiteLiveStats, 10000);
}});
</script><script type="text/javascript" src="https://www.recue.com/wp-content/plugins/mystickymenu/js/detectmobilebrowser.js?ver=2.5.6" id="detectmobilebrowser-js"></script>
<script type="text/javascript" id="mystickymenu-js-extra">
/* <![CDATA[ */
var option = {"mystickyClass":".navbar","activationHeight":"0","disableWidth":"0","disableLargeWidth":"0","adminBar":"false","device_desktop":"1","device_mobile":"1","mystickyTransition":"fade","mysticky_disable_down":"false"};
/* ]]> */
</script>
<script type="text/javascript" src="https://www.recue.com/wp-content/plugins/mystickymenu/js/mystickymenu.min.js?ver=2.5.6" id="mystickymenu-js"></script>
<script type="text/javascript" src="https://www.recue.com/wp-content/plugins/simple-posts-ticker/public/js/jquery.marquee.min.js?ver=1.5.0" id="spt-ticker-js-js"></script>
<script type="text/javascript" src="https://www.recue.com/wp-content/plugins/simple-posts-ticker/public/js/ticker.min.js?ver=1.1.5" id="spt-init-js-js"></script>
<script type="text/javascript" id="ta_main_js-js-extra">
/* <![CDATA[ */
var thirsty_global_vars = {"home_url":"\/\/www.recue.com","ajax_url":"https:\/\/www.recue.com\/wp-admin\/admin-ajax.php","link_fixer_enabled":"yes","link_prefix":"go","link_prefixes":["recommends","go"],"post_id":"72681","enable_record_stats":"yes","enable_js_redirect":"yes","disable_thirstylink_class":""};
/* ]]> */
</script>
<script type="text/javascript" src="https://www.recue.com/wp-content/plugins/thirstyaffiliates/js/app/ta.js?ver=3.10.3" id="ta_main_js-js"></script>
<script type="text/javascript" src="https://www.recue.com/wp-content/themes/affiliate-review/assets/js/jquery.superfish.js?ver=2.1.2" id="jquery-superfish-js"></script>
<script type="text/javascript" src="https://www.recue.com/wp-content/themes/affiliate-review/assets/js/bootstrap.js?ver=6.5.3" id="bootstrap-js-js"></script>
<script type="text/javascript" src="https://www.recue.com/wp-content/themes/affiliate-review/assets/js/owl.carousel.js?ver=6.5.3" id="owl-carousel-js-js"></script>
<script type="text/javascript" src="https://www.recue.com/wp-content/themes/affiliate-review/assets/js/custom.js?ver=6.5.3" id="affiliate-review-custom-scripts-jquery-js"></script>
<script type="text/javascript" src="https://www.recue.com/wp-content/themes/affiliate-review/assets/js/wow.js?ver=6.5.3" id="affiliate-review-wow-jquery-js"></script>
</body>
</html> 