<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose your 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/11/dc/c8/11dcc876dfe08b0de07e15db80c397bb.gif'>
<div>Witch</div>
</label>
<!--Nhan vat 3-->
<input class='characterInput' id='Ninja' type='radio' >
<label for='Ninja' class='character_label'>
<img src='https://cdn.dribbble.com/userupload/41758795/file/original-bfcbeb64ca8383a21d1b9cd1faa47b45.gif'>
<div>Ninja</div>
</label>
</div> <!--close select character-->
<!--Chọn trang bị nhân vật -->
<h1>Chosse a weapon</h1>
<div class='Select_Weapon'>
<!--Vu khi 1-->
<input class='WeaponInput' id='Shuriken' type='radio'>
<label for='Shuriken' class='Weapon_Label'>
<img src='https://fbi.cults3d.com/uploaders/30928963/illustration-file/e91e4268-1786-4525-979d-e3d8794b99ba/%D1%81%D1%8E%D1%80%D0%B8%D0%BA%D0%B5%D0%BD0001-0100.gif'>
<div>Shuriken</div>
</label>
<!--Vu khi 2-->
<input class='WeaponInput' id='Broom Witch' type='radio'>
<label for='Broom Witch' class='Weapon_Label'>
<img src='https://media3.giphy.com/media/v1.Y2lkPTZjMDliOTUyMGZmcnliNDVpcG4xN2tjNzNsaXF2MDNtNnpxejJ4c3V5dTBicjJxOSZlcD12MV9naWZzX3NlYXJjaCZjdD1n/Qw2S5kNWGCS6G0rzdh/200w.gif'>
<div>Broom Witch</div>
</label>
<!--Vu khi 3-->
<input class='WeaponInput' id='Gloves' type='radio'>
<label for='Gloves' class='Weapon_Label'>
<img src='https://cdn.dribbble.com/userupload/22668896/file/original-af5a2fb72a930cb62ac5846a6e43e3df.gif'>
<div>Gloves</div>
</label>
</div>
<script src="script.js"></script>
</body>
</html>
.character_label img{
border:2px solid black;
width:100px;
height:auto;
}
.character_label{
cursor:pointer;
display:flex;
flex-direction: column;
border: 3px solid red;
padding:10px;
align-items:center;
border-radius:20px;
}
.characterInput{
display:none; /*hiden*/
}
.Select_Character{
display:flex;
border: 2px solid black;
gap:30px;
margin:30px 133px;
}
.character_label:hover {
transform:scale(1.3);
border:3px solid #1f93ff;
}
.Weapon_Label img{
border:2px solid black;
width:50px;
height:auto;
}
.Weapon_Label{
cursor:pointer;
display:flex;
flex-direction: column;
border: 3px solid red;
padding:10px;
align-items:center;
border-radius:20px;
}
.WeaponInput{
display:none; /*hiden*/
}
.Select_Weapon{
display:flex;
border: 2px solid black;
gap:30px;
margin:30px 133px;
}
.Weapon_Label:hover {
transform:scale(1.3);
border:3px solid #1f93ff;
}