Сегодня я постараюсь сделать блок для сравнения цен используя только html и css. Это мой третий проект. Делаю это я не для того чтобы кого то научить — я сам ученик, а делаю для того чтобы, показать чему я научился обучаясь на hexlet -e.

Я буду делать это проект в среде разработке Visual Studio Code. Ее можно скачать бесплатно — всем рекомендую.

Первый шаг, создать документ формата html и начать вписывать «!» (без скобок) и ввести значение. Следующий код должен появиться автоматически.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Меняем язык «html lang=»ru»» и вписываем таитл который нам необходим.

Перед тем как мы продолжим, вам необходимо создать еще два документа формата .svg в той же папке где хранятся фаилы html и css. Это иконки которые мы будем применять. Назвать их следует check-circle и x-square и поместить следующий код. Для check-circle:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0CE67D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

А для x-square:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e88161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>

В «body» вписываем тег <section> с классом «price-comprasion». Мы создали секцию где будут хранится наши колонки с ценами. С помощью тега <div> создаем первую колонку. Сама колонка также будет разделена на секции «header» где будет хранится информация: знак рубля, цена, период оплаты и название тарифа. Затем у нас идет секция с информацией о тарифе и кнопка «Начни сегодня».

<body>
    <section class='price-comparison'>
        <div class="price-column">
            <div class="price-header">
                <div class="price">
                    <div class="ruble-sign">&amp;#8381</div>
                    0
                    <div class="per-month">/мес.</div>
                </div>
                <div class="plane-name">Базовый</div>
            </div>
        </div>
    </section>
</body>

Подключаем фаил styles.css и два типа google шрифта Lato и Poppins.

<link href="https://fonts.googleapis.com/css?family=Lato|Poppins&amp;display=swap" rel="stylesheet">

Прописываем псевдокласс root — он находит корневой элемента дерева документа. Для тега <body> прописываем внешние отступы, свойство display который определяет тип отображения, в нашем случае flex.

Переходим в html фаил и делаем из одной колонки — 3. Прописываем название тарифа и переходим к css фаилу. Указываем параметры для всей секции: расположение контента — по середине, выравниваем в перпендикулярном направлении элементы, задаем ширину 100% и отступы 3rem.

.price-comparison {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin: 3rem;
  }

В стилях для колонки прописываем параметры такие как: цвет фона -белый, небольшую тень делаем вокруг колонок, padding: 2rem, максимальная ширина 275px, а закругление краев колонок указываем параметр 8px.

 .price-column {
    background-color: white;
    box-shadow: 0 7px 30px rgba(52, 31, 97, 0.1);
    padding: 1rem;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 275px;
    border-radius: 8px;
  }

Для центральной колонки дописываем в html фаиле название, а в css фаиле придаем им значения которые указаны ниже.

<div class="price-column popular"> <!! для html !!>

 .price-column.popular {               <!!для css!!>
    background-color: var(--accent-color);
    color: white;
  }

See the Pen GRgomMg by Artem (@Polkovnik123) on CodePen.dark

Для колонок слева и с права убираем закругление краев. Это делается при помощи псевдокласса first и last child.

  .price-column:first-child {
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
  }
  
  .price-column:last-child {
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
  }

Возвращаясь ко второй колонки, которую мы будем выделать от остальных. Дописываем к тем стилям которые у нас уже есть — отступы с верху и снизу.

See the Pen GRgoEGM by Artem (@Polkovnik123) on CodePen.dark

Относительно «heade» к каждой колонки: знак рубля, цена и период оплаты должны быть размещены друг под другом, шрифт должен быть выделен «bold».

  .price-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--heading-font-family);
    font-weight: bold;
  }

