<div class="emoji">
	<div class="emoji__eyes">
		<span></span>
		<span></span>
	</div>
	<div class="emoji__mouth"></div>
</div>

<a style="margin-top: 4rem;" href="https://twitter.com/hashtag/NoPreviewHtmlCss" rel="noopener nofollow" target="_blank">See #NoPreviewHtmlChallenge on Twitter</a>
<a style="margin-top: 1rem;" href="https://codepen.io/collection/XdJmeB" rel="noopener nofollow" target="_blank">See #NoPreviewHtmlChallenge on CodePen</a>
body {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	background-color: #fff67d;
}

.emoji {
	background: #f6e16e;
	border-radius: 50%;
	height: 70vmin;
	width: 70vmin;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	
	&__eyes {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 70%;
		
		> span {
			border-radius: 50%;
			background: #111;
			height: 10vmin;
			width: 8vmin;
		}
	}
	
	&__mouth {
		width: 70%;
		height: 4vmin;
		background: #111;
		border-radius: 1rem;
		display: flex;
	}
}
View Compiled
// https://codepen.io/collection/XdJmeB

// https://twitter.com/hashtag/NoPreviewHtmlCss

// https://jackdomleo.dev

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.