Code Badge with HTML and CSS

Chia sẻ

---

1. HTML

<main class="wrapper">
		<article class="badge orange">
			<div class="rounded"><i class="fab fa-html5"></i></div>
		</article>
		<article class="badge blue">
			<div class="rounded"><i class="fab fa-css3-alt"></i></div>
		</article>
		<article class="badge gold">
			<div class="rounded"><i class="fab fa-js-square"></i></div>
		</article>
		<article class="badge red">
			<div class="rounded"><i class="fab fa-adobe"></i></div>
		</article>
		<article class="badge purple">
			<div class="rounded"><i class="fab fa-php"></i></div>
		</article>
		<article class="badge green">
			<div class="rounded"><i class="fab fa-node"></i></div>
		</article>
		<article class="badge crimson">
			<div class="rounded"><i class="fab fa-npm"></i></div>
		</article>
		<article class="badge steel">
			<div class="rounded"><i class="fab fa-python"></i></div>
		</article>
		<article class="badge pink">
			<div class="rounded"><i class="fab fa-sass"></i></div>
		</article>
		<article class="badge rebecca">
			<div class="rounded"><i class="fab fa-bootstrap"></i></div>
		</article>
		<article class="badge gainsboro">
			<div class="rounded"><i class="fab fa-java"></i></div>
		</article>
	</main>

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

---