प्रोफ़ाइल कार्ड डिज़ाइन

2166 hasan

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

9 July 2025

3D झुकाव और ऊर्जा रिंग प्रभाव के साथ मूल्य निर्धारण कार्ड

2 February 2024

स्टैक्ड स्टिकर कार्ड

HTML

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
	box-sizing: border-box;
}

body {
	background-color: #28223F;
	font-family: Montserrat, sans-serif;
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

min-height: 100vh;
	margin: 0;
}

h3 {
	margin: 10px 0;
}

h6 {
	margin: 5px 0;
	text-transform: uppercase;
}

p {
	font-size: 14px;
	line-height: 21px;
}

.card-container {
	background-color: #231E39;
	border-radius: 5px;
	box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
	color: #B3B8CD;
	padding-top: 30px;
	position: relative;
	width: 350px;
	max-width: 100%;
	text-align: center;
}

.card-container .pro {
	color: #231E39;
	background-color: #FEBB0B;
	border-radius: 3px;
	font-size: 14px;
	font-weight: bold;
	padding: 3px 7px;
	position: absolute;
	top: 30px;
	left: 30px;
}

.card-container .round {
	border: 1px solid #03BFCB;
	border-radius: 50%;
	padding: 7px;
}

button.primary {
	background-color: #03BFCB;
	border: 1px solid #03BFCB;
	border-radius: 3px;
	color: #231E39;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	padding: 10px 25px;
}

button.primary.ghost {
	background-color: transparent;
	color: #02899C;
}

.skills {
	background-color: #1F1A36;
	text-align: left;
	padding: 15px;
	margin-top: 30px;
}

.skills ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.skills ul li {
	border: 1px solid #2D2747;
	border-radius: 2px;
	display: inline-block;
	font-size: 12px;
	margin: 0 7px 7px 0;
	padding: 7px;
}

प्रोफ़ाइल कार्ड डिज़ाइन

अनुशंसित

3D झुकाव और ऊर्जा रिंग प्रभाव के साथ मूल्य निर्धारण कार्ड

सीएसएस सोशल्स कार्ड

स्टैक्ड स्टिकर कार्ड

HTML

CSS

JS

अनुशंसित

3D झुकाव और ऊर्जा रिंग प्रभाव के साथ मूल्य निर्धारण कार्ड

सीएसएस सोशल्स कार्ड

स्टैक्ड स्टिकर कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS