We Keep Coding

css make element slanted and hoverable

I have this product card, which i am using for a model type card:
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 200px;
left: 0;
top: 100%;
background-color: #fff;
transform: skewY(0deg);
transform-origin: 0 0;
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>
I need it to be like this:
https://res.cloudinary.com/piersolutions/video/upload/v1626393248/Screen_Recording_2021-07-15_at_7.47.07_PM_nlksby.mov
however, I cannot figure out 1) how to get the item slanted, and 2) to only do it on hover. I have been trying for days and cannot find anything on how to do this!! I tried using the hover css tag, but it didn't work, because i don't know how to mkae it appear and disapear on hover, and slanted is even worse :( Any ideas?

Here is the working example, you just need to move a skewed element on hovering .rooted-increment.
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
.common-card {
margin: 0 auto;
width: 250px;
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 30px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3), 0 -12px 36px -8px rgba(0,0,0,.025);
}
.common-card h2 {
padding-bottom: 10px;
}
.rooted-increment {
position: relative;
flex-shrink: 0;
padding: 30px;
margin-top: 50px;
}
.rooted-increment .cover {
position: relative;
height: 200px;
background-color: #fa9a91;
background-image: url("https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg");
background-size: 120%;
background-position: top;
margin: -30px -30px 25px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.rooted-increment .cover:after {
content: "";
position: absolute;
width: 100%;
height: 100px;
left: 0;
top: 100%;
background-color: #ffffff54;
transform: skewY(25deg);
transform-origin: 0 0;
transition: all 0.3s ease-in;
}
.rooted-increment:hover .cover:after {
transform: skewY(25deg) translateY(-100px);
}
<aside class="rooted-increment common-card">
<div class="cover"></div>
<p>
My name
</p>
</aside>

You can do like this also.
#import 'https://fonts.googleapis.com/css?family=Do+Hyeon';
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clear-fix:after {
display: block;
clear: both;
content: "";
}
.img-responsive {
max-width: 100%;
height: auto;
}
.card__collection {
position: relative;
display: block;
background: rgba(10, 10, 10, 0.5);
padding: 10px;
font-family: "Do Hyeon", sans-serif;
overflow: hidden;
}
.card__collection .cards {
width: 300px;
height: 400px;
display: block;
background-size: cover;
float: left;
border-radius: 15px;
position: relative;
overflow: hidden;
background-position: center;
margin: 10px;
}
.card__collection .cards--one {
backface-visiblility: hidden;
}
.card__collection .cards--one:hover:after {
bottom: -20px;
}
.card__collection .cards--one:hover:before {
bottom: -10px;
}
.card__collection .cards--one:hover .cards--one__rect {
left: 45%;
}
.card__collection .cards--one:hover .cards--one__rect--back {
left: 50%;
}
.card__collection .cards--one::after {
content: "";
display: block;
position: absolute;
height: 70px;
transform: rotate(-3deg);
background: #e660e3;
position: absolute;
bottom: -80px;
left: 0;
right: -10px;
z-index: 9;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one:before {
content: "";
display: block;
position: absolute;
height: 80px;
transform: rotate(-3deg);
bottom: -90px;
left: 0;
background: #fff;
right: -10px;
z-index: 5;
transition: all 0.2s ease-in;
transition-delay: 0.1s;
}
.card__collection .cards--one__rect {
color: #fff;
text-transform: uppercase;
font-size: 18px;
background: #0f9bc0;
width: 126px;
height: 55px;
transform: skewY(5deg);
position: absolute;
display: block;
top: 60%;
left: -45%;
z-index: 1;
line-height: 3.3rem;
text-align: center;
transition: all 0.2s ease-in;
}
.card__collection .cards--one__rect--back {
display: block;
background: rgba(34, 65, 154, 0.8);
width: 126px;
height: 55px;
transform: skewY(7deg);
position: absolute;
top: 65%;
left: -50%;
transition: all 0.2s ease-in;
transition-delay: 0.3s;
}
.card__collection .cards--one__rect p {
transform: skewY(-7deg);
position: relative;
}
.card__collection .cards--two {
position: relative;
backface-visibility: hidden;
}
.card__collection .cards--two p {
position: absolute;
top: 83%;
left: -100%;
text-transform: capitalize;
color: #fff;
font-size: 20px;
z-index: 8;
transition: all 0.6s ease;
}
.card__collection .cards--two:hover p {
left: 8%;
}
.card__collection .cards--two:hover img {
transform: translateY(-15px);
}
.card__collection .cards--two:hover .cards--two__rect {
top: 75%;
}
.card__collection .cards--two:hover .cards--two__rect:before {
transform: translateY(15px);
}
.card__collection .cards--two:hover li {
transform: translateY(0);
}
.card__collection .cards--two:hover .cards--two__tri {
right: -40%;
}
.card__collection .cards--two:hover .cards--two__tri:before {
right: -312px;
}
.card__collection .cards--two img {
transition: all 0.2s ease;
}
.card__collection .cards--two__tri {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #fff;
opacity: 0.9;
position: absolute;
display: block;
top: 0;
right: -100%;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__tri:before {
border-top: 220px solid transparent;
border-bottom: 190px solid transparent;
border-right: 288px solid #57ccfd;
position: absolute;
content: "";
display: block;
top: -220px;
right: -612px;
transition: all 0.3s ease-in-out;
transition-delay: 0.2s;
}
.card__collection .cards--two__rect {
width: 750px;
height: 200px;
background: #fff;
display: block;
position: absolute;
top: 175%;
left: -78%;
transform: rotate(30deg);
z-index: 5;
opacity: 0.9;
transition: all 0.3s ease-in-out;
}
.card__collection .cards--two__rect:before {
content: "";
display: block;
width: 100%;
position: relative;
height: 100%;
background: #f07306;
transform: translateY(200px);
z-index: 2;
transition: all 0.3s ease-in-out;
transition-delay: 0.1s;
}
.card__collection .cards--two ul {
list-style: none;
position: absolute;
bottom: 0;
left: 10px;
z-index: 9;
}
.card__collection .cards--two ul li {
display: inline-block;
font-size: 16px;
margin: 7px;
color: #fff;
transition: all 0.2s ease-in-out;
transform: translateY(100px);
}
.card__collection .cards--two ul li:nth-child(2) {
transition-delay: 0.2s;
}
.card__collection .cards--two ul li:nth-child(3) {
transition-delay: 0.3s;
}
.card__collection .cards--two ul li:nth-child(4) {
transition-delay: 0.4s;
}
.card__collection .cards--three {
position: relative;
z-index: 10;
}
.card__collection .cards--three:hover .cards--three__rect-1 {
left: 10%;
}
.card__collection .cards--three:hover .cards--three__rect-1 .shadow-1 {
left: -20%;
}
.card__collection .cards--three:hover .cards--three__rect-2 {
left: 60%;
}
.card__collection .cards--three:hover .cards--three__rect-2:before {
left: -100%;
}
.card__collection .cards--three:hover .cards--three__rect-2:after {
left: 80%;
}
.card__collection .cards--three:hover .cards--three__rect-2 .shadow-2 {
left: -10%;
}
.card__collection .cards--three:hover .cards--three__circle {
transform: scale(1);
}
.card__collection .cards--three:hover .cards--three__circle:before {
transform: scale(0.9);
}
.card__collection .cards--three:hover .cards--three__list li {
transform: translateX(0);
}
.card__collection .cards--three__rect-1 {
background: #fff;
width: 200px;
height: 110px;
transform: skewX(-20deg);
display: block;
position: absolute;
top: 73%;
opacity: 0.9;
left: -100%;
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-1 p {
font-size: 20px;
color: #fff;
transform: skewX(20deg);
line-height: 6rem;
}
.card__collection .cards--three__rect-1 .shadow-1 {
background: #9b1308;
width: 230px;
height: 100px;
display: block;
position: absolute;
left: -200%;
z-index: -1;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2 {
width: 100px;
height: 70px;
background: #fff;
position: absolute;
top: 65%;
left: 1000%;
opacity: 0.9;
transform: skewX(-20deg);
z-index: 8;
transition: all 0.5s ease-in;
}
.card__collection .cards--three__rect-2::before {
content: "";
display: block;
width: 50px;
height: 40px;
background: #57ccfd;
opacity: 1;
position: absolute;
left: 500%;
top: 10%;
transition: all 0.3s ease-in;
}
.card__collection .cards--three__rect-2::after {
content: "";
display: block;
width: 50px;
height: 40px;
background: #9b1308;
opacity: 1;
position: absolute;
left: 500%;
top: 114%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__rect-2 .shadow-2 {
background: #57ccfd;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: -10%;
left: 500%;
transition: all 0.5s ease-in;
transition-delay: 0.2s;
}
.card__collection .cards--three__circle {
width: 220px;
height: 220px;
border-radius: 50%;
background: #fff;
position: absolute;
top: -15%;
left: 50%;
opacity: 0.9;
transform: scale(0);
transition: all 0.3s ease;
}
.card__collection .cards--three__circle:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #9b1308;
border-radius: 50%;
transform: scale(0);
transition: all 0.3s ease;
transition-delay: 0.2s;
}
.card__collection .cards--three__list {
list-style: none;
position: absolute;
top: -9px;
right: 7px;
padding-top: 60px;
transition: all 0.4s ease;
}
.card__collection .cards--three__list li {
display: inline-block;
margin: 4px;
color: #fff;
width: 25px;
height: 25px;
border-radius: 50%;
background: rgba(87, 204, 253, 0.9);
text-align: center;
line-height: 1.7rem;
font-size: 12px;
transition: all 0.3s ease;
transform: translateX(500%);
}
.card__collection .cards--three__list li:nth-child(1) {
transition-delay: 0.2s;
}
.card__collection .cards--three__list li:nth-child(2) {
transition-delay: 0.3s;
}
.card__collection .cards--three__list li:nth-child(3) {
transition-delay: 0.4s;
}
<div class="card__collection clear-fix">
<div class="cards cards--two">
<img src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d702cb99ca804bffcfa8820c46483264&auto=format&fit=crop&w=651&q=80" class="img-responsive" alt="Cards Image">
<span class="cards--two__rect"></span>
<span class="cards--two__tri"></span>
<p>Lucy Grace</p>
<ul class="cards__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
<div class="cards cards--three">
<img src="https://images.unsplash.com/photo-1480408144303-d874c5e12201?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=575213599ae24b3dbdfd84be79425c50&auto=format&fit=crop&w=634&q=80" class="img-responsive" alt="">
<span class="cards--three__rect-1">
<span class="shadow-1"></span>
<p>Chris Levnon</p>
</span>
<span class="cards--three__rect-2">
<span class="shadow-2"></span>
</span>
<span class="cards--three__circle"></span>
<ul class="cards--three__list">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>

Set a visit count down using cookies

My site uses an anti-adblock that prevents people from entering it, but no one likes to see advertisements, so I've decided to look for a way to let new visitors use the site a few times before the message to disable adblock appears.
I tried to use cookies to record a number, and every time the person visits subtract the number, delete the old cookie, create a new one with the number subtracted, so when the number is equal to 0 the anti-adblock appears, but it is confusing for me I barely started learning javascript.
Is there any easier way to do this or cookie is the best option? How do I do this?
Sample page of my anti-Adblock: https://www.stackexample.ml/adblock
My anti-adblock code:
NOTE: My website is static.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
if( window.canRunAds === undefined ){
div2.style.display="block"
div3.style.display="none"
b.style.display="block"
span.style.color="#d06079"
span.innerHTML="Desative o Adblock"
}else{
div1.style.display="block"
div3.style.display="none"
span.innerHTML="Adblock desativado"
//código para liberar a pagina aqui
}
};
.cont {
width:320px;
margin:18% auto;
}
#b {
border:1px solid #ba5269;
background-color:#d06079;
color:white;
border-radius:6px;
padding:15px;
font-size:18px;
display:none;
margin:25px auto;
}
#on{
display:none;
margin:22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display:none;
}
#v {
font-family:arial;
font-size:35px;
color:green;
display:block;
text-align:center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide{
display:none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before, .sa-icon.sa-success::after {
content: '';
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
-webkit-border-radius: 120px 0 0 120px;
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
-webkit-border-radius: 0 120px 120px 0;
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
.sa-icon.sa-success {
border-color: transparent\9;
}
.sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9;
}
.sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9;
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
#-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
#-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right: 4px solid #a5d7a7;
border-bottom: 4px solid #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
margin:22px auto;
}
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes loading {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right: 6px solid #fff;
border-bottom: 6px solid #fff;
height: 100%;
width: 100%;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-ms-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</body>
</html>

If you are looking to maintain a counter, you can use Local Storage for the same.. for example,
Note: You won't be able to run this code here due to the restrictions by StackOverflow, as am using localStorage
You can see it in action here instead (keep refreshing the page for 3 times and you'll see) - https://codepen.io/anon/pen/qvaYQK
Here, am initializing the counter of adcounter with 1 if not found, if found, I just increment it if the ads are blocked, if it crosses 3, I just show the modal to the user. If user disables the adblock, I reset the counter back to 0.
I've also refactored your code a bit, there is a massive chunk of code which can still be refactored.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
var getWrapper = document.getElementById('ad-blocker-modal');
var showModalAfterVisits = 3; //show modal after 3 visits
var getCounter = localStorage.getItem('adcounter');
if(!getCounter) {
localStorage.setItem('adcounter', 0); // initialize Local Storage
}
function checkForAdBlocker() {
if (!window.canRunAds) {
if(getCounter < 3) {
//keep incrementing the counter unless the counter reaches 3 and return
localStorage.setItem('adcounter', ++getCounter);
return;
}
getWrapper.classList.remove('hide');
div2.style.display = "block"
div3.style.display = "none"
b.style.display = "block"
span.style.color = "#d06079"
span.innerHTML = "Desative o Adblock"
} else {
localStorage.setItem('adcounter', 0); //reset if adblock is disabled
div1.style.display = "block"
div3.style.display = "none"
span.innerHTML = "Adblock desativado"
}
}
checkForAdBlocker();
};
.cont {
width: 320px;
margin: 18% auto;
}
.hide {
display: none;
}
#ad-blocker-modal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
}
#b {
border: 1px solid #ba5269;
background-color: #d06079;
color: white;
border-radius: 6px;
padding: 15px;
font-size: 18px;
display: none;
margin: 25px auto;
}
#on {
display: none;
margin: 22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display: none;
}
#v {
font-family: arial;
font-size: 35px;
color: green;
display: block;
text-align: center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide {
display: none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before,
.sa-icon.sa-success::after {
content: '';
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
transform: rotate(-45deg);
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
transform: rotate(-45deg);
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
animation: rotatePlaceholder 4.25s ease-in;
}
.animateSuccessTip {
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
animation: animateSuccessLong 0.75s;
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
transform: rotate(-45deg);
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right-color: a5d7a7;
border-bottom-color: #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
animation: loading 1s infinite linear;
margin: 22px auto;
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right-color: #fff;
border-bottom: #fff;
height: 100%;
width: 100%;
border-radius: 50%;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
Some content on my Website
<div id="ad-blocker-modal" class="hide">
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</div>
</body>
</html>

Navigation Menu not working on mobile

I'm using Navigation using a plugin called Hamburgler and it works fantastic on desktop. However, on mobile, the navigation appears, but it can't be clicked.
The coding for the site I'm trying to edit is a bit janky, my apologies.
Navigation coding:
JS
<script type="text/javascript">
// HAMBURGLERv2
function togglescroll() {
$('body').on('touchstart', function(e) {
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
});
}
$(document).ready(function() {
togglescroll()
$(".icon").click(function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$("body").toggleClass("noscroll");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
// PUSH ESC KEY TO EXIT
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$(".mobilenav").fadeOut(500);
$(".top-menu").removeClass("top-animate");
$("body").removeClass("noscroll");
$(".mid-menu").removeClass("mid-animate");
$(".bottom-menu").removeClass("bottom-animate");
}
});
</script>
HTML
<a href="javascript:void(0)" class="icon">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</a>
<div class="mobilenav">
<div class="insidenav">
2016 Salary Guide
2015 Salary Guide
2014 Salary Guide
</div>
</div>
CSS
#navigation {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
background-color: #fff;
z-index: 994;
}
.top-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 999 !important;
}
.mid-animate {
opacity: 0;
z-index: 999 !important;
}
.bottom-animate {
background: #e71630 !important;
top: 13px !important;
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
z-index: 999 !important;
}
.top-menu {
top: 5px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.mid-menu {
top: 13px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.bottom-menu {
top: 21px;
width: 25px;
height: 2px;
border-radius: 10px;
background-color: #000;
z-index: 999 !important;
}
.menui {
background: #000;
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
margin-top: 10px;
position: absolute;
z-index: 999 !important;
}
.icon {
z-index: 999 !important;
display: block;
padding: 9px;
height: 32px;
width: 32px;
position: fixed;
right: 30px;
top: 15px;
}
.mobilenav {
font-family: inherit;
top: 0;
left: 0;
z-index: 995 !important;
display: none;
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
opacity: 0.98;
}
.insidenav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
width: 100%;
max-width: 300px;
}
a.inside {
z-index: 2147483647;
display: block;
width: 300px;
height: 70px;
background-color: #dd152e;
color: #FFF;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 70px;
text-transform: uppercase;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-ms-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
margin-bottom: 50px;
text-decoration: none;
}
a.inside:hover {
background-color: #c21228;
}
Here's the site itself:
http://salaryguide.diamondbacklab.com
Sorry, I know it's a lot of code to look at. Any help would be super appreciated!

You need to remove these lines from JavaScript:
if ($('body').hasClass('noscroll')) {
e.preventDefault();
}
to make it work. Because preventDefault() also prevents standard browser behaviour.

how to make a search bar responsive using jquery or css3

function searchToggle(obj, evt) {
var container = $(obj).closest('.search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('.search-input').val('');
}
}
.search-wrapper {
position: absolute;
left: 79%;
top: -25px;
transform: translate(-50%, 50%);
}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: black;
border-radius: 16px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 400px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0 70px 0 20px;
position: absolute;
top: 0;
left: 0;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
opacity: 0;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #fff;
padding: 0;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
background: #FE5F55;
border-radius: 2px;
left: 9px;
top: 18px;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
border: 4px solid #FE5F55;
border-radius: 50%;
left: 0;
top: 0;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="search-wrapper">
<div class="input-holder">
<input type="text" class="search-input" placeholder="Type to search" />
<button class="search-icon" onclick="searchToggle(this, event);"><span></span>
</button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>
After a lot of research, changes I finally managed to make and position my search bar. But according to me it is not performing the search function. for example, if I type anything in it like 'home' and press the search icon nothing happens. So I want to ask whether I am wrong i.e. the search function is working and secondly I want to make it responsive like Google's search bar. I mean I want it to remember searches and also shorten the results as I type.
Any help would be highly appreciated. Thanks :)

