Размещение контента в виде карточек

Разработка Размещение контента в виде карточек

Нет прав для скачивания
Размещение контента в виде карточек.
Обзор Обсуждение (2)
Создаем разметку HTML:
HTML: 
<div class="dashboard">
  <div class="left-side-bar">
    <div class="menu">
      <ul>
        <li class="active">
          <i class="fa fa-edit"></i>
          <span>Dashboard</span>
        </li>
        <li>
          <i class="fa fa-edit"></i>
          <span>Multimedia</span>
        </li>
        <li>
          <i class="fa fa-edit"></i>
          <span>Users</span>
        </li>
        <li>
          <i class="fa fa-edit"></i>
          <span>Schedules</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="main-container">
    <div class="top-bar">
      <div class="search-input">
        <i class="fa fa-search"></i>
        <input placeholder="Search...">
      </div>
      <div class="top-bar-btn">
        <i class="fa fa-bell"></i>
      </div>
      <div class="top-bar-profile">
        <div class="profile-avatar">
          <img src="https://www.ognjenmarceta.com/images/ognjenmarceta.jpg">
        </div>
        <p>Ognjen Marceta</p>
        <i class="fa fa-angle-down"></i>
      </div>
    </div>
    <div class="main-view">
      <div class="d-card blue">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-tint"></i>
          </div>
          <p>Water Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card green">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-leaf"></i>
          </div>
          <p>Earth Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card red">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-fire"></i>
          </div>
          <p>Fire Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card blue">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-tint"></i>
          </div>
          <p>Water Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card green">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-leaf"></i>
          </div>
          <p>Earth Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card red">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-fire"></i>
          </div>
          <p>Fire Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card blue">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-tint"></i>
          </div>
          <p>Water Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card green">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-leaf"></i>
          </div>
          <p>Earth Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
      <div class="d-card red">
        <div class="card-header">
          <div class="icon">
            <i class="fa fa-fire"></i>
          </div>
          <p>Fire Card</p>
        </div>
        <div class="card-body">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
        </div>
        <div class="card-actions">
          <i class="fa fa-eye"></i>
          <i class="fa fa-edit"></i>
          <i class="fa fa-trash"></i>
        </div>
      </div>
    </div>
  </div>
</div>
Пишем стиль:
Less: 
@import url("https://fonts.googleapis.com/css?family=Lato");

body {
  font-family: "Lato", sans-serif;
  background: #f2f1f6;
}

.dashboard {
  display: flex;
  flex-direction: row;
}

.left-side-bar {
  background: white;
  max-width: 300px;
  min-width: 180px;
  -webkit-box-shadow: 6px 0px 18px -6px rgba(0, 0, 0, 0.1);
  box-shadow: 6px 0px 18px -6px rgba(0, 0, 0, 0.1);

  .menu {
    width: 100%;

    ul {
      padding: 0;
      margin-top: 60px;
    }
    li {
      cursor: pointer;
      width: 100%;
      height: 60px;
      list-style: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      font-weight: 600;
      transition: all 0.5s ease-in-out;
      i {
        margin-left: 32px;
        margin-right: 16px;
      }
      &:hover,
      &.active {
        background: #e37cfd21;
        color: #d243ff;
        transition: all 0.5s ease-in-out;
      }
    }
  }
}

.top-bar {
  display: flex;
  flex-direction: row;
  background: white;
  height: 60px;
  -webkit-box-shadow: 0px 6px 18px -6px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 6px 18px -6px rgba(0, 0, 0, 0.1);
  padding-left: 32px;
  padding-right: 32px;

  .top-bar-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 100%;
    border-left: 1px solid #58585821;
    border-right: 1px solid #58585821;
    color: #58585863;
    font-size: 28px;
    transition: all 0.5s ease-in-out;
    &:hover {
      color: #d243ff;
    }
  }

  .top-bar-profile {
    cursor: pointer;
    display: flex;
    justify-content: start;
    align-items: center;
    width: auto;
    height: 100%;
    font-size: 22px;

    i {
      margin-left: 8px;
    }

    p {
      white-space: nowrap;
    }

    .profile-avatar {
      border-radius: 10px;
      border: 2px solid #58585863;
      overflow: hidden;
      width: 32px;
      height: 32px;
      margin-right: 16px;
      margin-left: 16px;
      transition: all 0.5s ease-in-out;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &:hover {
        border: 2px solid #d243ff;
      }
    }
  }
}

