I want to format a webpage to show a set of workouts but group them together in a set like the screenshot below.
I know that the right-hand side could be a simple list like ul but I'm trying to figure out how to get it formatted like this without using tables. Any HTML or JS methods that I may not know of?
This is an approach based on flexbox.
HTML
<div class="container"> <div class="counter">3x</div> <div class="collection">{</div> <div class="items"> <ul> <li>20 x pushups</li> <li>30 x KB swings</li> <li>10 x pullups</li> </ul> </div> </div> CSS
.container { display: flex; flex-direction: colum; align-items: center; height: 10em; width: 25em; } .counter { font-size: 5em; } .collection { font-size: 9em; } ul { list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; } .items { font-size: 2em; } Snippet
.container { display: flex; flex-direction: colum; align-items: center; height: 10em; width: 25em; } .counter { font-size: 5em; } .collection { font-size: 9em; } ul { list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; } .items { font-size: 2em; } <div class="container"> <div class="counter">3x</div> <div class="collection">{</div> <div class="items"> <ul> <li>20 x pushups</li> <li>30 x KB swings</li> <li>10 x pullups</li> </ul> </div> </div>Codepen here: https://codepen.io/programmerper/pen/PBaZyp
initial-letterin CSS. 1. initial-letter on CSS-tricks 2. initial-letter on MDNinitial-letterseems to be very poor though. See this article for instance.{to the appropriate height, you could implement it as a (background) image, SVG, border-image.