JSFiddle - React, Tailwind, and code Playground
by jt3k
HTML
<div id="container">
<div id="header">C-Com sattelite systems ink.</div>
<div id="topmenu"><a href="#0">На главную</a><a href="#1">C-Com в России</a><a href="#2">Оборудование</a><a href="#6">Как работает</a><a href="#7">Услуги</a><a href="#5">Контакты</a><a href="#8">Проекты</a></div>
<div id="sidebar"><a href="#">Последние новинки рынка</a><br><br><br><br><br><br><br><br><br><br>
<a href="#">ШПД в России</a>
</div>
<div id="content">
<p>
C-COM Satelite Systems - лидер в разработке и производстве полностью автоматических, само-позиционирующихся и само-наводящихся аннетнных постов для земных станций спутниковой связи типа VSAT. C-Com's является дочерней компанией iNetVu system. Её продукция полностью совместима со многими антенными системами доступа к спутниковым каналам связи и доступа в Internet таких производителей как: Comtech, Advantech, HughesNet, iDirect, Nera, Newtec, Technisat, Tachyon, Viasat, Gilat и Gilat-based systems, типа Skyedge и Starband.
</p>
<h2>iNetVu Мобильные Системы</h2>
<p>Самопозиционирующиеся антенные системы iNetVu способны находить любые спутники работающие на околоземной орбите Земли, быстро позиционироваться и предоставлять доступ к услугам связи и Internet в считанные минуты. Системы iNetVu обеспечивают высокоскоростной Доступ в Internet и ориентированы на широкий круг задач и потребителей, включая Полицию, Пожарные службы, МЧС, Медицинские системы удаленного консультирования, Теле-Радио Компании, добывающие и перерабатывающие отрасли промышленности, Геологоразведка...
Всем тем, кому приходится часто перемещаться и при этом всегда иметь высокоскоростной канал связи.</p>
</div>
<div id="footer">© Altegrosky Контакты Справка Помощь Вакансии Специальные-предложения</div>
</div>
CSS
/*******************************************************************************/
body {
margin:0;
padding: 0;
font: 10pt Arial, Helvetica, sans-serif; /* ????? ?? ???-???????? */
background: #e1dfb9; /* ???? ???? */
color: black;
}
h2 {
font-size: 1.1em; /* ?????? ?????? */
color: #800040; /* ???? ?????? */
margin-top: 0; /* ?????? ?????? */
}
#container {
padding: 0 15px 15px 15px;
width: 840px; /* ?????? ???? */
margin: 0 auto 27px; /* ???????????? ?? ?????? */
background: #A5B7CB; /* ???? ???? ????? ??????? */
border: 9px solid white;
border-top: 0 solid white;
-webkit-box-shadow: 0px 0px 2px -1px #000000;
-moz-box-shadow: 0px 0px 2px -1px #000000;
box-shadow: 0px 0px 2px -1px #000000;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 16px;
-moz-border-radius-bottomleft: 16px;
-webkit-border-radius: 0px 0px 16px 16px;
border-radius: 0px 0px 16px 16px;
}
#header {
font-size: 2.2em; /* ?????? ?????? */
text-align: left; /* ???????????? ?? ?????? */
padding: 30px; /* ??????? ?????? ?????? */
margin: 0 -15px;
background: #C1CFDC; /* ???? ???? ????? */
color: black; /* ???? ?????? */
border-bottom: 6px solid #cf062a;
}
#topmenu {
display:block;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
margin: 0 0 3px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
background-color:#3d94f6;
padding: 0 14px;
}
/*?????? ????????...