RaidGroup

Example for Habrahabr

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<div>
  <span class="name">Sergey</span>, <span class="country">Russia</span><div id="flag"></div>
  </div>

<div id="mainzone">

</div>


</body>

CSS

#flag {
  display: infine-block;
  height: 15px;
  width: 20px;
 
  background-size: 20px 15px;
}

#playerCard
{
    width:400px;
    display: table;
    border: 2px double black;
}
#playerPhoto
{
    width: 200px;
    height:300px;
    display: table-cell;
    background-position: top center;
    background-size: cover;
}
#playerInfo
{
    width: 200px;
    display: table-cell;
}

JavaScript

var userNames = ['Сергей', 'Алексей', 'Анна', 'Николай', 'Даниил', 'Вячеслав', 'Джордж', 'Наталья', 'Татьяна', 'Анастасия', 'Евгений', 'Евгения', 'Марина', 'Мария'];
var userCountry = ['Россия', 'Украина', 'Беларусь', 'Казахстан', 'Великобритания'];
var playerLevels = [];
var userFlag = ['http://uploads.webflow.com/565cb911c193e4557db200d9/565da100af373f6c6d3ff95e_lang-03.jpg'
    ,'http://www.ua.all.biz/img/ua/catalog/767310.jpeg'
    ,'http://www.belarus.by/relimages/000211_72754.jpg'
    ,'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Flag_of_Kazakhstan.svg/500px-Flag_of_Kazakhstan.svg.png'
    ,'http://uploads.webflow.com/565cb911c193e4557db200d9/565da11183428e142745e8e4_lang-05.jpg'];

    var namerand = Math.floor(Math.random() * userNames.length),
				countryrand = Math.floor(Math.random() * (userCountry.length));
    console.log(namerand);

		$("span.country").text(userCountry[countryrand]);
		$("span.name").text(userNames[namerand]);
		document.getElementById("flag").style.backgroundImage = "url("+userFlag[countryrand]+")";