<div class=grid>
	<img src=cloud-forest.png>
		<p><span>Cloud Forest replicates the cool moist conditions found in tropical mountain regions found in South-East Asia, Middle- and South America.</span></p>
</div>
span {
	outline: 2px dashed rgb(216, 255, 248);
	box-shadow: 0 0 0 2px rgb(39, 144, 198);
	animation: 1s animateBorder ease infinite;
	background: #fffede;
	padding: 0.5em 1.3em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@keyframes animateBorder {
	to {
		outline-color: rgb(39, 144, 198);
		box-shadow: 0 0 0 2px rgb(216, 255, 248);
	}
}

/* rules for styling 
***************************/

div {
	width: 600px;
	display: grid;
	margin: 60px auto auto auto;
	grid-template-columns: max-content auto;
	grid-gap: 5vw;
	align-items: center;
}
img {
	width: 15vw;
	border: 2px solid rgb(39, 144, 198);
	border-radius: 50%;
	filter: drop-shadow(0 0 20px rgb(39, 144, 198));
}
p {
	font: 12pt/3em satisfy;
}

@media (max-width: 700px) {
	div {
		width: 80vw;
	}
	img {
		width: 25vw;
	}
	p {
		font-size: 10pt;
	}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Satisfy

External JavaScript

This Pen doesn't use any external JavaScript resources.