Теперь непосредственно перейдем к цене, знаку рубля, периоду оплаты, названию тарифа и к черте которая будет разделять наш контент. До этого необходимо в html фаил внести саму черту делителя на всех трех колонках. Пишем следующий код:

        <div class="price-column">
            <div class="price-header">
                <div class="price">
                    <div class="ruble-sign">&amp;#8381</div>
                    12500
                    <div class="per-month">/мес.</div>
                </div>
                <div class="plan-name">Премиум</div>
                <div class="divider"></div>  <! --вот тут-->
            </div>
  .price {
    font-size: 3.3rem; <! --размер шрифта цены -->
    display: flex;
  }

  .ruble-sign {
    font-size: 1.5rem;   <! --размер шрифта знака рубля -->
    margin-top: .5rem;    <! --отступ сверху -->
    margin-right: .25rem;   <! --отступ справа от цены -->
  }

  .per-month {
    font-size: .75rem;      <! --размер шрифта периода оплаты -->
    align-self: flex-end;    <! --разместим его внизу -->
    margin-bottom: 1.1rem;    <! --немного поднимем -->
    text-transform: uppercase;   <! --текст с большой буквы -->
  }

  .plane-name {
    text-transform: uppercase;   <! --текст с большой буквы -->
    font-size: .9rem;          <! --размер шрифта название тарифа -->
    margin-bottom: 0;
  }

  .divider {
    height: 1px;         <! --высота черты которая будет делить контент-->
    width: 100%;       <! --занимает всю ширину -->
    background-color: rgba(0, 0, 0, .2);
    margin-top: 1rem;       <! --отступы с верху-->
    margin-bottom: 2rem;     <! --отступы с низу-->
  }

  .price-column.popular .divider {   <! --черта для выделяющего блока -->
    background-color: rgba(255, 255, 255, .2); <! --изменили цвет-->
  }

Переходим к списку тарифов. В html пишем следующий код и сразу подтянем иконки которые мы делали в начале упражнения.

<div class="feature">
        <img src="check-circle.svg">  <! --иконка зеленого цвета круглая -->
          13 курсов бесплатно
        </div>
        <div class="feature">
          <img src="check-circle.svg">
          Практика
        </div>
        <div class="feature">
          <img src="check-circle.svg">
          Доступ к сообществу
        </div>
        <div class="feature">
          <img src="x-square.svg">
          60 курсов
        </div>
        <div class="feature">
          <img src="x-square.svg"> <! --иконка красного цвета квадратная -->
          Пожизненный доступ к теории
        </div>
        <div class="feature">
          <img src="x-square.svg">
          Поддержка
        </div>
        <div class="feature">
          <img src="x-square.svg">
          Более 100 испытаний
        </div>
        <div class="feature">
          <img src="x-square.svg">
          Проекты в портфолио
        </div>
        <div class="feature">
          <img src="x-square.svg">
           Персональный наставник
        </div>
        <div class="feature">
          <img src="x-square.svg">
           Гарантированная стажировка
        </div>

Стили списка контента выглядит следующим образом:

.feature {
    display: flex;
    align-items: center;    <! --текст разместим по центру -->
    margin: .4rem;          <! --отступы вокруг текста -->
  }

 .feature img {
    height: 1.1em;      <! --высота иконки -->
    width: 1.1em;       <! --ширина иконки -->
    margin-right: .5rem;   <! --отступ со стороны текста -->
  }

<div class="feature inactive"> <! --это html. допиши слово inactive чтобы
выделить не активные позиции-->

.feature.inactive {    <! --изменили цвет не активным позициям в css -->
    color: #999;
  }

В конце сделаем красивую кнопку для нашего блока сравнения цен.

 .cta {
    border: none;
    background-color: var(--accent-color); <! --цвет фона для кнопок-->
    color: white;    <! --цвет текста для кнопок-->
    padding: .75rem 1rem;  <!--отступы-->
    cursor: pointer;    <!--при наведении курсор меняется-->
    font-family: var(--heading-font-family);  <!--шрифт-->
    font-weight: bold;
    border-radius: 4px;  <!--закругление сторон кнопок-->
    margin-top: 3rem;  <!--отступ сверху-->
    transition: 100ms;
    transform: scale(1);
  }

.price-column.popular .cta {    <!--цвет кнопки выделенной секции-->
    background-color: white;    
    color: var(--accent-color);
  }

  .cta:hover, .cta:focus {  <!--увеличим кнопку при наведении-->
    transform: scale(1.1);
  }

Теперь все готово, выставляю окончательный результат моей работы. Если у вас есть замечания или предложения оставляйте комментарий.

See the Pen vYELWam by Artem (@Polkovnik123) on CodePen.dark