I highly recommend you to use Bootstrap. It only uses CSS and is leightweight. You can find it well documented at Bootstrap Forms and W3S. If you don't want to use a Framework you can try building something for yourself. For that purpose you can simply look again at bootstrap (or another CSS Framework) and copy whatever you want to use.
Again, you should use a CSS Framework for responsive designs, they help alot and make your life easier.
Regards, Megajin

CSS ".div + .anotherdiv" doesn't work how I need

https://jsfiddle.net/f962zL0h/
Hey!
I want to click on card1, so it will scale up etc. (that's working). But I also need, to animate card2 and card3. But when i do this:
.card1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0.5em;
margin-top: 200px;
transition: all .3s ease-in-out;
position: absolute;
}
.card2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0.5em;
margin-top: 200px;
transition: all .3s ease-in-out;
position: absolute;
margin-left: 340px;
}
.card3 {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0.5em;
margin-top: 200px;
transition: all .3s ease-in-out;
position: absolute;
margin-left: 675px;
}
.card1:active {
margin: 0em;
width: 40%;
height: 100%;
position: fixed;
}
.card1:active + .card2 {
transform: scale(0) translatey(1000px);
opacity: 0;
}
.card1:active + .card3 {
transform: scale(0) translatey(1000px);
opacity: 0;
}
It is moving just with card2, not card3, but they've got same settings and everything.Thanks so much for any help guys!

It doesn't work with .card3 because .card1 is not directly followed by .card3.
Instead use ~ selector:
.card1:active ~ .card2{
transform: scale(0) translatey(1000px);
opacity: 0;
}
.card1:active ~ .card3{
transform: scale(0) translatey(1000px);
opacity: 0;
}
Updated JSFiddle.