<div class="container">
<div class="example">
<p class="shadow shadow-1">I'm a shadow</p>
<pre>text-shadow: 0px 10px 10px #234D3C;</pre>
</div>
<div class="example">
<p class="shadow shadow-2">I'm a shadow</p>
<pre>text-shadow: 3px 3px 0px #F2A063;</pre>
</div>
</div>
* {
box-sizing: border-box;
}
body {
background-color: #FFD913;
font-family: sans-serif;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
margin-top: 40vh;
margin-top: calc(50vh - 130px);
}
.example {
background-color: white;
flex-grow: 1;
margin: 0.5em;
min-width: 150px;
border-radius: 10px;
}
.example .shadow {
display: block;
width: 90%;
height: 100px;
background-color: white;
margin: 20% auto 10% auto;
border-radius: 2px;
font-size: 3rem;
text-align: center;
font-weight: 800;
}
.example pre {
width: 90%;
background-color: #E4FFF7;
padding: 1em;
border-radius: 2px;
margin-left: auto;
margin-right: auto;
white-space: pre-wrap;
}
.shadow-1 {
text-shadow: 0px 10px 10px #234D3C;
}
.shadow-2 {
text-shadow: 3px 1px 0px #F2A063;
}
@media screen and (max-width: 640px) {
.container {
flex-wrap: wrap;
margin-top: 2vh;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.