Responsive card design in HTML and CSS

Categories: HTML / CSS

HTML Code

Create a wrapper class and add your cards inside it.

I have use Flexbox for creating responsive card design.

Below is HTML file Code.

<body>
	<div class="wrapper">
		<div class="card-container">
			<div class="card-box">
				<div class="icon">
					<svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z"></path>
						</svg>	
				</div>
				<div class="heading">
					Neumorphic Card Design	
				</div>
				<p class="detail">
					Neumorphic UI elements look like they are connected to background,as if the elements are extruded from the background or inset into the background. 	
				</p>
				<button type="button" class="btn">Read More</button>	
			</div>	
		</div>
		<!--  --> 
		<div class="card-container">
			<div class="card-box">
				<div class="icon">
					<svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z"></path>
						</svg>	
				</div>
				<div class="heading">
					Neumorphic Card Design	
				</div>
				<p class="detail">
					Neumorphic UI elements look like they are connected to background,as if the elements are extruded from the background or inset into the background. 	
				</p>
				<button type="button" class="btn">Read More</button>	
			</div>	
		</div>
		<!--  -->
		<div class="card-container">
			<div class="card-box">
				<div class="icon">
					<svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M17.218,2.268L2.477,8.388C2.13,8.535,2.164,9.05,2.542,9.134L9.33,10.67l1.535,6.787c0.083,0.377,0.602,0.415,0.745,0.065l6.123-14.74C17.866,2.46,17.539,2.134,17.218,2.268 M3.92,8.641l11.772-4.89L9.535,9.909L3.92,8.641z M11.358,16.078l-1.268-5.613l6.157-6.157L11.358,16.078z"></path>
						</svg>	
				</div>
				<div class="heading">
					Neumorphic Card Design	
				</div>
				<p class="detail">
					Neumorphic UI elements look like they are connected to background,as if the elements are extruded from the background or inset into the background. 	
				</p>
				<button type="button" class="btn">Read More</button>	
			</div>	
		</div>
	</div>
</body>

CSS Code

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	background-color: #f0f0f3;
	width: 100%;
	height: 100%;
}
.wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-flow: wrap;
}
.card-container {
	box-shadow: 4px 4px 4px 0 #d1d9e6 inset,
				-4px -4px 4px 0 #fff inset;
	height: 550px;
	width: 400px;
	border-radius: 25px;
	margin: 50px auto;
	padding: 20px;
	transition: all 0.4s ease-in-out;
}
.card-container:hover {
	padding: 0;
	border-radius: 100px;
	transition: all 0.4s ease-in-out;
}
.card-box {
	height: 100%;
	box-shadow: 4px 4px 4px 0 #d1d9e6,
				-4px -4px 4px 0 #fff;
	padding: 20px;
	border-radius: 50px;
	transition: all 0.4s ease-in-out;
}
.card-container:hover .card-box {
	padding: 40px;
}
.icon svg {
	height: 100px;
	width: 100px;
	fill: #d1d9e6;
	margin: 0 auto;
	display: block;
}
.icon {
	box-shadow: inset -2px -2px 5px #fff,
				inset 3px 3px 5px rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	height: 150px;
	width: 150px;
	padding: 25px;
	margin: 0 auto;
	transition: box-shadow 0.4s ease-in-out;
} 
.card-container:hover .icon {
	box-shadow: -2px 2px 5px #fff,
				3px 3px 5px rgba(0,0,0,0.1);
	transition: box-shadow 0.4s ease-in-out;
}
.heading {
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
	padding: 20px 25px;
	color: #296894;
}
.detail {
	text-align: center;
	font-size: 16px;
	color: #635f82;
	padding: 20px 25px;
}
.btn {
	margin: 0 auto;
	display: block;
	width: 150px;
	height: 50px;
	border:none;
	box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
				6px 6px 10px rgba(0, 0, 0, 0.2);
	margin-top: 50px;
	border-radius: 50px;
	cursor: pointer;
	color: #aaa;
	transition: all 0.4s ease-in-out;
}
.btn:hover {
	color: #296894;
	letter-spacing: 2px;
	transition: all 0.4s ease-in-out;
}
.btn:active,
.btn:focus {
	outline: 0;
	border: none;
}
/* Responsive Media Queries */
@media screen and (max-width: 1200px) {
	.card-cantainer {
		width: 40%;
	}
}
@media screen and (max-width: 600px) {
	.card-cantainer {
		width: 60%;
	}
}

Watch the Below Video for a Detail Understanding

Search Your Keywords
Recent Post
Post Categories