<div style="display: flex; justify-content: center; align-items: center; height: 100vh">
<div class="msc-hotline">
<i class="msc-hotline-phone"></i>
<div class="msc-hotline-content">
<div class="msc-hotline-number"><a href="tel:1900-6067">1900-6067</a></div>
<div class="msc-hotline-time">8h-21h - kể cả T7,CN</div>
</div>
</div>
</div>
* {
font-family: sans-serif;
padding: 0;
margin: 0;
}
.msc-hotline {
display: inline-block;
position: relative;
border: 1px solid #ccc;
border-radius: 9999em;
display: flex;
.msc-hotline-phone {
background: #65B044 url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEzIiBoZWlnaHQ9IjUxMyIgdmlld0JveD0iMCAwIDUxMyA1MTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00OTMuNDEgMjQuNjEwOEwzODkuNDEgMC42MTA4MTRDMzc4LjExIC0xLjk4OTE5IDM2Ni41MSAzLjkxMDgxIDM2MS45MSAxNC41MTA4TDMxMy45MSAxMjYuNTExQzMwOS43MSAxMzYuMzExIDMxMi41MSAxNDcuODExIDMyMC44MSAxNTQuNTExTDM4MS40MSAyMDQuMTExQzM0NS40MSAyODAuODExIDI4Mi41MSAzNDQuNjExIDIwNC4yMSAzODEuMzExTDE1NC42MSAzMjAuNzExQzE0Ny44MSAzMTIuNDExIDEzNi40MSAzMDkuNjExIDEyNi42MSAzMTMuODExTDE0LjYxMDQgMzYxLjgxMUMzLjkxMDQyIDM2Ni41MTEgLTEuOTg5NTggMzc4LjExMSAwLjYxMDQxNiAzODkuNDExTDI0LjYxMDQgNDkzLjQxMUMyNy4xMTA0IDUwNC4yMTEgMzYuNzEwNCA1MTIuMDExIDQ4LjAxMDQgNTEyLjAxMUMzMDQuMTEgNTEyLjAxMSA1MTIuMDEgMzA0LjUxMSA1MTIuMDEgNDguMDEwOEM1MTIuMDEgMzYuODEwOCA1MDQuMzEgMjcuMTEwOCA0OTMuNDEgMjQuNjEwOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=') no-repeat center center;
background-size: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
}
.msc-hotline-content {
padding: 4px 35px 4px 15px;
}
.msc-hotline-number {
text-align: center;
color: #3498db;
font-weight: 700;
letter-spacing: 2px;
font-size: 16px;
line-height: 1.6;
a {
text-decoration: none;
color: #fb7f00;
}
}
.msc-hotline-time {
color: #666;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.