.search-input {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  input {
    margin-left: 8px;
    height: 100%;
    border: 0;
    padding: 0;
    font-size: 24px;
    outline: none;
  }
}

.main-view {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  padding: 16px;

  .d-card {
    background: -moz-linear-gradient(top, #f9532a 0%, #f9842a 45%);
    background: -webkit-linear-gradient(top, #f9532a 0%, #f9842a 45%);
    background: linear-gradient(to bottom, #f9532a 0%, #f9842a 45%);
    box-shadow: 6px 0px 18px -6px rgba(0, 0, 0, 0.4);

    &.blue {
      background: -moz-linear-gradient(top, #2ad3f9 0%, #2a90f9 45%);
      background: -webkit-linear-gradient(top, #2ad3f9 0%, #2a90f9 45%);
      background: linear-gradient(to bottom, #2ad3f9 0%, #2a90f9 45%);
    }

    &.green {
      background: -moz-linear-gradient(top, #2af96a 0%, #27d072 45%);
      background: -webkit-linear-gradient(top, #2af96a 0%, #27d072 45%);
      background: linear-gradient(to bottom, #2af96a 0%, #27d072 45%);
    }

    &.red {
      background: -moz-linear-gradient(top, #f9532a 0%, #f9842a 45%);
      background: -webkit-linear-gradient(top, #f9532a 0%, #f9842a 45%);
      background: linear-gradient(to bottom, #f9532a 0%, #f9842a 45%);
    }

    border: 6px solid white;
    border-radius: 10px;
    max-width: 200px;
    min-width: 200px;
    max-height: 300px;
    min-height: 300px;
    transition: all 0.5s ease-in-out;
    margin: 8px;
    padding: 10px;

    &:hover {
      -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 123, 123, 0.3);
      box-shadow: 0px 0px 15px 5px rgba(255, 123, 123, 0.3);
      transform: scale(1.02);

      &.green {
        -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 123, 123, 0.3);
        box-shadow: 0px 0px 15px 5px rgba(36, 224, 33, 0.61);
      }

      &.blue {
        -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 123, 123, 0.3);
        box-shadow: 0px 0px 15px 5px rgba(33, 162, 224, 0.61);
      }

      &.red {
        -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 123, 123, 0.3);
        box-shadow: 0px 0px 15px 5px rgba(224, 33, 33, 0.61);
      }

      transition: all 0.5s ease-in-out;
      .card-header {
        .icon {
          border: 1px solid white;
          border-radius: 5px;
          transition: border-radius 0.5s ease-in-out;
        }
      }
    }

    .card-header {
      text-align: center;
      display: flex;
      flex-direction: column;
      color: white;

      .icon {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        border: 1px solid white;
        border-radius: 100%;
        transition: border-radius 0.5s ease-in-out;
        width: 30px;
        height: 30px;
      }
    }
    .card-body {
      p {
        color: white;
      }
    }

    .card-actions {
      border-top: 1px solid white;
      display: flex;
      -webkit-box-pack: justify;
      align-content: center;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      cursor: pointer;
      i {
        margin-top: 6px;
        color: white;
        border: 2px solid transparent;
        padding: 4px;
        &:hover {
          background: #fefffe70;
          border: 2px solid #fefffe70;
          border-radius: 4px;
        }
      }
    }
  }
}
Смотрим результат:
45w6.gif
  • Мне нравится
Реакции: aligon
Автор
baltun
Скачиваний
0
Просмотры
803
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0
Обсудить ресурс

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