[Dilettante_Pro]

<style>
.sushi {
float: left;
margin: 10px;
height: 320px;
width: 218px;
border: 1px solid gray;
}
.sushi:hover {border: 1px solid orange;}
.info {
text-align: center;
background: linear-gradient(#f7f7f7, #e2e2e2);
width: 218px;
height: 140px;
position: relative;
border-top: 1px solid #e7e7e7;
}
.SushiImg {width: 218px;}
.name {font-size: 22px;}
.withwhat {font-size: 14px; color: gray;}
.num {font-size: 27px;}
.rubl {font-size: 18px;}
.select {
width: 45px;
height: 25px;
font-size: 18px;
margin-left: 5px;
border-radius: 5px;
border: none;
}
.telo {
background-color: gray;
width: 720px;
height: 2000px;
position: absolute;
top: 401px;
left: 320px;
border-radius: 2px;
}
</style>

<script>
var telo;

window.onload = function () {
telo = document.createElement('div');
telo.className = 'telo';
document.body.appendChild(telo);

function create(name, withwhat, num, src) {

var rubl = "<span class = rubl> руб.</span>";

name = "<span class = name>" + name + "</span><br/>";
withwhat = "<span class = withwhat>" + withwhat + ".</span><br/><br/><br/>";
num = "<span class = num>" + num + "</span>";
// src = "images/" + src + ".jpg";
select = " <select class = select>"
+"<option>0</option>"
+"<option>1</option>"
+"<option>2</option>"
+"<option>3</option>"
+"<option>4</option>"
+"<option>5</option>"
+"<option>6</option>"
+"<option>7</option>"
+"<option>8</option>"
+"<option>9</option>"
+"<option>10</option>"
+"</select>";

var SushiBlock = document.createElement('div');
SushiBlock.className = "sushi";
SushiBlock.onmouseover = function () {SushiBlock.style.border = "1px solid orange";SushiBlock.style.cursor = "pointer";}
SushiBlock.onmouseout = function () {SushiBlock.style.border = "1px solid gray";}
telo.appendChild(SushiBlock);

var image = document.createElement('img');
image.src = src;
image.className = "SushiImg";
SushiBlock.appendChild(image);

var SushiPodBlock = document.createElement('div');
SushiPodBlock.className = 'info';
SushiPodBlock.innerHTML = name + withwhat + num + rubl + select;
SushiBlock.appendChild(SushiPodBlock);
}
//create(name, withwhat, num, src) { ... }
create("Сякэ", "С лососем","75", "https://javascript.ru/cat/list/appscript.png");
create("Эби", "С креветкой", "85", "https://javascript.ru/cat/list/project.jpg");
create("Сякэ Кунсэй", "С копчёным лососем", "85", "https://javascript.ru/cat/list/dom.gif");
create("Магуро", "С тунцом", "90", "https://javascript.ru/cat/list/js.gif");
create("Сякэ Кунсей", "С копчёным лососем", "85", "https://javascript.ru/cat/list/event.gif");
create("Магуро", "С тунцом", "90", "https://javascript.ru/cat/list/donkey.gif");
create("Унаги", "С угрём", "95", "https://javascript.ru/cat/list/mobile.jpg");
};
</script>