Вот что у меня получается
Сильно не ругайтесь, я только пару дней назад начал изучать html/css.Будущий рекуператор. (над дизайном ещё нужно поработать:))
Тест с рандомными значениями в полях температуры.
Код: Выделить всё
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recuperator_v0.3</title>
<link rel="stylesheet" href="style_03.css">
</head>
<body>
<div class="container">
<div class="item item_1 text-01">дом</div>
<div class="item item_2 text-01">≈ ♺ ≈</div>
<div class="item item_3 text-01">улица</div>
<div class="item item_4 text-02">из дома</div>
<div class="item item_5"></div>
<div class="item item_6">кпд <br>рекуператора %
<div class="KPD">75,4</div>
</div>
<div class="item item_7"></div>
<div class="item item_8 text-02">с улицы</div>
<div class="item item_9 temperatura">+23,9 °</div>
<div class="item item_10 temperatura">-8,4 °</div>
<div class="item item_11 text-02">в дом</div>
<div class="item item_12"></div>
<div class="item item_13"></div>
<div class="item item_14 text-02">на улицу</div>
<div class="item item_15 temperatura">+15,6 °</div>
<div class="item item_16 temperatura">+12,3 °</div>
</div>
</body>
</html>
Код: Выделить всё
body {
font-family: sans-serif;
text-transform: uppercase;
background-color: rgb(20, 20, 20);
color: rgb(202, 202, 202);
}
/* -------------СЕТКА------------- */
.item {
/* padding: 10px; */
/* border: dashed 1px rgb(255, 255, 255); */
background-color: black;
}
.container {
margin-top: 30px ;
display: grid;
grid-template-columns: 2fr 15px 1fr 15px 2fr;
/* grid-template-rows: 1fr 1fr; */
}
/* -------------тексты------------- */
.text-01 { /*текст шапки*/
padding: 10px 5px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.text-02 { /*текст блоков*/
padding: 2px 0 0 0;
font-size: 8px;
text-align: center;
}
.temperatura { /*текст температыры*/
font-size: 24px;
font-weight: bold;
text-align: center;
/* margin: -7px 0px; */
}
.KPD{
padding: 20px 5px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
/* ---------------------------------------------------- */
/* -------------Шапка------------- */
.item_1 { /*первая*/
grid-column: 1/3;
border-radius: 15px 0 0 0;
border-top: solid 1px white;
}
.item_2 { /*вторая*/
border-top: solid 1px white;
margin: 0 2px 0 2px;
}
.item_3 { /*третья*/
grid-column: 4/6;
border-radius: 0px 15px 0 0;
border-top: solid 1px white;
}
/* ---------------------------------------------------- */
/* ----------кпд рекуператора------------ */
.item_6 {
grid-column: 3;
grid-row: 2/6;
padding: 15px 2px;
font-size: 8px;
/* font-weight: bold; */
text-align: center;
background-color: rgb(3, 19, 0);
margin: 2px 2px 0px 2px;
border: solid 1px rgba(255, 255, 255, 0.308);
border-radius: 5px;
}
/* ---------------------------------------------------- */
/* ----------цветовые индикаторы------------ */
.item_5 {
grid-column: 2;
grid-row: 2/4;
background-color: red;
margin: 2px 0px 0 0px;
border-right: solid 5px rgba(0, 0, 0, 0.5);
border-radius: 0px 10px 10px 0px;
}
.item_12 {
grid-column: 2;
grid-row: 4/6;
background-color: orangered;
margin: 2px 0px 0 0px;
border-right: solid 5px rgba(0, 0, 0, 0.5);
border-radius: 0px 10px 10px 0px;
}
.item_13 {
grid-column: 4;
grid-row: 4/6;
background-color: rgb(255, 0, 255);
margin: 2px 0px 0 0px;
border-left: solid 5px rgba(0, 0, 0, 0.5);
border-radius: 10px 0px 0px 10px;
}
.item_7 {
grid-column: 4;
grid-row: 2/4;
background-color: blue;
margin: 2px 0px 0 0px;
border-left: solid 5px rgba(0, 0, 0, 0.5);
border-radius: 10px 0px 0px 10px;
}
/* ---------------------------------------------------- */
/* ------------------------------Блоки температуры---------------------------- */
/* ----------верхний левый------------ */
.item_4 {/* текстовый */
margin: 2px 0px 0 0px;
}
.item_9 {/* датчик */
}
/* ----------верхний правый------------ */
.item_8 {/* текстовый */
margin: 2px 0px 0 0px;
}
.item_10 {/* датчик */
}
/* ----------нижний левый------------ */
.item_11 {/* текстовый */
margin: 2px 0px 0 0px;
}
.item_15 {/* датчик */
border-radius: 0 0 0 15px;
}
/* ----------нижний правый------------ */
.item_14 {/* текстовый */
margin: 2px 0px 0 0px;
}
.item_16 {/* датчик */
border-radius: 0 0 15px 0;
}
/* ---------------------------------------------------- */
