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-43855" class="inner-service post-43855 post type-post status-publish format-standard has-post-thumbnail hentry category-html-php-javascript tag-academy tag-array tag-beginners tag-date tag-examples tag-foreach tag-lesson tag-php tag-php-beginner-tutorial tag-phpacademy tag-thenewboston tag-tutorial tag-web">
<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/06/Beginner-PHP-Tutorial--37--String-Functions-Part-4.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Beginner PHP Tutorial – 37 – String Functions Part 4" decoding="async" fetchpriority="high" srcset="https://www.recue.com/wp-content/uploads/2022/06/Beginner-PHP-Tutorial--37--String-Functions-Part-4.png 640w, https://www.recue.com/wp-content/uploads/2022/06/Beginner-PHP-Tutorial--37--String-Functions-Part-4-300x169.png 300w" sizes="(max-width: 640px) 100vw, 640px" /> </div>
<h2 class="section-title mt-0 pt-0"><a href="https://www.recue.com/beginner-php-tutorial-37-string-functions-part-4/">Beginner PHP Tutorial – 37 – String Functions Part 4<span class="screen-reader-text">Beginner PHP Tutorial – 37 – String Functions Part 4</span></a></h2>
<div class="new-text">
<p>
Join our community below for all the latest videos and tutorials! Website – Discord – GitHub – Reddit – LinkedIn – Facebook – Twitter – Instagram – Twitch – TNBC </p>
</div>
<div class="more-btn mt-4 mb-4">
<a class="p-3" href="https://www.recue.com/beginner-php-tutorial-37-string-functions-part-4/">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-16778" class="inner-service post-16778 post type-post status-publish format-standard has-post-thumbnail hentry category-html-php-javascript tag-code tag-crash-course tag-css tag-css-crash-course tag-css-for-beginners tag-css-tutorial tag-html tag-html-css-crash-course tag-html-and-css tag-html-basics tag-html-crash-course tag-html-for-beginners tag-html-introduction tag-html-lessons tag-html-tutorial tag-tutorial tag-vs-code tag-web-dev-for-beginners tag-web-dev-setup tag-web-dev-tutorial tag-web-development-for-beginners">
<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/HTML--CSS-Crash-Course-Tutorial-1--Introduction.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="HTML & CSS Crash Course Tutorial #1 – Introduction" decoding="async" srcset="https://www.recue.com/wp-content/uploads/2022/01/HTML--CSS-Crash-Course-Tutorial-1--Introduction.png 640w, https://www.recue.com/wp-content/uploads/2022/01/HTML--CSS-Crash-Course-Tutorial-1--Introduction-300x169.png 300w" sizes="(max-width: 640px) 100vw, 640px" /> </div>
<h2 class="section-title mt-0 pt-0"><a href="https://www.recue.com/html-css-crash-course-tutorial-1-introduction/">HTML & CSS Crash Course Tutorial #1 – Introduction<span class="screen-reader-text">HTML & CSS Crash Course Tutorial #1 – Introduction</span></a></h2>
<div class="new-text">
<p>
Hey gang & welcome to your very first HTML & CSS tutorial. Throughout this crash course series I’ll take you from total beginner to create great-looking sites with … </p>
</div>
<div class="more-btn mt-4 mb-4">
<a class="p-3" href="https://www.recue.com/html-css-crash-course-tutorial-1-introduction/">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-19945" class="inner-service post-19945 post type-post status-publish format-standard has-post-thumbnail hentry category-html-php-javascript tag-advanced-php-course tag-beginner-friendly-php-course tag-beginner-to-expert-php tag-full-php-course tag-learn-php-the-right-way tag-object-oriented-php tag-object-oriented-programming tag-php tag-php-advanced-tutorial tag-php-course tag-php-in-2021 tag-php-in-2022 tag-php-oop-tutorial-for-beginners-full tag-php-tutorial tag-php-tutorial-for-beginners-full tag-php8">
<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/02/Full-PHP-8-Tutorial--Learn-PHP-The-Right-Way-In-2022.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Full PHP 8 Tutorial – Learn PHP The Right Way In 2022" decoding="async" srcset="https://www.recue.com/wp-content/uploads/2022/02/Full-PHP-8-Tutorial--Learn-PHP-The-Right-Way-In-2022.png 640w, https://www.recue.com/wp-content/uploads/2022/02/Full-PHP-8-Tutorial--Learn-PHP-The-Right-Way-In-2022-300x169.png 300w" sizes="(max-width: 640px) 100vw, 640px" /> </div>
<h2 class="section-title mt-0 pt-0"><a href="https://www.recue.com/full-php-8-tutorial-learn-php-the-right-way-in-2022/">Full PHP 8 Tutorial – Learn PHP The Right Way In 2022<span class="screen-reader-text">Full PHP 8 Tutorial – Learn PHP The Right Way In 2022</span></a></h2>
<div class="new-text">
<p>
PHP 8 is the next big release of the PHP language. It’s scheduled for release in 2022, and it’s going to include some amazing new features. In this article, we’re </p>
</div>
<div class="more-btn mt-4 mb-4">
<a class="p-3" href="https://www.recue.com/full-php-8-tutorial-learn-php-the-right-way-in-2022/">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/the-top-6-ways-to-generate-online-traffic-in-2023/">The Top 6 Ways To Generate Online Traffic In 2023</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/saas-marketing-strategy-made-my-startup-1000-in-59-days/">SaaS Marketing Strategy Made My Startup $1,000+ in 59 days</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/secretly-lucrative-the-best-ways-to-make-money-solo-after-update-in-gta-online-gta5-fast-money/">Secretly LUCRATIVE? The BEST WAYS To Make Money SOLO After UPDATE in GTA Online! (GTA5 Fast Money)</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/i-made-1999-in-24hrs-with-google-books-and-ai-heres-how/">I Made $1,999 in 24Hrs with Google Books and AI Here’s How!</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://www.recue.com/how-to-create-a-free-website-using-wordpress-in-2024-complete-beginners-guide-no-coding-needed/">How to Create a Free Website Using WordPress in 2024 | Complete Beginner’s Guide (No Coding Needed!)</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.6.2" 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.6.2" 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.6.2" 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.6.2" id="affiliate-review-wow-jquery-js"></script>
</body>
</html> 