<div class="black">

	<img class="icon" src="https://tiwar.ru/images/icon/str.png" alt="icon"> 500000

	<img class="icon" src="https://tiwar.ru/images/icon/def.png" alt="icon"> 500000

	<img class="icon" src="https://tiwar.ru/images/icon/hp.png" alt="icon"> 500000

</div>



<div class="dl"></div>



<ul class="menu_list">

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Location </a></li>

</ul>



<div class="dl"></div>



<ul class="menu_list">

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Главная </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Герой </a></li>

	<li class="menu_list_item"><a class="menu_list_item_link" href="#"><img class="icon" src="https://tiwar.ru/images/icon/arrow.png" alt="icon"> Гильдия </a></li>

</ul>



<div class="dl"></div>



<div class="black">

	<img class="icon" src="https://tiwar.ru/images/icon/gold.png" alt="icon"> 500000

	<img class="icon" src="https://tiwar.ru/images/icon/silver.png" alt="icon"> 500000

	<img class="icon" src="https://tiwar.ru/images/icon/exp.png" alt="icon"> 500000

</div>

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');



:root {

	--font-size: 14px;

	--font-family: 'Rubik';

}



body {

	margin: 0 auto;

	background-color: #333333;

	font-size: var(--font-size);

	font-family: var(--font-family);

	max-width: 500px;

}



.menu_list {

	list-style-type: none;

	margin: 0;

	padding: 0;

	background-image: url('https://tiwar.ru/images/icon/bg.png');

}



.menu_list_item {

	border-bottom-width: 1px;

	border-bottom-style: dashed;

	border-bottom-color: #444444;

}



.menu_list_item:last-child {

	border-bottom: none;

}



.menu_list_item_link {

	display: flex;

	text-decoration: none;

	padding: 5px;

	align-items: center;

	gap: 5px;

	color: #ECBC7D;

}



.black {

	display: flex;

	background-color: #000000;

	padding: 5px;

	gap: 5px;

	justify-content: center;

	align-items: center;

	color: #FFFFFF;

}



.dl {

	background-image: url('https://tiwar.ru/images/icon/line.png');

	background-repeat: repeat-x;

	height: 4px;

}



.icon {

	width: var(--font-size);

	height: var(--font-size);

}