<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>You only choose a character </h1>
<div class='Select_Character'>
<!--Nhan vat 1-->
<input class='characterInput' id='hero' type='radio' >
<label for='hero' class='character_label'>
<img src='https://i.pinimg.com/originals/04/4e/90/044e903f38b7cae3c3df4546a447afef.gif'>
<div>Hero</div>
</label>
<!--Nhan vat 2-->
<input class='characterInput' id='Witch' type='radio' >
<label for="Witch" class='character_label'>
<img src='https://i.pinimg.com/originals/04/4e/90/044e903f38b7cae3c3df4546a447afef.gif'>
<div>Hero</div>
</label>
<!--Nhan vat 3-->
<input class='characterInput' id='Ghost' type='radio' >
<label for='Ghost' class='character_label'>
<img src='https://i.pinimg.com/originals/04/4e/90/044e903f38b7cae3c3df4546a447afef.gif'>
<div>Hero</div>
</label>
</div> <!--close select_Character-->
<script src="script.js"></script>
</body>
</html>
.character_label img{
border: 2px solid black;
width: 120px;
height:auto;
}
.character_label {
cursor:pointer; /*chuyển dạng chuột sang bàn tay*/
display:flex;
flex-direction: column;
border: 3px solid red;
padding:10px;
align-items:center;
border-radius:20px;
}
.characterInput {
display: none; /*ẩn nút chọn input*/
}
.Select_Character {
display:flex;
border:2px solid orange;
gap:40px;
margin: 30px 90px;
}
/*Tạo hiệu ứng hover*/
.character_label:hover {
transform: scale(1.3);
border: 3px solid #00bfff;
}