<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').each(function(i){
$(this).click(function(){ $('.showclick').eq(i).show();
$('.clicktoshow').eq(i).hide();
}); });
}); });
</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
</style>
Category: Javascript
jQuery add sticky class on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 575){
$('.side-banner-sticky').addClass("content_fixed");
}
else{
$('.side-banner-sticky').removeClass("content_fixed");
}
});
jQuery set dynamic image height
jQuery(document).ready(function( $ ){
var heightc = $(".top-ads-banner img").height();
$(".top-ads-banner").height(heightc);
});
CSS
.top-ads-banner {
position: sticky;
top: 0;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
width: 100%;
margin: 0 auto;
background: #000;
height: 0px;
}
Delay JavaScript Execution Revolution Slider Fix
ADD in the Delay JavaScript Execution field:
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
/wp-includes/js/jquery/jquery-migrate.min.js
/plugins/revslider/public/assets/js/
setREVStartSize
rev_slider_
revslider_
Load JavaScript Deferred field, please enter the following exclusions:
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
/wp-includes/js/jquery/jquery-migrate.min.js
Wrap element by jQuery
jQuery(document).ready(function( $ ){
$("#selector > img").wrap($('<a>',{
href: 'https://yourdomain.com'
}));
});
How To Remove The Divi Blog Module Meta Separators
Blog module settings>Advanced tab>CSS IDs & Classes and add “pa-remove-meta-separators” to the CSS Class input field.
<script>
//Remove meta seperator pipes (|) and by from Divi Blog module meta
jQuery(function($) {
$(document).ready(function() {
$('.pa-remove-meta-separators .post-meta').each(function() {
$(this).html($(this).html().replace(/\|/g, " "));
$(this).html($(this).html().replace('by', " "));
$(this).html(jQuery(this).html().replace(/,/g, ""));
});
//Do the same for ajax with pagination enabled
$(document).bind('ready ajaxComplete', function() {
$('.pa-remove-meta-separators .post-meta').each(function() {
$(this).html($(this).html().replace(/\|/g, " "));
$(this).html($(this).html().replace('by', " "));
$(this).html(jQuery(this).html().replace(/,/g, ""));
});
});
});
});
</script>
Click to box content change
<!DOCTYPE html>
<html lang="en-US">
<head>
<script defer>
document.addEventListener("DOMContentLoaded", function () {
const headerElement = document.querySelector(
".sequences-card__content__header > h1"
);
const bodyElement = document.querySelector(
".sequences-card__content__body"
);
const messages = [...document.querySelectorAll(".sequence-card-2")];
const messageIcon = document.querySelector(".sequence-icon.message");
const emailIcon = document.querySelector(".sequence-icon.email");
const inmailIcon = document.querySelector(".sequence-icon.inmail");
const connectIcon = document.querySelector(".sequence-icon.connect");
messages.forEach((message) =>
message.addEventListener("click", (e) => {
messages.forEach((m) => {
if (m.classList.contains("focused")) {
m.classList.remove("focused");
}
});
e.target.classList.add("focused");
messageIcon.classList.remove("focused");
emailIcon.classList.remove("focused");
inmailIcon.classList.remove("focused");
connectIcon.classList.remove("focused");
// Logic for content
if (e.target.classList.contains("connect-2")) {
connectIcon.classList.add("focused");
headerElement.textContent = "Connection Request";
bodyElement.innerHTML =
"<p>Hi {{firstName}},</p><p>I am seeking to connect with other founders and your profile caught my attention!</p><p>Cheers,</p><p>Kris</p>";
}
if (e.target.classList.contains("message-4")) {
messageIcon.classList.add("focused");
headerElement.textContent = "Message";
bodyElement.innerHTML =
"<p>Glad to connect</p><p>Hi {{firstName}}, thanks for connecting! I was wondering if you are using any automation tools in your sales stack?</p>";
}
if (e.target.classList.contains("message-5")) {
messageIcon.classList.add("focused");
headerElement.textContent = "Message";
bodyElement.innerHTML =
"<p>The reason I am asking is that we developed a cloud-based automation tool not just for LinkedIn outreach but for email as well. We are constantly adding new features and our latest addition are Smart sequences. With Smart sequences, you can use a multi-channel approach and choose different steps in your campaign based on IF/ELSE conditions and your lead’s actions. </p><p>I would be happy to provide you with a free trial to test our tool- The Ultimate Lead Generation Tool.</p>";
}
if (e.target.classList.contains("message-6")) {
messageIcon.classList.add("focused");
headerElement.textContent = "Message";
bodyElement.innerHTML =
"<p>Hey {{firstName}},</p><p>Just checking if you saw my previous messages and if you would like to get the free trial? 🙋♀️</p>";
}
if (e.target.classList.contains("inmail-7")) {
inmailIcon.classList.add("focused");
headerElement.textContent = "InMail";
bodyElement.innerHTML =
"<p>Subject: <b>You will never be ignored on LinkedIn after this.</b></p><p>Hi {{firstName}</p><p>Do you want to be able to contact your potential prospects even if they are not responding on LinkedIn? There is a way.With The Ultimate Lead Generation Tool, a tool we have developed, you are able to do both LinkedIn and Email outreach. Also, we just added Smart sequences. With Smart sequences, you can use a multi-channel approach and choose different steps in your campaign based on your lead’s actions. If they decline or ignore your request you can send them InMail, like I just did. :) Would you like to hear more about The Ultimate Lead Generation Tool?</p>";
}
if (e.target.classList.contains("inmail-8")) {
inmailIcon.classList.add("focused");
headerElement.textContent = "InMail";
bodyElement.innerHTML =
"<p>Subject: <b>Do you want to improve your response rate?</b></p><p>Hi {{firstName}},</p><p>I would like to provide you with a free trial to test The Ultimate Lead Generation Tool and try all the great features for yourself. Are you up for it? No strings attached.</p><p>Kris</p><p>Founder @TheUltimateLeadGenerationTool</p>";
}
})
);
});
</script>
<style type="text/css" id="wp-custom-css">
.box-line {
width: 500px !important;
max-width: 100%;
margin: 0 auto;
}
.site-content,
.hentry,
.entry-content {
margin: 0;
}
.pricing-page-list ul.elementor-icon-list-items {
display: table;
margin: auto !important;
}
#masthead .custom-logo,
footer img {
max-width: 150px !important;
height: auto !important;
}
footer .tg-footer-widget-container {
border-bottom: 1px solid #fff;
}
#masthead {
position: fixed;
width: 100%;
top: 0;
background-color: #fafcff;
z-index: 10000;
}
.tg-primary-menu > div ul li a {
color: #2a3773;
text-decoration: none;
font-weight: 700;
}
.tg-primary-menu.tg-primary-menu--style-underline
> div
> ul
> li.current_page_item
> a::before,
.tg-primary-menu.tg-primary-menu--style-underline
> div
> ul
> li.current-menu-item
> a::before,
.tg-primary-menu.tg-primary-menu--style-left-border
> div
> ul
> li.current_page_item
> a::before,
.tg-primary-menu.tg-primary-menu--style-left-border
> div
> ul
> li.current-menu-item
> a::before,
.tg-primary-menu.tg-primary-menu--style-right-border
> div
> ul
> li.current_page_item
> a::before,
.tg-primary-menu.tg-primary-menu--style-right-border
> div
> ul
> li.current-menu-item
> a::before {
content: none;
}
.elementor-icon-list-icon {
background-color: rgba(116, 185, 255, 0.3);
fill: #74b9ff;
color: #74b9ff;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.footer-link-list,
.footer-link-list a {
padding: 0 !important;
color: #fff;
}
.footer-link-list li {
border: none !important;
}
.tg-site-footer-widgets .widget-title {
margin: 0;
color: #fff;
font-size: 21px;
}
@media screen and (max-width: 767px) {
p {
margin: 0;
}
.main-section-img img {
margin-top: 80px;
max-width: 300px;
}
.main-section-content {
margin-bottom: 50px;
}
.main-section-content-title h2,
.automate-section-column-title h2,
.automate-section-column-text p,
.target-section-content-column-title h2,
.target-section-content-column-text p,
.monitor-campaign-section-title h2,
.monitor-campaign-section-text p,
.target-section-content-column-list-title h6 {
text-align: center;
}
.main-section-content-list ul,
.elementor-icon-list-items {
display: table;
margin: auto !important;
}
.main-section-content-button,
.get-started-content-button {
width: 100% !important;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 10px 0;
}
.elementor-33 .elementor-element > .elementor-element-populated,
.elementor-33 .elementor-element {
padding: 0 !important;
}
.elementor-33 .elementor-element > .elementor-widget-container {
margin: 20px 0 0 0 !important;
}
.target-section-content-column-title,
.target-section-content-column-text,
.target-section-content-column-list-title,
.automate-section-column-title,
.automate-section-column-text {
margin: 0 !important;
}
.elementor-33
.elementor-element
.elementor-widget-icon-list
.elementor-widget-container {
margin: 10px 0 20px 0 !important;
}
.elementor-33 section.elementor-element {
padding: 0 10px !important;
}
.elementor-33 .elementor-element.get-started-section {
padding: 10px 10px 20px 10px !important;
}
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
border: 0px;
}
.elementor-accordion .elementor-accordion-item,
.elementor-accordion
.elementor-accordion-item
+ .elementor-accordion-item {
box-shadow: 5px 5px 5px #9ca3ae3b;
border: 1px solid #e1e7f1;
border-radius: 12px;
margin-bottom: 20px;
padding: 10px;
}
.elementor-widget-accordion .elementor-active .elementor-accordion-icon,
.elementor-widget-accordion .elementor-active .elementor-accordion-title,
.entry-content a:hover {
color: #74b9ff;
}
#testimonial-section {
display: none;
}
.bdp-post-categories {
display: none;
}
.bdp-post-masonry.bdp-effect-2 .bdp-post-grid {
width: calc(100% / 3);
}
@media screen and (max-width: 1200px) {
.bdp-post-masonry.bdp-effect-2 .bdp-post-grid {
width: calc(100% / 2);
}
}
@media screen and (max-width: 575px) {
.bdp-post-masonry.bdp-effect-2 .bdp-post-grid {
width: 100%;
}
}
.bdp-post-grid-content {
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(119, 119, 119, 0.1);
background: #fff;
}
.bdp-post-grid-content:hover {
-webkit-box-shadow: 0 1.25rem 2.813rem rgba(119, 119, 119, 0.3);
-moz-box-shadow: 0 1.25rem 2.813rem rgba(119, 119, 119, 0.3);
box-shadow: 0 1.25rem 2.813rem rgba(119, 119, 119, 0.3);
-webkit-transform: translateY(-0.625rem);
-moz-transform: translateY(-0.625rem);
transform: translateY(-0.625rem);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.bdp-post-title a {
color: #444;
font-size: 22px;
font-weight: 500;
line-height: 10px;
}
.bdp-readmorebtn {
display: none;
}
.bdp-post-short-content {
color: #777777;
font-size: 14px;
}
.bdp-post-categories,
.bdp-post-title,
.bdp-post-date,
.bdp-post-content {
padding: 0 30px;
}
button.bdp-load-more-btn {
font-size: 18px;
font-weight: 600;
fill: #ffffff;
color: #ffffff;
background-color: #74b9ff;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-radius: 30px;
padding: 11px 32px 11px 32px;
}
.tg-page-header {
display: none;
}
.tg-primary-menu > div > ul > li:last-child {
fill: #74b9ff;
color: #74b9ff;
background-color: rgba(0, 0, 0, 0);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-radius: 30px;
padding: 5px 15px;
margin: 0;
}
.tg-primary-menu > div > ul > li:last-child:hover a {
color: rgba(116, 185, 255, 0.63);
}
.tg-primary-menu > div > ul > li:last-child a {
color: #74b9ff;
}
.calendly-inline-widget {
min-width: 0px !important;
}
@media screen and (max-width: 768px) {
#primary {
margin-bottom: 0px;
}
}
@media screen and (min-width: 769px) {
.entry-meta,
.entry-content,
.posts-navigation,
.post-navigation {
width: 70%;
margin: auto;
}
}
#comments {
display: none;
}
.cat-links,
.comments-link {
display: none !important;
}
.post-thumbnail {
margin-top: 80px;
}
.pum-close.popmake-close {
height: 20px !important;
width: 20px !important;
right: -5px !important;
top: -5px !important;
display: flex;
align-items: center;
justify-content: center;
background-color: #74b9ff !important;
border-radius: 10px !important;
}
#basic-plan-list
.elementor-icon-list-items
li:nth-child(16)
.elementor-icon-list-icon,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(12)
.elementor-icon-list-icon,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(13)
.elementor-icon-list-icon,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(14)
.elementor-icon-list-icon,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(15)
.elementor-icon-list-icon,
#gold-plan-list
.elementor-icon-list-items
li:nth-child(14)
.elementor-icon-list-icon,
#gold-plan-list
.elementor-icon-list-items
li:nth-child(15)
.elementor-icon-list-icon,
#gold-plan-list
.elementor-icon-list-items
li:nth-child(16)
.elementor-icon-list-icon {
background-color: rgba(178, 183, 193, 0.2);
}
#basic-plan-list
.elementor-icon-list-items
li:nth-child(16)
.elementor-icon-list-icon
i,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(12)
.elementor-icon-list-icon
i,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(13)
.elementor-icon-list-icon
i,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(14)
.elementor-icon-list-icon
i,
#basic-plan-list
.elementor-icon-list-items
li:nth-child(15)
.elementor-icon-list-icon
i,
#gold-plan-list
.elementor-icon-list-items
li:nth-child(14)
.elementor-icon-list-icon
i,
#gold-plan-list
.elementor-icon-list-items
li:nth-child(15)
.elementor-icon-list-icon
i,
#gold-plan-list
.elementor-icon-list-items
li:nth-child(16)
.elementor-icon-list-icon
i {
color: #b2b7c1;
}
#gold-plan {
position: relative;
}
#gold-plan .elementor-column-wrap {
overflow: hidden;
}
#gold-plan h5 {
position: absolute;
top: 32px;
right: -51px;
background-color: #74b9fd;
color: #fff;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 32px;
width: 200px;
transform: rotate(45deg);
z-index: 100;
}
#gold-plan-heading {
margin-top: -20px;
}
.entry-content {
color: #000;
}
.entry-content p {
font-size: 18px;
}
/**all-competitors page css for all competitors table**/
.table-container {
box-shadow: 5px 5px 10px #cccccc;
display: flex;
}
.table-features {
width: 55%;
text-align: center;
}
.table-companies {
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-bottom: 10px;
}
.companies {
display: inline-block;
width: 24%;
}
.tooltip {
display: flex;
height: 44px;
}
.feature-container {
margin-left: 15px;
display: flex;
}
.sticky {
width: 25%;
}
.feature {
margin-top: auto;
margin-bottom: auto;
width: 100%;
}
.feature-heding {
margin: 40px auto 5px auto;
}
.logo-heading-table {
margin: 10px auto 20px auto;
display: block;
}
.img-wrap {
margin-left: auto;
/* margin-right:auto; */
}
/*scrollbar*/
.table-companies::-webkit-scrollbar {
width: 10px;
}
.table-companies::-webkit-scrollbar-track {
background: #d6ebff;
border-radius: 10px;
}
.table-companies::-webkit-scrollbar-thumb {
background: #74b9ff;
border-radius: 10px;
width: 10px;
}
/*all-competitors page css for client testimonials*/
.testimonial-divider {
border-top: 3px solid #74b9ff;
margin: auto;
width: 35%;
}
.client-name {
font-weight: bold;
font-size: 26px;
margin: 18px;
}
.client-position {
color: grey;
font-size: 20px;
margin: 9px;
}
.testimonial-text {
margin-top: 23px;
padding: 5px 35px 27px 35px;
}
.sp-testimonial-free {
box-shadow: 5px 5px 10px #cccccc;
width: 340px;
padding-top: 25px;
border-radius: 10px;
background-color: white;
}
.sp-tfree-client-image {
margin-top: 20px;
}
.container-skylead-competition {
box-shadow: 5px 5px 10px #cccccc;
border-radius: 10px;
}
.logo-aling {
padding: 7px;
margin-left: auto;
margin-right: auto;
display: block;
}
.vs-aling {
text-align: center;
margin: 0;
text-align: center;
margin: 0;
font-size: 27px;
font-weight: bold;
color: #bfd7ef;
}
.book-quick-demo-container {
padding-top: 65px;
font-size: 25px;
color: silver;
}
.text-color {
color: #74b9ff;
}
.book-quick-demo-container-next-segment {
font-size: 25px;
color: silver;
}
/*testimonial dots*/
.sp-testimonial-free-section .slick-dots li {
display: inline-block;
border: 0;
padding: 0;
width: 75px;
margin: 3px;
overflow: hidden;
}
.sp-testimonial-free-section .slick-dots li button {
border-radius: 14%;
text-indent: -999px;
width: 70px;
height: 12px;
padding: 0;
border: 0;
display: block;
}
.sp-testimonial-free-section .slick-dots {
margin-bottom: 30px;
}
.quotes {
margin-left: 190px;
margin-top: -64px;
}
/*media query for all-competitors table*/
@media screen and (max-width: 1200px) {
.table-features {
width: 72%;
text-align: center;
}
.feature-heding {
margin: 15px auto 20px auto;
}
.companies {
display: inline-block;
width: 22%;
}
}
@media screen and (max-width: 991px) {
.table-features {
width: 885px;
text-align: center;
}
.companies {
display: inline-block;
width: 37%;
}
.sticky {
width: 40%;
}
}
@media screen and (min-width: 640px) and (max-width: 677px) {
.feature-heding {
margin: 35px auto 10px auto;
}
.table-features {
width: 50%;
text-align: center;
}
.companies {
display: inline-block;
width: 40%;
}
}
@media screen and (min-width: 407px) and (max-width: 768px) {
.feature-heding {
margin: 25px auto 10px auto;
}
.table-features {
width: 950px;
text-align: center;
}
.feature-container {
margin-left: 15px;
display: flex;
font-size: 13px;
}
.companies {
display: inline-block;
width: 47%;
}
.sticky {
width: 50%;
}
.book-quick-demo-container {
padding-top: 134px;
font-size: 19px;
color: silver;
}
.book-quick-demo-container-next-segment {
font-size: 19px;
color: silver;
}
}
@media screen and (min-width: 408px) and (max-width: 677px) {
.feature-heding {
margin: 30px auto 10px auto;
}
.table-features {
width: 100%;
text-align: center;
}
.feature-container {
margin-left: 10px;
display: flex;
font-size: 12px;
}
.companies {
display: inline-block;
width: 40%;
}
.sticky {
width: 37%;
}
.table-companies {
display: inline-block;
width: 64%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-bottom: 10px;
}
.book-quick-demo-container {
padding-top: 134px;
font-size: 19px;
color: silver;
}
.book-quick-demo-container-next-segment {
font-size: 19px;
color: silver;
}
}
@media screen and (min-width: 411px) and (max-width: 677px) {
.feature-heding {
margin: 30px auto 10px auto;
}
.table-features {
text-align: center;
}
.companies {
display: inline-block;
width: 50%;
}
.sp-testimonial-free {
margin-left: auto;
margin-right: auto;
background-color: white;
}
.tooltip {
display: flex;
height: 44px;
}
.book-quick-demo-container {
padding-top: 134px;
font-size: 19px;
color: silver;
}
.book-quick-demo-container-next-segment {
font-size: 19px;
color: silver;
}
}
@media screen and (max-width: 627px) {
.feature {
width: 100px;
}
.table-features {
width: auto;
}
.img-wrap {
width: 50px;
}
.tooltip {
display: flex;
height: 44px;
width: auto;
}
.feature-container {
margin-left: 15px;
display: flex;
font-size: 10px;
}
.logo-info-aling {
height: 35px;
}
.companies {
display: inline-block;
width: 40%;
}
.sticky {
width: 36%;
}
.sp-testimonial-free {
margin-left: auto;
margin-right: auto;
background-color: white;
}
.book-quick-demo-container {
padding-top: 134px;
font-size: 19px;
color: silver;
}
.book-quick-demo-container-next-segment {
font-size: 19px;
color: silver;
}
}
@media screen and (min-width: 369px) and (max-width: 411px) {
.feature-heding {
margin: 18px auto 10px auto;
}
.table-features {
width: 95%;
text-align: center;
}
.companies {
display: inline-block;
width: 80%;
}
.sticky {
width: 55%;
}
}
@media screen and (max-width: 369px) {
.feature-heding {
margin: 10px auto 10px auto;
}
.table-features {
width: 95%;
text-align: center;
}
.companies {
display: inline-block;
width: 80%;
}
.sticky {
width: 100%;
}
.sp-testimonial-free {
margin-left: auto;
margin-right: auto;
background-color: white;
}
.book-quick-demo-container {
padding-top: 134px;
font-size: 19px;
color: silver;
}
.book-quick-demo-container-next-segment {
font-size: 19px;
color: silver;
}
}
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap:hover .icon-info {
visibility: visible;
}
.img-wrap .icon-info {
visibility: hidden;
width: 250px;
background-color: rgba(54, 80, 106, 1);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 45%;
left: -97%;
margin-left: -60px;
}
.img-wrap .icon-info::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/*Comparison page table*/
.companies-comparison-page {
display: inline-block;
width: 45%;
}
.tooltip-comparison-page {
display: flex;
height: 44px !important;
}
.feature-heding-comparison-page {
margin: 35px auto 20px auto;
}
.table-companies-comparison-page {
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
@media screen and (min-width: 411px) and (max-width: 677px) {
.feature-heding-comparison-page {
margin: 23px auto 10px auto;
}
.feature-heding {
/* margin: 13px auto 10px auto; */
margin: 23px auto 10px auto;
}
.table-features {
text-align: center;
}
.companies-comparison-page {
display: inline-block;
width: 49%;
}
.sp-testimonial-free {
margin-left: auto;
margin-right: auto;
background-color: white;
}
.tooltip-comparison-page {
display: flex;
height: 44px;
}
.book-quick-demo-container {
padding-top: 134px;
font-size: 19px;
color: silver;
}
.book-quick-demo-container-next-segment {
font-size: 19px;
color: silver;
}
}
@media screen and (max-width: 407px) {
.feature-heding-comparison-page {
margin: 14px auto 10px auto;
}
.feature {
width: 100px;
}
.table-features {
width: auto;
}
.sticky {
width: 90%;
}
.img-wrap {
width: 50px;
}
.tooltip {
display: flex;
height: 44px;
width: auto;
}
.feature-container {
margin-left: 15px;
display: flex;
font-size: 10px;
}
.logo-info-aling {
height: 35px;
}
.companies-comparison-page {
display: inline-block;
width: 42%;
}
.sp-testimonial-free {
margin-left: auto;
margin-right: auto;
background-color: white;
}
.book-quick-demo-container {
padding-top: 134px;
font-size: 19px;
color: silver;
}
.book-quick-demo-container-next-segment {
font-size: 19px;
color: silver;
}
}
@media screen and (max-width: 349px) {
.feature {
width: 75px;
text-align: initial;
}
.img-wrap {
width: 35px;
}
.feature-heding {
margin: 10px auto 10px auto;
}
.table-features {
width: 95%;
text-align: center;
}
.companies {
display: inline-block;
width: 80%;
}
}
.comparison-title-footer {
margin: 0;
font-size: 21px;
}
.comparison {
color: #fff;
font-weight: 500;
}
.pricing-services {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.pricing-services ul {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.pricing-services li {
width: 400px;
display: flex;
align-items: center !important;
}
.similar-sequence {
width: 100%;
background: rgba(116, 185, 255, 0.04);
padding: 40px 0px;
}
.similar-sequence h2 {
font-size: 3rem;
text-align: center;
}
.sequences {
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 5px;
}
.sequences > * {
margin: 20px;
}
.sequences-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 350px;
box-shadow: 10px 10px 10px #89909b3b;
border: 2px solid #e1e7f1;
border-radius: 12px;
padding: 20px 10px;
cursor: pointer;
text-decoration: none;
background-color: #fff;
}
.sequences-link:hover {
border-color: #77bafc;
}
.sequences-link > img {
object-fit: cover;
object-position: center;
width: 100%;
height: 300px;
margin-bottom: 15px;
}
.sequences-link > h1 {
font-size: 1.5rem;
align-self: flex-start;
color: #2a3773;
height: 85px;
}
.sequences-link > ul {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin: 0;
padding: 0;
margin-right: auto;
}
.sequences-link > ul > li {
display: flex;
align-items: center;
flex-grow: 1;
font-size: 1rem;
width: 45%;
margin-bottom: 10px;
color: #2a3773;
}
.sequences-link > ul > li > .rate {
background: #74b9ff 0% 0% no-repeat padding-box;
border-radius: 4px;
margin-right: 10px;
padding: 3px;
color: #fff;
font-size: 1rem;
}
.start-with-sequences {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
background: rgba(116, 185, 255, 0.18);
padding: 40px 0px;
}
.start-with-sequences h2 {
font-size: 3rem;
text-align: center;
color: #2a3773;
}
.start-with-sequences p {
font-size: 1.5rem;
padding: 0px 10px;
text-align: center;
color: #2a3773;
}
.start-with-sequences__buttons {
margin-top: 80px;
}
.start-with-sequences__buttons button:first-child {
background-color: #74b9ff;
width: 200px;
height: 50px;
margin-right: 20px;
border: none;
border-radius: 36px;
}
.start-with-sequences__buttons button:nth-child(2) {
background-color: #322c71;
width: 200px;
height: 50px;
border: none;
border-radius: 36px;
}
.start-with-sequences__buttons a {
text-decoration: none;
color: #fff;
font-size: 1.2rem;
}
.sequences-header {
background-color: #f9fcff;
position: relative;
display: flex;
justify-content: center;
}
.sequences-header__wraper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 1200px;
max-width: 100%;
z-index: 2;
}
.sequences-header__wraper h1 {
margin-top: 140px;
font-size: 3rem;
width: 80%;
color: #2a3773;
text-align: center;
}
.sequences-header__wraper p {
padding: 0px 10px;
color: #a5a8ad;
font-size: 2rem;
text-align: center;
}
.sequences-header__wraper ul {
margin-top: 20px;
width: 80%;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.sequences-header__wraper li {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 1.5rem;
margin-bottom: 10px;
min-width: 200px;
max-width: 48%;
}
.sequences-header__wraper li > .rate {
background: #74b9ff 0% 0% no-repeat padding-box;
border-radius: 4px;
margin-right: 10px;
color: #fff;
padding: 5px;
}
.sequences-card__info {
margin-top: 150px;
width: 70%;
}
.sequences-card__info span {
display: flex;
align-items: center;
padding: 10px;
width: max-content;
background: rgba(198, 208, 217, 0.17);
border-radius: 8px;
color: #5b6281;
align-self: flex-start;
}
.sequences-card__info span img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.sequences-header__shape {
width: 100%;
height: 185px;
transform: rotate(180deg);
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.sequences-header__shape > svg {
background-color: #fff;
}
.sequences-header__fill {
fill: #f9fcff;
}
.sequences-card > ul > li {
margin-right: 10px;
}
.sequences-card__preview {
width: 700px;
height: auto;
position: relative;
margin-right: 40px;
}
.sequences-card__preview img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.sequence-card {
position: absolute;
z-index: 1;
background-color: transparent;
width: 20.4%;
height: 7.9%;
}
.sequence-card-1 {
position: absolute;
z-index: 1;
background-color: transparent;
width: 28.8%;
height: 7.8%;
}
.sequence-card-2 {
position: absolute;
z-index: 1;
background-color: transparent;
width: 20.9%;
height: 6.9%;
}
.sequence-card-3 {
position: absolute;
z-index: 1;
background-color: transparent;
width: 20.9%;
height: 7%;
}
.sequence-card-4 {
position: absolute;
z-index: 1;
background-color: transparent;
width: 26.3%;
height: 8.1%;
}
.sequence-card-5 {
position: absolute;
z-index: 1;
background-color: transparent;
width: 26.6%;
height: 8.6%;
}
.sequence-card:hover,
.sequence-card-1:hover,
.sequence-card-2:hover,
.sequence-card-3:hover,
.sequence-card-4:hover,
.sequence-card-5:hover {
border: 1px solid #74b9fd;
border-radius: 4px;
cursor: pointer;
}
.sequence-card.focused,
.sequence-card-1.focused,
.sequence-card-2.focused,
.sequence-card-3.focused,
.sequence-card-4.focused,
.sequence-card-5.focused {
border: 1px solid #74b9fd;
border-radius: 4px;
}
.sequences-card__wraper {
margin: 20px auto auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 1200px;
max-width: 100%;
overflow: auto;
padding-bottom: 40px;
}
.sequences-card__content {
box-shadow: 10px 10px 10px #89909b3b;
border: 2px solid #e1e7f1;
border-radius: 12px;
padding: 20px;
width: 360px;
min-height: 500px;
}
.sequences-card__content__header {
display: flex;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid #74b9ff;
}
.sequences-card__content__header h1 {
font-size: 1.5rem;
color: #74b9ff;
margin: 0;
}
.sequences-card__content__body {
margin-top: 20px;
}
.sequence-icon {
display: none;
width: 30px;
height: 30px;
margin-right: 10px;
}
.sequence-icon.focused {
display: block;
}
@media only screen and (max-width: 1174px) {
.sequences-card__preview {
margin-right: 0;
margin-bottom: 40px;
}
}
@media only screen and (max-width: 600px) {
.sequences-header {
background-color: #f9fcff;
position: relative;
display: flex;
justify-content: center;
}
.sequences-header__wraper h1 {
font-size: 2rem;
width: 90%;
}
.sequences-header__wraper p {
color: #a5a8ad;
font-size: 1.2rem;
text-align: center;
}
.sequences-header__wraper li {
font-size: 1rem;
}
.sequences-card__info {
margin-top: 50px;
width: 70%;
}
.sequences-card__wraper {
margin-top: 50px;
}
.sequences-card__content {
margin: auto 10px;
}
.similar-sequence h2 {
font-size: 2rem;
}
.sequences-link > h1 {
font-size: 1.2rem;
}
.sequences-link > ul > li {
font-size: 0.8rem;
}
.start-with-sequences h2 {
font-size: 2rem;
}
.start-with-sequences p {
font-size: 1.2rem;
}
.start-with-sequences__buttons button {
width: 150px !important;
}
.start-with-sequences__buttons a {
font-size: 1rem;
}
}
.connect-1 {
top: 15.9%;
left: 33%;
}
.connect-2 {
top: 26.5%;
left: 39.6%;
}
.connect-3 {
top: 25.4%;
left: 39.8%;
}
.connect-4 {
top: 41.5%;
left: 48.5%;
}
.connect-5 {
top: 45.6%;
left: 49.5%;
}
.message-1 {
top: 38.4%;
left: 19.9%;
}
.message-2 {
top: 78%;
left: 27.8%;
}
.message-3 {
top: 89.3%;
left: 27.7%;
}
.message-4 {
top: 47.8%;
left: 25.3%;
}
.message-5 {
top: 57.7%;
left: 19.3%;
}
.message-6 {
top: 67.6%;
left: 15%;
}
.message-7 {
top: 47.3%;
left: 25%;
}
.message-8 {
top: 57.4%;
left: 19.5%;
}
.message-9 {
top: 67.5%;
left: 15%;
}
.message-10 {
top: 41.5%;
left: 17.4%;
}
.message-11 {
top: 64.7%;
left: 10.5%;
}
.message-12 {
top: 66.6%;
left: 39.7%;
}
.message-13 {
top: 78.2%;
left: 39.8%;
}
.message-14 {
top: 72.6%;
left: 38.8%;
}
.message-15 {
top: 86.2%;
left: 38.8%;
}
.email-1 {
top: 78%;
left: 4.9%;
}
.email-2 {
top: 89.3%;
left: 3.6%;
}
.email-3 {
top: 78%;
left: 50.4%;
}
.email-4 {
top: 89.3%;
left: 50.5%;
}
.email-5 {
top: 54.3%;
left: 23.5%;
}
.email-6 {
top: 76.8%;
left: 2.5%;
}
.email-7 {
top: 72.5%;
left: 5.5%;
}
.email-8 {
top: 87.1%;
left: 70.6%;
}
.inmail-1 {
top: 78%;
left: 74.5%;
}
.inmail-2 {
top: 89.3%;
left: 76%;
}
.inmail-3 {
top: 54.4%;
left: 60%;
}
.inmail-4 {
top: 67.5%;
left: 67.9%;
}
.inmail-5 {
top: 76.8%;
left: 34.9%;
}
.inmail-6 {
top: 88%;
left: 38.9%;
}
.inmail-7 {
top: 70.8%;
left: 48.3%;
}
.inmail-8 {
top: 80.6%;
left: 44.4%;
}
.inmail-9 {
top: 70.9%;
left: 48.5%;
}
.inmail-10 {
top: 81%;
left: 44%;
}
.inmail-11 {
top: 66.6%;
left: 69.2%;
}
.inmail-12 {
top: 45.6%;
left: 12.6%;
}
</style>
</head>
<body
class="
page-template
page-template-page-templates
page-template-pagebuilder
page-template-page-templatespagebuilder-php
page
page-id-4420
page-child
parent-pageid-4472
wp-custom-logo
tg-site-layout--stretched
tg-container--wide
has-page-header has-breadcrumbs
elementor-default
"
>
<div class="sequences-header__wraper">
<div class="sequences-card__info">
<span
><img
src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/info-icon.png"
alt="Info"
/>
Click on a step to see the details.</span
>
</div>
</div>
<div class="sequences-card__wraper">
<div class="sequences-card__preview">
<img
src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/sequence-3-1.png"
alt="test"
/>
<!-- // Cards -->
<div class="sequence-card-2 connect-2 focused"></div>
<div class="sequence-card-2 message-4"></div>
<div class="sequence-card-2 message-5"></div>
<div class="sequence-card-2 message-6"></div>
<div class="sequence-card-2 inmail-7"></div>
<div class="sequence-card-2 inmail-8"></div>
</div>
<div class="sequences-card__content">
<div class="sequences-card__content__header">
<img
class="sequence-icon message"
src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/message-icon.png
"
alt="Message"
/>
<img
class="sequence-icon email"
src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/email-icon.png"
alt="Email"
/>
<img
class="sequence-icon connect focused"
src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/connect-icon.png"
alt="Invite to connect"
/>
<img
class="sequence-icon inmail"
src="https://www.theultimateleadgenerationtool.com/wp-content/uploads/2021/05/in-mail-icon.png"
alt="InMail"
/>
<h1>Connection Request</h1>
</div>
<div class="sequences-card__content__body">
<p>Hi {{firstName}},</p>
<p>
I am seeking to connect with other founders and your profile caught
my attention!
</p>
<p>Cheers,</p>
<p>Kris</p>
</div>
</div>
</div>
</body>
</html>
Add cookie on click JavaScript
function setCookie(key, value, expiry) {
var expires = new Date();
expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
function eraseCookie(key) {
var keyValue = getCookie(key);
setCookie(key, keyValue, '-1');
}
jQuery(document).on('click', '#mycookiebtn', function(event){
setCookie('test','1','1'); // key,value,expiry in days
});
var mycookier = getCookie('test');
// if ( mycookier == true ) {
// window.location = "http://healthsurance.bklstaging.com/hospital-patient/";
// }
This code needs to put different template as cookie available hole site.
if ( mycookier == true ) {
window.location = "http://healthsurance.bklstaging.com/hospital-patient/"; }
Lazy loading image
import { useEffect, useState } from 'react'
const useLazyImage = (src: string): useLazyImageProps => {
const [sourceLoaded, setSourceLoaded] = useState<string | null>(
null,
)
const [loading, setLoading] = useState<boolean>(true)
useEffect(() => {
const img = new Image()
img.src = src
img.onload = () => {
setLoading(false)
setSourceLoaded(src)
}
return () => {
img.remove()
}
}, [src])
return {
loading,
src: sourceLoaded,
}
}
interface useLazyImageProps {
loading: boolean
src: null | string
}
export default useLazyImage