Карточки и блоки #9

HTML:

Карточка:

<div class="atuinCard">
	<div class="atuinCard-top">
		<div class="atuinCard-icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z"/></svg>
		</div>
		<div class="atuinCard-title">Заголовок карточки</div>
	</div>		
	<div class="atuinCard-txt">
		<p>Контент карточки</p>
	</div>								
</div>

</div>

<div class="atuinCard-title">Заголовок карточки</div>

</div>

<p>Контент карточки</p>

</div>

Сетка:

<div class="atuinCard-container">
	<div class="atuinCard-col">
		<!-- Карточка -->
	</div>	
	<div class="atuinCard-col">
		<!-- Карточка -->
	</div>
	<!-- ... -->
	<!-- Еще колонки  -->	
</div>

</div>

</div>

</div>

CSS:

/* Сетка */		
.atuinCard-container {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
	margin: 10px -10px;
	counter-reset: count;
}
.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: 50%;	
	}
}
@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%;		
	}
}

/* Карточка */
.atuinCard {
	height: 100%;
	position: relative;
	border-radius: 25px;
    background-color: #fff;
    transition: all 500ms ease;	
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);	
}
.atuinCard:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
	background-color: #fff;
}
.atuinCard-top {
	display: flex;
	align-items: center;
	height: 50px;
	background: #BFE2FF;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);	
	transition: all 500ms ease;	
}
.atuinCard-top:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 25px;
	width: 0;
	border-radius: 0 25px 25px 0;
	background: #337AB7;
	transition: width 0.5s;
	z-index: -1;
}
.atuinCard:hover .atuinCard-top {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
.atuinCard:hover .atuinCard-top:before {
	width: 100%;
}
.atuinCard-icon {
	flex: 0 0 50px;
	height: 50px;
}
.atuinCard-icon svg {
	fill: #fff;
	background: #337AB7;
	border-radius: 50%;
	padding: 14px;
}
.atuinCard-title {
	font-weight: 500;
	line-height: 1;
	color: #337AB7;
	font-size: 18px;
	padding: 0 12px;
	transition: 0.3s;
}
.atuinCard:hover .atuinCard-title {
	color: #fff;
	padding: 0 20px 0 8px;
}
.atuinCard-txt {
	padding: 16px 20px 6px;
}
.atuinCard-txt p {
	color: #000;
	font-size: 16px;
	line-height: 1.3;
	margin: 0 0 10px;
}
@media (min-width: 992px) {
	.atuinCard {
		border-radius: 35px;
	}
	.atuinCard-top {
		height: 70px;
		border-radius: 35px;
	}
	.atuinCard-top:before {
		left: 35px;
		border-radius: 0 35px 35px 0;
	}
	.atuinCard-icon {
		flex: 0 0 70px;
		height: 70px;
	}
	.atuinCard-icon svg {
		padding: 18px;
	}
	.atuinCard-title {
		padding: 0 18px;
		font-size: 20px;
	}
	.atuinCard:hover .atuinCard-title {
		padding: 0 24px 0 12px;
	}
	.atuinCard-txt {
		padding: 16px 26px 6px;
	}
	.atuinCard-txt p {
		font-size: 18px;
	}
}
@media (min-width: 1400px) {
	.atuinCard-title {
		font-size: 22px;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

/* Сетка */

.atuinCard-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

margin: 10px -10px;

counter-reset: count;

}

.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: 50%;

}

@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%;

}

/* Карточка */

.atuinCard {

height: 100%;

position: relative;

border-radius: 25px;

background-color: #fff;

transition: all 500ms ease;

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);

}

.atuinCard:hover {

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);

transform: translateY(-5px);

background-color: #fff;

}

.atuinCard-top {

display: flex;

align-items: center;

height: 50px;

background: #BFE2FF;

border-radius: 25px;

position: relative;

overflow: hidden;

z-index: 1;

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);

transition: all 500ms ease;

}

.atuinCard-top:before {

content: '';

position: absolute;

top: 0;

bottom: 0;

left: 25px;

width: 0;

border-radius: 0 25px 25px 0;

background: #337AB7;

transition: width 0.5s;

z-index: -1;

}

.atuinCard:hover .atuinCard-top {

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);

}

.atuinCard:hover .atuinCard-top:before {

width: 100%;

}

.atuinCard-icon {

flex: 0 0 50px;

height: 50px;

}

.atuinCard-icon svg {

fill: #fff;

background: #337AB7;

border-radius: 50%;

padding: 14px;

}

.atuinCard-title {

font-weight: 500;

line-height: 1;

color: #337AB7;

font-size: 18px;

padding: 0 12px;

transition: 0.3s;

}

.atuinCard:hover .atuinCard-title {

color: #fff;

padding: 0 20px 0 8px;

}

.atuinCard-txt {

padding: 16px 20px 6px;

}

.atuinCard-txt p {

color: #000;

font-size: 16px;

line-height: 1.3;

margin: 0 0 10px;

}

@media (min-width: 992px) {

.atuinCard {

border-radius: 35px;

}

.atuinCard-top {

height: 70px;

border-radius: 35px;

}

.atuinCard-top:before {

left: 35px;

border-radius: 0 35px 35px 0;

}

.atuinCard-icon {

flex: 0 0 70px;

height: 70px;

}

.atuinCard-icon svg {

padding: 18px;

}

.atuinCard-title {

padding: 0 18px;

font-size: 20px;

}

.atuinCard:hover .atuinCard-title {

padding: 0 24px 0 12px;

}

.atuinCard-txt {

padding: 16px 26px 6px;

}

.atuinCard-txt p {

font-size: 18px;

}

@media (min-width: 1400px) {

.atuinCard-title {

font-size: 22px;

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Опубликовано: 19.11.2025
Рубрики: Коллекция карточек и блоков
177 просмотров

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Пример:

HTML:

Карточка:

Сетка:

CSS:

Смотрите также:

Добавить комментарий: