Пример:
HTML:
Карточка:
|
1 2 3 4 5 6 7 8 9 |
<div class="atuinCard"> <div class="atuinCard-icon"> <svg enable-background="new 0 0 110 110" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg"><path id="Exclamation" d="m55 29c-14.3 0-26 11.7-26 26s11.7 26 26 26 26-11.7 26-26-11.7-26-26-26zm0 42c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm2-12h-4l-2-20h8zm-2-59c-30.4 0-55 24.6-55 55s24.6 55 55 55 55-24.6 55-55-24.6-55-55-55zm0 87c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32z"/></svg> </div> <div class="atuinCard-txt"> <strong>Заголовок карточки</strong> <p>Контент карточки</p> </div> </div> |
Сетка:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="atuinCard-container"> <div class="atuinCard-col"> <!-- Карточка --> </div> <div class="atuinCard-col"> <!-- Карточка --> </div> <!-- ... --> <!-- Еще колонки --> </div> |
CSS:
Карточка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
.atuinCard { position: relative; height: calc(100% - 10px); padding: 16px 10px; display: flex; margin: 10px 32px 0 0; z-index: 1; } .atuinCard:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(4px); z-index: -1; border-radius: 12px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(0, 0, 0, 0.1); transition: 0.5s; } .atuinCard:after { position: absolute; font-size: 60px; counter-increment: num; content: "0" counter(num); font-weight: 600; top: -30px; line-height: 1; right: -34px; color: rgba(0, 0, 0, 0.2); font-family: monospace; z-index: -2; } .atuinCard-icon { flex: 0 0 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)) } .atuinCard-icon svg { width: 40px; fill: #337AB7; } .atuinCard-txt { padding-left: 10px; } .atuinCard-txt strong { color: #337AB7; font-size: 18px; line-height: 1.3; text-transform: uppercase; } .atuinCard-txt p { padding-top: 10px; margin: 0; font-size: 16px; line-height: 1.3; } .atuinCard:hover:before { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.1); } @media (min-width: 576px) { .atuinCard { height: calc(100% - 20px); margin: 10px 52px 10px 0; padding: 16px; } .atuinCard:after { font-size: 80px; right: -54px; } .atuinCard-icon { flex: 0 0 60px; } .atuinCard-icon svg { width: 60px; } .atuinCard-txt { padding-left: 20px; } .atuinCard-txt strong { font-size: 20px; } .atuinCard-txt p { font-size: 18px; } } |
Сетка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.atuinCard-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px -10px; counter-reset: num; } .atuinCard-container *, .atuinCard-container *::before, .atuinCard-container *::after { box-sizing: border-box; } .atuinCard-col { width: 100%; padding: 10px; } @media (min-width: 576px) { .atuinCard-col { width: 100%; } } @media (min-width: 768px) { .atuinCard-col { width: 100%; } } @media (min-width: 992px) { .atuinCard-col { width: 50%; } } @media (min-width: 1200px) { .atuinCard-col { width: 33.33%; } } @media (min-width: 1400px) { .atuinCard-col { width: 33.33%; } } |
Обратите внимание: если используется своя сетка, родительский элемент для колонок должен иметь стиль counter-reset: count;
Смотрите также:
Добавить комментарий:
Ваш комментарий отправлен!
Когда заголовок отмечаем привальными тегами, h , то происходитт сдвиг текстов
Смотрите, где конфликтует, теги [b]h1-h6[/b] имеют и стандартные стили (по умолчанию) и наверняка от темы еще что то