<style type="text/css">
    html, body {
        font-family: sans-serif;
    }
    /* Раскладка */
    .services {
        margin: 50px 0;
        list-style-type: none;
        padding: 0;
        display: flex;
    }
    .services__item {
        width: 20%;
        margin: 0 2.5%;
    }
    /* Оформление самого блока */
    .block {
        display: flex;
        background: #eee;
        /* Этот внутренний отступ даёт внешнюю рамку цвета фона блока */
        padding: 4px;
        /* Потребуется, что относительно блока спозиционировать псевдоэлемент after */
        position: relative;
    }
    /* Верхняя цветная полоска. Проще всего и правильнее сделать пседвоэлементом
       без каких-либо рамок, просто задать фон. */
    .block::after {
        content: '';
        display: block;
        position: absolute;
        height: 4px;
        /* Смещаем чуть больше, чем высота полоски, если требуется разделитель */
        top: -6px;
        /* Задаём произвольную ширину */
        width: 90%;
        /* Центрируем */
        left: 50%;
        transform: translateX(-50%);
        /* Цвет верхней полоски по умолчанию */
        background: #eee;
    }
    .block--red::after {
        background: red;
    }
    .block--yellow::after {
        background: yellow;
    }
    .block__inner {
        width: 100%;
        border: 4px solid #fff;
        padding: 20px;
    }
    .block__header {
        border: 4px solid #fff;
        padding: 10px;
    }
    .block__title {
        display: inline;
        /* Самый простой вариант сделать бордер dotted, но выглядит это немного иначе чем в макете —
           получаются кружки, а не квадратики. Поэтому возможно стоит использовать background-image*/
        border-bottom: 4px dotted #000;
    }
    .block__content {
        padding: 10px 0;
        margin: 0;
    }
    .block__more {
        text-align: right;
    }
    .block__more a {
        display: inline-block;
        padding: 0 5px;
        color: #000;
        text-decoration: none;
        border-bottom: 2px dotted #000;
    }
    .block__more a:hover {
        color: #000;
        text-decoration: none;
    }
</style>

<ul class="services">
    <li class="services__item block block--red">
        <div class="block__inner">
            <div class="block__header">
                <h3 class="block__title">Убрать жир</h3>
            </div>
            <p class="block__content">Текст</p>
            <div class="block__more">
                <a href="#" rel="nofollow">весь текст</a>
            </div>
        </div>
    </li>
    <li class="services__item block block--yellow">
        <div class="block__inner">
            <h3 class="block__title"></h3>
            <p class="block__content">Текст</p>
            <div class="block__more">
                <a href="#" rel="nofollow">весь текст</a>
            </div>
        </div>
    </li>
</ul>

5) Привести внешний вид 4 блоков на сайте к такому виду: https://clip2net.com/s/3VRTyzW

Подскажите как можно с помощью стилей оформить вот такие блоки? Что можете посоветовать? Не могли бы Вы сверстать свой вариант, чтобы, опираясь на него я смогла разобраться в реализации?