18/18 100% Вот как-то так. Будут ли какие-нибудь замечания?

Курсы §14. Мастерская: декоративные элементы
1 
    <!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: анонс поста</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="post">
      <div class="post-title">Интенсив: программа</div>
      <div class="post-date">13.09</div>
      <div class="post-type"></div>
      <div class="post-author">
        Автор: <a href="#">HTML Academy</a>
      </div>
      <div class="post-stats">
        <div class="icon icon-tags"></div>
        <a href="#">интенсив</a>,
        <a href="#">программа</a>
      </div>
      <div class="post-stats">
        <div class="icon icon-comments"></div>
        <a href="#">5</a>
      </div>
      <div class="post-text">Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили ещё кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.</div>
    </div>
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 280px;
  min-height: 250px;
  padding-top: 50px;
  padding-right: 10px;
  padding-left: 10px;

  font-size: 12px;
  line-height: 1.2;
  font-family: "Arial", sans-serif;
  color: #7f8c8d;

  background-color: #ecf0f1;
}

.post {
  position: relative;
  padding-left: 75px;
}

.post-title {
  font-size: 20px;
  color: #2980b9;
}

.post-date, 
.post-type {
  width: 55px;
  height: 55px;
  border-bottom: 5px solid #bdc3c7;
}

.post-date {
  position: absolute;
  top: 0px; 
  left: 0px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  line-height: 55px;
  background-color: #ffffff;
}

.post-type {
  position: absolute;
  top: 70px;
  left: 0;
  background: url("quotes.png") no-repeat 50% 50% #7f8c8d;
}

.post-author {
  margin-top: 5px;
}

.post-author a,
.post-stats a {
  text-decoration: none;
  color: #2980b9;
}

.post-stats {
  position: relative;
  display: inline-block;
  margin-top: 5px;
  padding-left: 20px;
  padding-right: 10px;
}

.post-stats .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  background: url("post-challenge.png") no-repeat;
}

.post-stats .icon-tags {
  background-position: 0 0;
}

.post-stats .icon-comments {
  background-position: -20px 0; 
}

.post-text {
  background-color: #ffffff; 
  width: 165px;
  padding: 10px 15px;
  border-bottom: 5px solid #bdc3c7;
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адреса картинок:
quotes.png
post-challenge.png
Картинка «кавычки» выровнена по центру
*/
2 лайка
2

А разве цвет не в самом начале идет? Или тут вообще это можно не соблюдать?

3

цвет чего? текста, фона? но вообще, можно не соблюдать, да :blush:

4

Ой, я уже не помню, а так не знал, что можно не соблюдать. Спасибо за информацию :slight_smile:

5

Спсибо, смог улучшить свой код. В вашем варианте еще можно прописать position: absolute в общем селекторе .post-date, .post-type чтобы сократить количество свойств.

6

безумное решение на 98,5%

image
image1920×1080 359 KB

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-right: 10px;
padding-left: 10px;

font-size: 12px;
line-height: 1.2;
font-family: “Arial”, sans-serif;
color: #7f8c8d;

background-color: #ecf0f1;
}

.post-stats .icon {
width: 15px;
height: 15px;
}
.post-title, a {
color: #2980b9;
display: inline-block;
text-decoration: none
}

.post {
display: grid;
grid-template-columns: 75px auto
}
.post-date {
padding-top: 19px;
width: 55px;
height: 60px;
border-bottom: 5px solid #bdc3c7;
grid-column: 1/2;
grid-row: 1;
background: white;
box-sizing: border-box;
font-weight: bold;
text-align: center;
font-size: 15px;
margin-bottom: 10px
}

.post > .post-type {
display: inline-block;
width: 55px;
height: 60px;
border-bottom: 5px solid #bdc3c7;
grid-column: 1/2;
background: #7f8c8d url(quotes.png) no-repeat center;
box-sizing: border-box
}

.post-title {
font-size: 20px;
grid-row:1;
grid-column: 2/3;
}

.post-author {
margin-top: -41px;
grid-column: 2;
grid-row: 2
}

.post-stats {
position: relative;
display: inline-block;
grid-column: 2;
grid-row: 2;
margin-top: -26px;

      }
  
     .post-stats a:nth-of-type(2) {
   margin-right: 10px 
  }

.post-stats > .icon-tags:before {
content: ‘’;
display: inline-block;
height: 15px;
width: 15px;
background: url(post-challenge.png) no-repeat 0 0;
margin-right: 5px;
margin-bottom: -4px
}

  .post-stats > .icon-stats:before {
 content: '';
  display: inline-block;
  height: 15px;
  width: 15px;
  background: url(post-challenge.png) no-repeat -20px 0;  
  margin-right: 5px;
  }
  
  
        
  
  
 .post-text {

grid-row: 2;
grid-column: 2;
background: #ffffff;
padding: 10px 15px;
border-bottom: 5px solid #bdc3c7;
margin-top: -8px;
box-sizing: border-box;
width: 95%
}

/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адреса картинок:
quotes.png
post-challenge.png
Картинка «кавычки» выровнена по центру
*/