Step Box (long Text)
CODE
×
HTML
<div class='step-box'> <div class='step-1'>1</div> <div class='step-1-text'>Placerat odio platea nibh feugiat tristique pretium mi porta feugiat urna hendrerit egestas quisque vestibulum netus vel fermentum. Est aliquet consectetur. Ad.</div> </div>
CSS
div.step-1 { text-align:center; font-size: 65px; line-height: 74px; letter-spacing: 0.02rem; word-spacing: 0.04rem; font-family: 'Roboto'; font-style: normal; font-weight: 500; background-color: rgba(235,211,174,1); padding-top: 6px; width: 85px; height: 85px; min-height: 85px; display:table-cell; vertical-align:top; } div.step-1-text { display:table-cell; vertical-align:middle; background-color: rgba(250,241,227,1); font-size: 24px; line-height: 28px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); padding-top: 25px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; max-width: 800px; } @media screen and (max-width: 767px) { div.step-1-text { font-size: 18px; line-height: 21px; padding-top: 18px; padding-bottom: 18px; padding-left: 20px; padding-right: 20px; max-width: 790px; } }
JS
Step Box (long Text)
×
1
Placerat odio platea nibh feugiat tristique pretium mi porta feugiat urna hendrerit egestas quisque vestibulum netus vel fermentum. Est aliquet consectetur. Ad.