
previous

page 1
next
In this tutorial we will tackle creating one of my favourite Brain Games, Card Match.
Type these lines into Atom and save them as index.html in a new folder, project_4:
index.html
<html>
<head>
<title>Card Match</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<div id='row1'>
<img src='cards/1.png' id='0' class='card'>
<img src='cards/2.png' id='1' class='card'>
<img src='cards/3.png' id='2' class='card'>
<img src='cards/4.png' id='3' class='card'>
<img src='cards/5.png' id='4' class='card'>
<img src='cards/back.png' class='card'>
</div>
</body>
</html>
<head>
<title>Card Match</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<div id='row1'>
<img src='cards/1.png' id='0' class='card'>
<img src='cards/2.png' id='1' class='card'>
<img src='cards/3.png' id='2' class='card'>
<img src='cards/4.png' id='3' class='card'>
<img src='cards/5.png' id='4' class='card'>
<img src='cards/back.png' class='card'>
</div>
</body>
</html>
And this one too ...
styles.css
#row1 {
display:flex;
width:98vmin;
justify-content:space-around;
}
.card {
height:20vmin;
}
display:flex;
width:98vmin;
justify-content:space-around;
}
.card {
height:20vmin;
}
previous
next