Задание:
Есть макет:
Необходимо сверстать
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная верстка на основе медиа-запросов</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="layout">
<div class="textcontentwrapper">
<div class="textcontent">
<span class="titletext">
Теплообменники Secespol
</span>
<span class="simpletext">
<br><br>
Польская компания Secespol более 30 лет производит теплообменники, которые работают в разных инженерных системах по всему миру.<br><br>
Конструкция теплообменников серии <nobr>B-Line</nobr> обеспечивает максимальный теплообмен. Главная особенность в рифленой поверхности трубок. Такая поверхность создает турбулентное течение, которое интенсифицирует теплообмен и уменьшает образование отложений.<br><br>
<table class="te">
<tr>
<td>Тип</td>
<td>Номинальная мощность, кВт</td>
<td>Разница температур между греющей и подогреваемой водой, °С</td>
<td>Скорость потока бассейновой воды/источника тепла, м³/ч</td>
<td>Потери давления бассейновой воды/источника тепла, кРа</td>
<td>Цена, руб</td>
</tr>
<tr>
<td>Тип</td><td>W, кВт</td><td>Δt, °С</td><td>V, <nobr>м³/ч</nobr></td><td>L, кРа</td><td>Цена, руб</td>
</tr>
<tr>
<td>B70</td><td>34</td><td>60</td><td>12/3</td><td>12/3</td><td>32130</td>
</tr>
<tr>
<td>B130</td><td>42</td><td>60</td><td>12/3</td><td>15/4</td><td>33390</td>
</tr>
<tr>
<td>B180</td><td>56</td><td>60</td><td>12/4</td><td>7/2</td><td>49140</td>
</tr>
<tr>
<td>B250</td><td>64</td><td>60</td><td>12/4</td><td>10/3</td><td>51030</td>
</tr>
<tr>
<td>B300</td><td>97</td><td>60</td><td>12/4</td><td>12/4</td><td>55440</td>
</tr>
<tr>
<td>B500</td><td>148</td><td>60</td><td>12/4</td><td>19/5</td><td>81900</td>
</tr>
<tr>
<td>B1000</td><td>215</td><td>60</td><td>15/4</td><td>7/2</td><td>136080</td>
</tr>
</table>
<div class="remarks">
<nobr><span class="boldtext">W</span> – номинальная</nobr> мощность, <nobr><span class="boldtext">Δt</span> – разница</nobr> температур между греющей и подогреваемой водой, <nobr><span class="boldtext">V</span> – скорость</nobr> потока бассейновой <nobr>воды/источника</nobr> тепла, <nobr><span class="boldtext">L</span> – потери</nobr> давления бассейновой <nobr>воды/источника</nobr> тепла.<br>
</div>
</span>
</div>
</div>
</div>
</body>
</html>
@font-face { font-family: "PtSerifBook"; src: url("PtSerifBook.eot"); src: url("PtSerifBook.eot?#iefix") format("embedded-opentype"), url("PtSerifBook.woff") format("woff"), url("PtSerifBook.svg") format("svg"); }
@font-face { font-family: "PtSansBook"; src: url("PtSansBook.eot"); src: url("PtSansBook.eot?#iefix") format("embedded-opentype"), url("PtSansBook.woff") format("woff"), url("PtSansBook.svg") format("svg"); }
@font-face { font-family: "PtSansBold"; src: url("PtSansBold.eot"); src: url("PtSansBold.eot?#iefix") format("embedded-opentype"), url("PtSansBold.woff") format("woff"), url("PtSansBold.svg") format("svg"); }
html { margin: 0; padding: 0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
body { margin: 0; padding: 0; color: #000000; background-color: #ffffff; font-family: Arial, Tahoma; font-size: 16px; line-height: 20px; }
div { float: left; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
img { display: block; float: left; width: 100%; margin: 0; padding: 0; border: 0; }
a { text-decoration: none; color: #41a0d2; border-bottom: 1px solid #acd7ed; }
a:hover { color: #41a0d2; border-bottom: 1px solid #acd7ed; }
#layout { float: left; width: 100%; }
div.textcontent { padding: 34px 30px 38px 30px; float: none; width: 100%; margin: auto auto; }
span.titletext { font-family: PtSansBold, Arial; font-size: 28px; line-height: 31px; color: #606060; }
span.simpletext { font-family: PtSansBook, Arial; font-size: 15px; line-height: 21px; color: #606060; }
.te { width: 100%; text-align: center; border: 0; border-collapse: collapse; margin: 10px 0px 10px 0px; padding: 0; outline: none; }
.te td { padding: 14px 10px 14px 10px; border-bottom: 1px solid #d0d0d0; }
.te tr td:first-child { font-family: PtSansBold, Arial; padding: 14px 20px 14px 20px; border-bottom: 1px solid #d0d0d0; }
.te tr:first-child td { display: none; padding: 14px 10px 14px 10px; font-family: PtSansBold, Arial; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; background-color: #f5f5f5; }
.te tr:nth-of-type(2) td { display: table-cell; padding: 14px 10px 14px 10px; font-family: PtSansBold, Arial; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; background-color: #f5f5f5; }
div.remarks { display: block; margin: 0; }
@media screen and (min-width: 800px)
{
div.textcontent { padding: 32px 30px 46px 30px; max-width: 800px; margin: auto auto; }
span.titletext { 36px; line-height: 39px; }
span.simpletext { font-size: 16px; line-height: 22px; }
.te td { padding: 14px 20px 14px 20px; }
.te tr:first-child td { display: table-cell; padding: 14px 20px 14px 20px; }
.te tr:nth-of-type(2) td { display: none; padding: 14px 20px 14px 20px; }
div.remarks { display: none; margin: 0; }
}
span.boldtext { font-family: PtSansBold, Arial; }