Code Badge with HTML and CSS



Mẫu code Badge dùng Font Awesome Icons với HTML và CSS

1. HTML

							

2. CSS

							@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css');
		/* Base */
		* {
			box-sizing: border-box;
		}

		body {
			background: darkslategrey;
			margin: 2rem 0;
		}

		/* Headers */
		h1, h5, p {
			text-align: center;
		}

		h1 {
			color: khaki;
			margin-top: 1em;
			letter-spacing: 1.4px;
			line-height: 1.2;
		}

		h5 {
			color: linen;
		}

		p {
			color: darkgrey;
		}

		/* Wrapper */
		.wrapper {
			width: 90%;
			max-width: 900px;
			margin: 3em auto;
			text-align: center;
		}

		/* Badge */
		.badge {
			margin: 1.5em 3em;
			width: 6.4em;
			height: 6.4em;
			border-radius: 20%;
			display: inline-block;
			top: 0;
			transition: all 0.2s ease;
			box-shadow: 8px 10px 12px 3px rgba(0, 0, 0, 0.43);
		}

		.rounded {
			width: 70px;
			height: 70px;
			background: white;
			position: absolute;
			margin: 15px 16px auto;
			z-index: 10;
			border-radius: 30%;
			box-shadow: 8px 8px 8px 2px rgba(0, 0, 0, 0.23);
		}
		.rounded i.fab {
			font-size: 2.6em;
			margin-top: 16px;
		}

		/* Colors */
		.blue {
			background: dodgerblue;
			color: deepskyblue;
		}

		.orange {
			background: darkorange;
			color: orange;
		}

		.gold {
			background: gold;
			color: gold;
		}

		.red {
			background: red;
			color: red;
		}

		.purple {
			background: mediumpurple;
			color: slategray;
		}

		.green {
			background: yellowgreen;
			color: darkslategray;
		}

		.crimson {
			background: crimson;
			color: firebrick;
		}

		.steel {
			background: steelblue;
			color: gold;
		}

		.pink {
			background: hotpink;
			color: palevioletred;
		}

		.rebecca {
			background: rebeccapurple;
			color: rebeccapurple;
		}

		.gainsboro {
			background: gainsboro;
			color: orangered;
		}						

3. JAVASCRIPT

													

 


Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.