I built a blackjack game. Now I want the cards of the dealer, when they appear, to flip from back to the front. I built the keyframes in CSS but I can't apply it on the JS file.
JAVASCRIPT
function deal() {
if (newgame == true) {
var random = Math.floor((Math.random() * 13));
var UserCards = document.getElementById('user');
var card = document.createElement('img');
card.setAttribute("width", 450);
card.setAttribute("src", images[random]);
UserCards.appendChild(card);
UserCards.className ='myDIV';
checkUserScore += cards[random];
if (checkUserScore > 21)
{
UserCards.appendChild(card);
alert("you hit more than 21");
}
}
EDIT: Did the OP leave out the function closing brace when pasting the code, or is that an actual error?
CSS
<style>
.myDIV {
margin: auto;
border: 1px solid black;
width: 500px;
height: 500px;
background-image:url(media/cards/UpsideDown.jpg);
color: white;
animation: mymove 5s infinite;
}
#keyframes mymove {
50% {
transform: rotate(360deg);
background-image:url(media/cards/QC.jpg);
}
}
</style>
Have you searched the web?
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
Related
Using vanilla js, I am trying to target all elements with the class headingScroll, so when I scroll 100px from the top, it fades away. When I make the function access the DOM as getelementbyid, and then give say, my name the id name, it works, but not with classes.
Anyone have any workarounds or notice that this code is ineffective with what I am trying to do?
window.onload = function() {
const EFFECT = document.querySelectorAll('.headingScroll');
window.addEventListener('scroll', scrollEffect);
function scrollEffect() {
if(window.scrollY>100) {
EFFECT.classList.add('show');
}
else {
EFFECT.classList.remove('show')
}
}
scrollEffect('.headingScroll');
}
/*Header*/
.header-img {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 140, 255, 0.5)), url("../images/coding-on-laptop.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
}
.header-text {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
color: white;
}
#headingName {
font-size: 4rem;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
opacity: 1;
transition: 1s ease-in-out;
}
.headingScroll.remove {
opacity: 1;
transition: 1s ease-in-out;
}
.headingScroll.show {
opacity: 0;
}
.header-social {
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
}
.fa {
color: white;
font-size: 2rem;
text-align: center;
text-decoration: none;
margin: 5px;
}
.fa:hover {
color:#0779e4;
transition: ease-in-out .3s;
transform: translateY(-2px);
}
.scroll_down {
position: absolute;
bottom: 20%;
left: 50%;
font-size: 2em;
transform: translate(-50%, -20%);
color: white;
padding-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,.5)
}
<!--Header-->
<header class="header-img" id="home">
<div class="triangle_1"></div>
<div class="triangle_2"></div>
<div class="header-text">
<h1 id='headingName' class="headingScroll">Alex Schmidt</h1>
</div>
<div class="header-social">
</div>
<div class='scroll_down'>
<p>Scroll</p>
<span></span>
</div>
</header>
<!--End Header-->
<!--About-->
<div class="about-wrapper" id="about">
<div class="triangle_3"></div>
<div class="triangle_4"></div>
<div class="about">
<div class="inner-about">
<h1>About</h1>
<h2>Front-end Engineer</h2>
<h3>Located in Portland, OR</h3>
</div>
</div>
You have to loop through each one to apply.
window.onload = function() {
const effects = document.querySelectorAll('.headingScroll');
window.addEventListener('scroll', scrollEffect);
function scrollEffect() {
effects.forEach(function(el){
if(window.scrollY>100) {
el.classList.add('show');
}
else {
el.classList.remove('show')
}
});
}
scrollEffect();
}
This question already has answers here:
Flip content of a div on clicking a button
(4 answers)
Closed 2 years ago.
I have created a pen here(https://codepen.io/rupamkairi/pen/ExjJRMo?editors=1100) on codepen. The card is made to rotate(specifically to Flip) when hovered on the element. I want it to be flip when I click on the element(.card).
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card:hover .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
I tried using :active pseudo-class but in that case I need to hold the card to keep it fliped.
Is there any way to use css animation with javascript?
I want to make multiple cards on a single page, and make them flip when clicked.
If you want the card to toggle the flip on every click try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;
card.addEventListener("click", () => {
if(!flipped) {
cardContent.style.transform = "rotateY(180deg)"
} else {
cardContent.style.transform = "rotateY(0deg)"
}
flipped = !flipped;
});
Or if you want the card to be flipped only once try this:
const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
card.addEventListener("click", () => {
cardContent.style.transform = "rotateY(180deg)";
});
As it's implemented through JavaScript remove .card:hover .card-content { transform: rotateY(180deg);} from stylesheet.
Initially add the id to the div tag where class = "card" like
HTML
<div class="card" id ="card1">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
Here you set the id as card1 and then you must you the following simple JS like
<script>
document.getElementById("card1").onclick = function(){
document.getElementById("card1").style.transform = rotateY(180deg);
}
</script>
This is a simple way by which you can achieve what you want.
just change .card:hover .card-content
to .card.flip .card-content
and add js code:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
demo:
const card = document.querySelector('.card')
card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Roboto", sans-serif;
background-color: #96cfe1;
}
.container {
padding: 10%;
}
.card {
margin: auto;
width: 5em;
height: 8em;
background-color: transparent;
perspective: 250px;
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px #00000080;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.card.flip .card-content {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
border-radius: 5px;
background-color: white;
transform: rotateY(180deg);
}
<div class="container">
<div class="card">
<div class="card-content">
<div class="card-front">
<h1>🎆</h1>
</div>
<div class="card-back">
<h1>🍕</h1>
</div>
</div>
</div>
</div>
I'm trying to create multiple flip cards with HTML and CSS, that flip using jQuery. The problem I'm running into is that currently I'm only able to flip the very first card.
Any advice to make the jQuery more global and able to click/flip each card would be greatly appreciated.
Here's the example I've been using: https://codepen.io/marcwilk/pen/JjdwKZR
HTML:
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
CSS:
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
JS:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
Thanks!
Firstly, your code is pure JavaScript, and not using jQuery.
Second, the problem is that you use document.querySelector('.card') which selects the first .card element.
Your solution is to use document.querySelectorAll('.card'); and loop through it to add the click event listener:
var cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
})
})
body {
font-family: sans-serif;
}
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?
You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<script type="text/javascript">
$(function () {
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
});
</script>
I try to use this code http://jsfiddle.net/andsens/Yns9P/ but my console say less is not defined, happening at the line of less.refreshStyles();. I also tried to include it at the body, still giving me the same error.
I had the same "Less is not defined" issue trying to get that exact code to work locally. I was also looking at the jsfiddle from this tutorial on radial progress bars with CSS.
After wrestling my way through the tutorial again to try and find what I missed I came across the authors GIT for the tutorial blog.
I don't know much about Less, I was just tinkering around.
Here is code that got things running in the end.
So it seems like I missed the tag:
<style type="text/less><style>
Here is the full code from the git page:
<!DOCTYPE html>
<html>
<head>
<style type="text/less">
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
.radial-progress {
#circle-size: 120px;
#circle-background: #d6dadc;
#circle-color: #97a71d;
#inset-size: 90px;
#inset-color: #fbfbfb;
#transition-length: 1s;
#shadow: 6px 6px 10px rgba(0,0,0,0.2);
#percentage-color: #97a71d;
#percentage-font-size: 22px;
#percentage-text-width: 57px;
margin: 50px;
width: #circle-size;
height: #circle-size;
background-color: #circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: #circle-size;
height: #circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: #shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform #transition-length;
transition: -ms-transform #transition-length;
transition: transform #transition-length;
border-radius: 50%;
}
.mask {
clip: rect(0px, #circle-size, #circle-size, #circle-size/2);
.fill {
clip: rect(0px, #circle-size/2, #circle-size, 0px);
background-color: #circle-color;
}
}
}
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: (#circle-size - #inset-size)/2;
margin-top: (#circle-size - #inset-size)/2;
background-color: #inset-color;
border-radius: 50%;
box-shadow: #shadow;
.percentage {
height: #percentage-font-size;
width: #percentage-text-width;
overflow: hidden;
position: absolute;
top: (#inset-size - #percentage-font-size) / 2;
left: (#inset-size - #percentage-text-width) / 2;
line-height: 1;
.numbers {
margin-top: -#percentage-font-size;
transition: width #transition-length;
span {
width: #percentage-text-width;
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: 800;
font-size: #percentage-font-size;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #percentage-color;
}
}
}
}
#i: 0;
#increment: 180deg / 100;
.loop (#i) when (#i <= 100) {
&[data-progress="#{i}"] {
.circle {
.mask.full, .fill {
-webkit-transform: rotate(#increment * #i);
-ms-transform: rotate(#increment * #i);
transform: rotate(#increment * #i);
}
.fill.fix {
-webkit-transform: rotate(#increment * #i * 2);
-ms-transform: rotate(#increment * #i * 2);
transform: rotate(#increment * #i * 2);
}
}
.inset .percentage .numbers {
width: #i * #percentage-text-width + #percentage-text-width;
}
}
.loop(#i + 1);
}
.loop(#i);
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
});
</script>
</head>
<body>
Animate percentage
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage">
<div class="numbers"><span>-</span><span>0%</span><span>1%</span><span>2%</span><span>3%</span><span>4%</span><span>5%</span><span>6%</span><span>7%</span><span>8%</span><span>9%</span><span>10%</span><span>11%</span><span>12%</span><span>13%</span><span>14%</span><span>15%</span><span>16%</span><span>17%</span><span>18%</span><span>19%</span><span>20%</span><span>21%</span><span>22%</span><span>23%</span><span>24%</span><span>25%</span><span>26%</span><span>27%</span><span>28%</span><span>29%</span><span>30%</span><span>31%</span><span>32%</span><span>33%</span><span>34%</span><span>35%</span><span>36%</span><span>37%</span><span>38%</span><span>39%</span><span>40%</span><span>41%</span><span>42%</span><span>43%</span><span>44%</span><span>45%</span><span>46%</span><span>47%</span><span>48%</span><span>49%</span><span>50%</span><span>51%</span><span>52%</span><span>53%</span><span>54%</span><span>55%</span><span>56%</span><span>57%</span><span>58%</span><span>59%</span><span>60%</span><span>61%</span><span>62%</span><span>63%</span><span>64%</span><span>65%</span><span>66%</span><span>67%</span><span>68%</span><span>69%</span><span>70%</span><span>71%</span><span>72%</span><span>73%</span><span>74%</span><span>75%</span><span>76%</span><span>77%</span><span>78%</span><span>79%</span><span>80%</span><span>81%</span><span>82%</span><span>83%</span><span>84%</span><span>85%</span><span>86%</span><span>87%</span><span>88%</span><span>89%</span><span>90%</span><span>91%</span><span>92%</span><span>93%</span><span>94%</span><span>95%</span><span>96%</span><span>97%</span><span>98%</span><span>99%</span><span>100%</span></div>
</div>
</div>
</div>
</body>
</html>
Hope this helps.