Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Адаптивные карточки с помощью HTML и CSS бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
21.12.2023, 14:55
Адаптивные карточки с помощью HTML и CSS



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

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

Так реально карточки по стилю смотрятся:




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

Установка:

Шрифтовые знаки

[/code]
[/code]

HTML

Код

<div class="katocka_koda">
  <a href="#" class="predmet">
  <img src="Ссылка на картинку" alt="ключевые слова">
  <span class="developer">Тематика</span>
  <h3>Здесь идет первое название описани</h3>
  <div class="kipas">
  <i class="fas fa-arrow-right card-icon"></i>
  </div>
  </a>
  <a href="#" class="predmet">
  <img src="Ссылка на изображение" alt="ключевые слова">
  <span class="designer">Тематика</span>
  <h3>Второе название описани по тематике</h3>
  <div class="kipas">
  <i class="fas fa-arrow-right card-icon"></i>
  </div>
  </a>
  <a href="#" class="predmet">
  <img src="Ссылка на изображение" alt="ключевые слова">
  <span class="editor">Тематика</span>
  <h3>Третье название описание для карточки</h3>
  <div class="kipas">
  <i class="fas fa-arrow-right card-icon"></i>
  </div>
  </a>
  </div>


CSS

Код

.katocka_koda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 1250px;
  margin: 150px auto;
  padding: 20px;
  gap: 20px;
}

.katocka_koda .predmet {
  background: #fff;
  padding: 26px;
  border-radius: 8px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.04);
  list-style: none;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: border 0.5s ease;
}

.katocka_koda .predmet:hover {
  border: 2px solid #000;
}

.katocka_koda .predmet img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  object-fit: cover;
}

.katocka_koda span {
  display: inline-block;
  background: #F7DFF5;
  margin-top: 32px;
  padding: 8px 15px;
  font-size: 0.75rem;
  border-radius: 50px;
  font-weight: 600;
}

.katocka_koda .developer {
  background-color: #F7DFF5;  
  color: #B22485;
}  

.katocka_koda .designer {
  background-color: #d1e8ff;
  color: #2968a8;
}

.katocka_koda .editor {
  background-color: #d6f8d6;  
  color: #205c20;
}

.predmet h3 {
  color: #262526;
  font-size: 1.438rem;
  margin-top: 28px;
  font-weight: 600;
}

.predmet .kipas {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-35deg);
  height: 40px;
  width: 40px;
  color: #000;
  border: 1px solid #000;
  border-radius: 50%;
  margin-top: 40px;
  transition: 0.2s ease;
}

.katocka_koda .predmet:hover .kipas {
  background: #000;
  color: #fff;  
}

@media (max-width: 1200px) {
  .katocka_koda .predmet {
  padding: 15px;
  }
}

@media screen and (max-width: 980px) {
  .katocka_koda {
  margin: 0 auto;
  }
}


Чтобы создать данную карточку, то здесь задействуем элементы HTML, такие как div a, image, заголовок и базовые свойства CSS, это для того, чтобы стилизовать карточку и сделать ее адаптивной. Эта карточка проста и понятна, поэтому у вас не должно возникнуть проблем с выполнением шагов и пониманием кодов.

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

Скачать
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 40 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Скрап набо...
    RDS API
    • RDS API
    • Просмотров: 229
    • Дата: 28.01.2016
    CSE HTML V...
    Кисть для ...
    Шрифт - MA...
    Скрап набо...
    Emurasoft ...