Cards bkup

Developer
Rob
Size
5,798 Kb
Views
24,288
  1. Cards bkup Previews
  2. Cards bkup HTML Codes
  3. Cards bkup CSS Codes
  4. Cards bkup JS Codes

How do I make an cards bkup?

What is a cards bkup? How do you make a cards bkup? This script and codes were developed by Rob on 15 August 2022, Monday.

Cards bkup Previews
IQ Test

Cards bkup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cards bkup</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { font-family: 'Cardo', serif;
}
section { position:relative; float:left; width:980px; background:#f2f2f2; height:700px
}
/* entire container, keeps perspective */
.flip-container {	perspective: 5000; margin:20px; position:absolute; top:calc(50% - 150px);	left: calc(50% - 110px); transition:all .3s ease-in;
}
/*
.flip-container:nth-child(n + 5) { top:340px;
}
*/
.flip-container, .front, .back {	width: 220px;	height: 300px; border-radius:4px;
}
/* flip speed goes here */
.flipper {	transition: 0.6s;	transform-style: preserve-3d;	position: relative;
}
/* hide back of pane during swap */
.front, .back {	backface-visibility: hidden;	position: absolute;	top: 0;	left: 0; box-shadow:0 0 3px 2px rgba(0,0,0,0.1); transition:all .2s ease-in;
}
/* front pane, placed above back */
.front {	z-index: 2; background:#EEECD8; border:3px double #D7C3A3;
}
/* back, initially hidden pane */
.back {	transform: rotateY(180deg); background:#112327; border:4px double #091415; overflow:hidden;
}	/* flip the pane when hovered */	.flip-container.flip .flipper {	transform: rotateY(180deg);	}
a { background:#333; color:#fff; padding:0.5em 2em; border-radius:4px; margin:30px; float:right; clear:right;
}
.reward { padding:0.5em; text-align:center; color:#392919; opacity:0.6;
}
.front:hover { box-shadow:0 0 3px 2px rgba(0,0,0,0.2);
}
.back:hover { /*box-shadow:0 0px 8px 6px rgba(37,187,187,0.8);*/ box-shadow:0 0 4px 3px rgba(0,0,0,0.3);
}
.back:hover .shine { opacity:0.7; width:80%; bottom:-40%; left:100%;
}
.back .shine { transition:all .2s ease-in; position:absolute; top:-20%; width:90%; bottom:20%; left:-100%; opacity:0;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%, rgba(103,114,117,0) 64%, rgba(17,35,39,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.33)), color-stop(64%,rgba(103,114,117,0)), color-stop(100%,rgba(17,35,39,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54ffffff', endColorstr='#00112327',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* styling */
h2 { text-align:center; position:absolute; bottom:1em; width:100%; margin:0; text-transform:uppercase; font-weight:normal; opacity:0.7; color:#392919; font-size:1.2em;
}
h2:first-letter { font-size:1.2em;
}
.back:before { content:''; position:absolute; top:0; bottom:0; width:40%; left:35%; transform:skew(18deg); background:#091415; border-left:20px solid #0C1A1C;
}
.back:after { content:''; position:absolute; top:0; bottom:0; width:100%; opacity:0.8; background: -moz-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%, rgba(12,26,28,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(17,35,39,0.39)), color-stop(100%,rgba(12,26,28,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63112327', endColorstr='#0c1a1c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.front { background: #e0dacc; /* Old browsers */
background: -moz-linear-gradient(top, #e0dacc 0%, #eeecd8 6%, #e0d6bc 22%, #eeecd8 37%, #e0d2bc 59%, #e8e2cc 75%, #ede7d7 81%, #e5dcd0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0dacc), color-stop(6%,#eeecd8), color-stop(22%,#e0d6bc), color-stop(37%,#eeecd8), color-stop(59%,#e0d2bc), color-stop(75%,#e8e2cc), color-stop(81%,#ede7d7), color-stop(100%,#e5dcd0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* IE10+ */
background: linear-gradient(to bottom, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0dacc', endColorstr='#e5dcd0',GradientType=0 ); /* IE6-9 */
}
.front:before { content:''; position:absolute; top:0; bottom:0; width:100%; opacity:0.8; background: -moz-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%, rgba(224,210,188,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(238,236,216,0.39)), color-stop(100%,rgba(224,210,188,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63eeecd8', endColorstr='#e0d2bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section>
<div class="flip-container flip" id="1">	<div class="flipper">	<div class="front"> <div class="reward">A jester's hat</div> <h2>The Fool</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
<div class="flip-container flip" id="2">	<div class="flipper">	<div class="front"> <div class="reward">x2 exp for 30 mins</div> <h2>The Student</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
<div class="flip-container flip" id="3">	<div class="flipper">	<div class="front"> <div class="reward">100 gold</div> <h2>The Alechemist</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
<div class="flip-container flip" id="4">	<div class="flipper">	<div class="front"> <div class="reward">x3 exp for 30 mins</div> <h2>The Teacher</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
<div class="flip-container flip" id="5">	<div class="flipper">	<div class="front"> <div class="reward">A warrior item</div> <h2>The Warrior</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
<div class="flip-container flip" id="6">	<div class="flipper">	<div class="front"> <div class="reward">Buffed defence for 30 mins</div> <h2>The Priest</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
<div class="flip-container flip" id="7">	<div class="flipper">	<div class="front"> <div class="reward">Enemies drop extra gold for 30 mins</div> <h2>The Banker</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
<div class="flip-container flip" id="8">	<div class="flipper">	<div class="front"> <div class="reward">A mage item</div> <h2>The Wizard</h2>	</div>	<div class="back"> <div class="shine"></div>	</div>	</div>
</div>
</section>
<a class="show">Show</a>
<a class="shuffle">Shuffle</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cards bkup - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { font-family: 'Cardo', serif;
}
section { position:relative; float:left; width:980px; background:#f2f2f2; height:700px
}
/* entire container, keeps perspective */
.flip-container {	perspective: 5000; margin:20px; position:absolute; top:calc(50% - 150px);	left: calc(50% - 110px); transition:all .3s ease-in;
}
/*
.flip-container:nth-child(n + 5) { top:340px;
}
*/
.flip-container, .front, .back {	width: 220px;	height: 300px; border-radius:4px;
}
/* flip speed goes here */
.flipper {	transition: 0.6s;	transform-style: preserve-3d;	position: relative;
}
/* hide back of pane during swap */
.front, .back {	backface-visibility: hidden;	position: absolute;	top: 0;	left: 0; box-shadow:0 0 3px 2px rgba(0,0,0,0.1); transition:all .2s ease-in;
}
/* front pane, placed above back */
.front {	z-index: 2; background:#EEECD8; border:3px double #D7C3A3;
}
/* back, initially hidden pane */
.back {	transform: rotateY(180deg); background:#112327; border:4px double #091415; overflow:hidden;
}	/* flip the pane when hovered */	.flip-container.flip .flipper {	transform: rotateY(180deg);	}
a { background:#333; color:#fff; padding:0.5em 2em; border-radius:4px; margin:30px; float:right; clear:right;
}
.reward { padding:0.5em; text-align:center; color:#392919; opacity:0.6;
}
.front:hover { box-shadow:0 0 3px 2px rgba(0,0,0,0.2);
}
.back:hover { /*box-shadow:0 0px 8px 6px rgba(37,187,187,0.8);*/ box-shadow:0 0 4px 3px rgba(0,0,0,0.3);
}
.back:hover .shine { opacity:0.7; width:80%; bottom:-40%; left:100%;
}
.back .shine { transition:all .2s ease-in; position:absolute; top:-20%; width:90%; bottom:20%; left:-100%; opacity:0;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%, rgba(103,114,117,0) 64%, rgba(17,35,39,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.33)), color-stop(64%,rgba(103,114,117,0)), color-stop(100%,rgba(17,35,39,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0.33) 0%,rgba(103,114,117,0) 64%,rgba(17,35,39,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54ffffff', endColorstr='#00112327',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
/* styling */
h2 { text-align:center; position:absolute; bottom:1em; width:100%; margin:0; text-transform:uppercase; font-weight:normal; opacity:0.7; color:#392919; font-size:1.2em;
}
h2:first-letter { font-size:1.2em;
}
.back:before { content:''; position:absolute; top:0; bottom:0; width:40%; left:35%; transform:skew(18deg); background:#091415; border-left:20px solid #0C1A1C;
}
.back:after { content:''; position:absolute; top:0; bottom:0; width:100%; opacity:0.8; background: -moz-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%, rgba(12,26,28,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(17,35,39,0.39)), color-stop(100%,rgba(12,26,28,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(17,35,39,0.39) 0%,rgba(12,26,28,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63112327', endColorstr='#0c1a1c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.front { background: #e0dacc; /* Old browsers */
background: -moz-linear-gradient(top, #e0dacc 0%, #eeecd8 6%, #e0d6bc 22%, #eeecd8 37%, #e0d2bc 59%, #e8e2cc 75%, #ede7d7 81%, #e5dcd0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0dacc), color-stop(6%,#eeecd8), color-stop(22%,#e0d6bc), color-stop(37%,#eeecd8), color-stop(59%,#e0d2bc), color-stop(75%,#e8e2cc), color-stop(81%,#ede7d7), color-stop(100%,#e5dcd0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* IE10+ */
background: linear-gradient(to bottom, #e0dacc 0%,#eeecd8 6%,#e0d6bc 22%,#eeecd8 37%,#e0d2bc 59%,#e8e2cc 75%,#ede7d7 81%,#e5dcd0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0dacc', endColorstr='#e5dcd0',GradientType=0 ); /* IE6-9 */
}
.front:before { content:''; position:absolute; top:0; bottom:0; width:100%; opacity:0.8; background: -moz-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%, rgba(224,210,188,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(238,236,216,0.39)), color-stop(100%,rgba(224,210,188,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(238,236,216,0.39) 0%,rgba(224,210,188,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63eeecd8', endColorstr='#e0d2bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Cards bkup - Script Codes JS Codes

$(".flip-container").each(function() { var leftRand = Math.floor(Math.random()*8); leftRand = leftRand - 4; var topRand = Math.floor(Math.random()*8); topRand = topRand - 4; $(this).css({ marginLeft: leftRand, marginTop: topRand }); var skewRand = Math.floor(Math.random()*6); skewRand = skewRand - 3; $(this).css({transform: "skew(" + skewRand + "deg)"});
});
$('.show').click(function() { var time = 50; $(".flip-container").each(function() { var $this = $(this); $(this).css({ marginLeft: "", marginTop: "" }); var skewRand = Math.floor(Math.random()*6); skewRand = skewRand - 3; $(this).css({transform: ""}); setTimeout(function() { var item = $this.attr("id"); $this.css({zIndex: item}); $this.removeClass("flip"); if(item < 5) { leftPos = (item - 1) * 240; $this.css({ left: leftPos, top: 0 }); } else { leftPos = (item - 5) * 240; $this.css({ left: leftPos, top: 320 }); } }, time); time += 50; });
});
$(".shuffle").click(function() { var time = 50; //flip the cards $(".flip-container").each(function() { var $this = $(this); setTimeout(function() { $this.addClass("flip"); }, time); time += 50; }); //collect the cards setTimeout(function() { $(".flip-container").each(function() { $(this).css({ left: "", top: "" }); }); }, 500); setTimeout(function() { $(".flip-container").each(function() { $this = $(this); /*setTimeout(function() {*/ var numRand = Math.floor(Math.random()*9); $this.css({ zIndex: numRand}); var leftRand = Math.floor(Math.random()*400); leftRand = leftRand - 200; var topRand = Math.floor(Math.random()*300); topRand = topRand - 150; $this.css({left: "-=" + leftRand + "", top: "-=" + topRand + "" }); }); }, 900); setTimeout(function() { $(".flip-container").each(function() { $this = $(this); $this.css({left: "", top: ""}); }); }, 1300); setTimeout(function() { $(".flip-container").each(function() { $this = $(this); /*setTimeout(function() {*/ var numRand = Math.floor(Math.random()*9); $this.css({ zIndex: numRand}); var leftRand = Math.floor(Math.random()*600); leftRand = leftRand - 300; var topRand = Math.floor(Math.random()*500); topRand = topRand - 250; $this.css({left: "-=" + leftRand + "", top: "-=" + topRand + "" }); }); }, 1600); setTimeout(function() { $(".flip-container").each(function() { $this = $(this); $this.css({left: "", top: ""}); }); }, 1900); setTimeout(function() { $(".flip-container").each(function() { $this = $(this); /*setTimeout(function() {*/ var numRand = Math.floor(Math.random()*9); $this.css({ zIndex: numRand}); var leftRand = Math.floor(Math.random()*600); leftRand = leftRand - 300; var topRand = Math.floor(Math.random()*500); topRand = topRand - 250; $this.css({left: "-=" + leftRand + "", top: "-=" + topRand + "" }); }); }, 2100); setTimeout(function() { $(".flip-container").each(function() { $this = $(this); $this.css({left: "", top: ""}); var leftRand = Math.floor(Math.random()*8); leftRand = leftRand - 4; var topRand = Math.floor(Math.random()*8); topRand = topRand - 4; $this.css({ marginLeft: leftRand, marginTop: topRand }); var skewRand = Math.floor(Math.random()*6); skewRand = skewRand - 3; $(this).css({transform: "skew(" + skewRand + "deg)"}); }); }, 2400);
});
/*
$(".flip-container").click(function() { $(this).toggleClass("flip");
});
*/
Cards bkup - Script Codes
Cards bkup - Script Codes
Home Page Home
Developer Rob
Username robooneus
Uploaded August 15, 2022
Rating 3
Size 5,798 Kb
Views 24,288
Do you need developer help for Cards bkup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob (robooneus) Script Codes
Name
Fixed nav background - stackoverflow
Scroll Arrow
Prototype jobboard6
A Pen by Rob
Scroll Arrow - keep hidden
Basic page layout
Simple Page with Side Menu
Restaurant Item
Berlin Restaurants
Content Expander
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!