JSFiddle - React, Tailwind, and code Playground
HTML
<doctype html>
<html>
<head>
<meta charset="urf-8"/>
<link rel="stylesheet" type="text/css" href="styl.css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="money">
</div>
<div id="bumial">
</div>
<div id="news">
<p id="new1">Последнее на сайте:</p>
<p><u><b>01.01.2021</b></u> На дне Бермудского Треугольника нашли древний город! Быть может это и есть затонувшая Атлантида?!</p>
<p><a href="#">Смтореть все новости</a></p>
<hr>
</div>
</div>
<div id="sitebar">
<div id="razdel">
<img src="site/images/razdel.jpg">
</div>
<ul id="menu">
<li><a href="#"><span>Главная<span/></a></li>
<li><a href="#"><span>Выпуски монет<span/></a></li>
<li><a href="#"><span>Полный список монет<span/></a></li>
<li><a href="#"><span>Цены на монеты<span/></a></li>
<li><a href="#"><span>Альбомы для монет<span/></a></li>
<li><a href="#"><span>Новости сайта<span/></a></li>
<li><a href="#"><span>Ответы на вопросы<span/></a></li>
<li><a href="#"><span>Моя коллекция<span/></a></li>
<li><a href="#"><span>Обратная связь<span/></a></li>
</ul>
</div>
<div id="content">
<div id="kotele">
<p class="glav">Слева (или снизу) в МЕНЮ вы можете выбрать, тот год в который выпущена интересующая монета.</p>
<p><h4><u>Место чеканки:</u></h4>
...
CSS
#container {margin: auto; width: 1028px; background: cbb897;}
.glav:first-letter {font-size: 27px; font-weight: bold;}
.glav {font-size: 17px; margin: -30px 0 0 0;}
html, body {background: cbb897;}
h6 {font-size: 10px;} h5 {font-size: 15px;} h3 {font-size: 20px;} h2 {font-size: 24px;} h1 {font-size: 26px;}
/*НАЧАЛО контейнера HEADER*/
#money {
float: left;
background: url('site/images/money.jpg');
width: 271px;
height: 201px;
}
#bumial {
float: left;
background: url('site/images/bumial.jpg');
width: 519px;
height: 194px;
}
#news {
float: left;
width: 234px;
height: 201px;
font-size: 14px;
text-align: center;
}
#news p#new1 {
font-family: monotype corsiva;
font-size: 22px;
border-style: inset;
border-color: 62541e;
border-width: 2px;
}
/*КОНЕЦ контейнера HEADER*/
/*НАЧАЛО контейнера SITEBAR (СЛЕВО)*/
#menu {
background: url('site/images/menu1.jpg') no-repeat;
width: 271px;
height: 378px;
list-style: none;
padding: 4px 25px 5px 25px;
margin: -1px 0 0 0;
}
ul#menu li a {
background: url('site/images/menu.jpg');
color: black;
width: 200px;
height: 40px;
display: block;
}
ul#menu li a:hover {
background: url('site/images/mymenu.jpg');
width: 200px;
height: 40px;
display: block;
color: 2c281b;
}
ul#menu li a span {
font-family: sans-serif;
font-size: 16px;
padding: 12px 0 0 15px;
display: block;
}
ul#menu li a span:first-letter {
font-size: 20px;
}
/*КОНЕЦ конетйнера SITEBAR*/
/*НАЧАЛО контейнера CONTENT(ОСНОВНОЕ)*/
.footer {padding: 5px 0 0 0;} .footer1 {margin: 80px 0 0 0;}
/*ДОП. ДЛЯ kotele*/
#kotele p:first-letter {
font-family: monotype corsiva;
font-size: 21px;
margin: 0 0 0 20px;
}
#kotele {
font-size: 14px;
position: absolute;
margin: 55px 0 0 290px;
max-width: 462px;
}
#kotele li {
margin: 20px;
}
...