<div class="container">
<div class="mug">
<div class="mug__inner svg"><svg width="100%" height="100%"><text x="0%" y="80%" font-size="30vh" textLength="100%" lengthAdjust="spacingAndGlyphs">SVG is Awesome</text></svg></div>
</div>
<div class="mug">
<div class="mug__inner html">HTML is awesome</div>
</div>
<div class="mug">
<div class="mug__inner css">hyphens are awesome</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
background: linear-gradient(
to bottom,
hsl(211, 39%, 44%),
hsl(211, 51%, 65%)
);
min-height: 100vh;
font-size: 1.6rem;
}
.container {
margin: 2em 1em;
}
@media (min-width: 1000px) {
.container {
display: flex;
justify-content: space-around;
}
}
.mug {
position: relative;
background-color: white;
height: 360px;
width: 260px;
border-radius: 5px;
padding: 100px 0;
margin-bottom: 2em;
text-align: center;
}
.mug__inner {
display: inline-block;
text-align: left;
}
.mug::after {
position: absolute;
display: block;
content: "";
top: 50px;
bottom: 50px;
border: 40px solid white;
right: -120px;
border-radius: 50%;
width: 160px;
z-index: -1;
}
.html {
font-family: Times New Roman, serif;
}
.css {
font-family: Helvetica, Arial, sans-serif;
border: 2px solid black;
text-transform: uppercase;
max-width: 4em;
padding: 0.4em;
hyphens: auto;
}
.js {
display: none;
}
.svg {
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.