Анимированная карточка для товаров или фотографий на HTML и CSS

Название карточки

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок.

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

Для создания карточки вам надо перекопировать следующие часи кодов:

HTML:

                <div class="bb_card">
                    <div class="card_content">
                        <h3>
                            Название карточки
                        </h3>
                        <div class="text">
                            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок.
                            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок.
                        </div>
                    </div>
                </div>

CSS:

                .bb_card {
                    display: flex;
                    width: 300px;
                    height: 400px;
                    background: linear-gradient(45deg, rgb(0, 129, 6) 10%, transparent 10%, transparent 50%, rgb(0, 129, 6) 50%, rgb(0, 129, 6) 60%, transparent 60%, transparent 100%);
                    background-size: 15px 15px;
                    border: 5px solid rgb(0, 129, 6);
                    padding: 20px 10px;
                    animation: bb_card 5s linear infinite;
                }
        
                @keyframes bb_card {
        
                    from {
                        background-position: 0;
                    }
        
                    to {
                        background-position: 15;
                    }
        
                }
        
                .bb_card .card_content {
                    display: flex;
                    flex-direction: column;
                    row-gap: 20px;
                    font-family: Helvetica, sans-serif, serif;
                    color: #fff;
                    text-align: center;
                    padding: 10px;
                }
        
                .bb_card .card_content>* {
                    background-color: rgb(0, 129, 6);
                    padding: 15px 10px;
                }
        
                .bb_card .text {
                    flex-grow: 1;
                }
        
                .bb_card img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }

После копирования вышеупомянутых кусков кода, у вас должна появиться такая карточка:

Название карточки

Наша карточка готова. Для корректной работы карточки, не рекомендуем менять стили (кроме цветов и шрифтов.) и Вносить изменения в структуру html (за исключением содержимого элемента с классом "card_content")

CSS