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

1599 hasan

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

अनुशंसित

14 October 2023

कोडपेन होम आउटलाइन मोबाइल कार्ड

14 June 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;
}

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

अनुशंसित

कार्ड डैशबोर्ड

कोडपेन होम आउटलाइन मोबाइल कार्ड

सोशल मीडिया का एनिमेटेड कार्ड

HTML

CSS

JS

अनुशंसित

कार्ड डैशबोर्ड

कोडपेन होम आउटलाइन मोबाइल कार्ड

सोशल मीडिया का एनिमेटेड कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS