<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;
}
}
This Pen doesn't use any external JavaScript resources.