create a HTML file and lets not choose canvas and do this with div tags. Select
ID: 3771528 • Letter: C
Question
create a HTML file and lets not choose canvas and do this with div tags. Select your 5 unique images.
Decide the pairs that will be same (eg: 1&5,2&8,4&10,etc have the same image)
Since there are 10 images, in the html body create 10 div tags with ids from 1 to 10. Set the class attibute of these divs 1&5 as card1, 2&8 as card2 and so on.
Write 5 css classes (card1-5) and set the 5 images as the background-image properties in each class( like background-image:url("images/image1.jpg")).
Have an aditional class "hidden" whose style is to set a default background image (Your cards deck image).
Now append the "hidden" to the class attibutes of all the divs. This makes the browser show the default images when we started as if the cards were closed.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.card1{
background-image:url("images/image1.jpg");
}
.card2{
background-image:url("images/image2.jpg");
}
.card3{
background-image:url("images/image3.jpg");
}
.card4{
background-image:url("images/image4.jpg");
}
.card5{
background-image:url("images/image5.jpg");
}
.hidden{
background-image: url("images/deck.jpg");
}
</style>
</head>
<body>
<div class="hidden">
<div class="card1" id="1"></div>
<div class="card2" id="2"></div>
<div class="card3" id="3"></div>
<div class="card4" id="4"></div>
<div class="card5" id="5"></div>
<div class="card1" id="6"></div>
<div class="card2" id="7"></div>
<div class="card3" id="8"></div>
<div class="card4" id="9"></div>
<div class="card5" id="10"></div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.