ZorNet.Ru — сайт для вебмастера » HTML и CSS » Информационные карточки HTML и CSS

Информационные карточки HTML и CSS

В статье описано, как создать адаптивные инфографические карты, что идут в колонку в разном цвете, где только задействуем используя HTML и CSS. Или можно сказать другими словами, как информационные карточки Flexbox. Инфографика — это визуальное представление информации данных на сайте, где используем информацию во многих местах, это написать пошаговую информацию или под услуги на выбор.

Задействование на сайте такой стиль карт, мы можем показать легко понятную информацию, которая будет еще разделенная по категориям или по оттенку цвета. Карты, что представлены в материале, то здесь веб-разработчик может изменить или настроить их в соответствии с вашими требованиями. Это не сложно все перенастроить в плане подачи информации или дизайна, даже при начальном знании HTML CSS.

Если рассматривать на большом мониторе, по при открытии сайта или страницы, карты идут в одну колонку или в ряд, по несколько оттенков цвета, что можно где-то самому оформить или убрать лишнее, и также добавить.

Также вы могли такой дизайн видеть:

Как создать красивые карточки на сайт для информации?

Установка:

Стили под шрифтовые кнопки:

Код

HTML

Код

<div class="managemas">
  <div class="aletackmes">
  <div class="makupes">
  Скрипты
  </div>
  <div class="nimplemes">1</div>
  <div class="akusoluson">
  <h3>Игры</h3>
  <p>Первое описание на тему игры.</p>
  <div class="icon">
  <i class="fab fa-html5"></i>
  </div>
  </div>
  </div>

  <div class="aletackmes">
  <div class="makupes">
  Шаблоны
  </div>
  <div class="nimplemes">2</div>
  <div class="akusoluson">
  <h3>Nvidia</h3>
  <p>Второе описание на тему Nvidia.</p>
  <div class="icon">
  <i class="fab fa-css3-alt"></i>
  </div>
  </div>
  </div>

  <div class="aletackmes">
  <div class="makupes">
  Дизайн
  </div>
  <div class="nimplemes">3</div>
  <div class="akusoluson">
  <h3>Blizzard</h3>
  <p>Тематическое описание на тематику Blizzard.</p>
  <div class="icon">
  <i class="fab fa-js-square"></i>
  </div>
  </div>
  </div>

  <div class="aletackmes">
  <div class="makupes">
  Стили
  </div>
  <div class="nimplemes">4</div>
  <div class="akusoluson">
  <h3>Steam</h3>
  <p>Кратко опишем по теме Steam.</p>
  <div class="icon">
  <i class="fab fa-php"></i>
  </div>
  </div>
  </div>

  <div class="aletackmes">
  <div class="makupes">
  CSS3
  </div>
  <div class="nimplemes">5</div>
  <div class="akusoluson">
  <h3>Интернет-архив</h3>
  <p>Интернет-архив под описание.</p>
  <div class="icon">
  <i class="fas fa-database"></i>
  </div>
  </div>
  </div>
</div>

CSS

Код

h1 {
  text-align: center;
}
.managemas {
  display: flex;
}
.managemas .aletackmes {
  flex: 1;
  margin: 10px;
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  overflow: hidden;
}
.managemas .aletackmes .makupes {
  text-transform: uppercase;
  font-size: 25px;
  font-weight: bold;
  padding: 15px;
  padding-bottom: 60px;
  color: #ffffff;
}
.managemas .aletackmes .nimplemes {
  box-sizing: border-box;
  font-size: 35px;
  font-weight: bold;
  background-color: #000000;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  color: #fdf7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -60px auto 0px auto;
  z-index: 2;
  position: relative;
  box-shadow: inset 0px -10px 8px -8px rgba(49, 46, 46, 0.51);
}
.managemas .aletackmes .akusoluson {
  padding: 15px;
  padding-top: 45px;
  margin-top: -45px;
  background-color: #ffffff;
  box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.15);
}
.managemas .aletackmes .icon {
  font-size: 50px;
}
.managemas .aletackmes:nth-child(1) .makupes, .managemas .aletackmes:nth-child(1) .nimplemes {
  background-color: #e34f26;
}
.managemas .aletackmes:nth-child(1) .icon {
  color: #e34f26;
}
.managemas .aletackmes:nth-child(2) .makupes, .managemas .aletackmes:nth-child(2) .nimplemes {
  background-color: #1b73ba;
}
.managemas .aletackmes:nth-child(2) .icon {
  color: #1b73ba;
}
.managemas .aletackmes:nth-child(3) .makupes, .managemas .aletackmes:nth-child(3) .nimplemes {
  background-color: #f8d23c;
}
.managemas .aletackmes:nth-child(3) .icon {
  color: #f8d23c;
}
.managemas .aletackmes:nth-child(4) .makupes, .managemas .aletackmes:nth-child(4) .nimplemes {
  background-color: #7478ae;
}
.managemas .aletackmes:nth-child(4) .icon {
  color: #7478ae;
}
.managemas .aletackmes:nth-child(5) .makupes, .managemas .aletackmes:nth-child(5) .nimplemes {
  background-color: #de8a00;
}
.managemas .aletackmes:nth-child(5) .icon {
  color: #de8a00;
}
@media (max-width: 767px) {
  .managemas {
  flex-wrap: wrap;
  }
  .managemas .aletackmes {
  flex: 0 0 100%;
  }
}

Примером дизайна адаптивных инфографических карт создан на чистый CSS и HTML, где полностью настроенный адаптивный дизайн, используя гибкий дисплей.

Где все карты будут в ряд на большом экране, когда размер экрана будет маленьким или уменьшится, тогда он будет отображаться по столбцам. Где все можно посмотреть в прикрепленном видео ролике или перейти на demo страницу.

Демонстрация

Видео обзор:

18 Октября 2019 Загрузок: 5 Просмотров: 3327 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0