For all of you who enjoy a challenge!
And all other coders and noobs. Here are three CSS "diverse align" challenges. Make it a compelling task or just an excuse to waste some time if you like.
The screenshot shows how the three containers are supposed to flow its content in different viewport widths. There are no recuirements for crossbrowser or different devices, just the flow of the text content as described. [Diverse-Alignment.png]:
The poem is breaked by html into four lines: by css the first line is aligned left, the middle lines in the center and last line to the right:
<q class="poem"> Left is this<br> in center plight;<br> to take the quiz <br> this be right</q>
The title wraps the text in three lines and has its eventually wrapping middle line fully justified. First and last lines are aligned left and right as in the poem:
<h1 class="title"> Left is this justified question of how to know that this is right</h1>
The slogan also has its eventually wrapping middle line fully justified. But first and last lines are aligned in reverse to those above:
<div class="slogan"> Here is right to justify the quest to find what causes that left is here</div>
The goal is to make the poem and the title and the slogan work as described using a minimum of semantic HTML and CSS code.
That means that the html for the cited poem should have breaks to make up the lines. The quote and the heading and the div should have so few extra tags/elements as possible added to the html. The CSS would be whatever excessive code you fancy to do the job. Of course, all attempts to solve an example are welcome! Whether it's lightweight or a blunderbuss heavily bloated html and css, it will all fit in.
Please post any thoughts about how to accomplish this, or any ideas how to solve any of the examples. If you are too [ lazy | occupied | overloaded | procrastinative ] to actually post working code you are most welcome to comment on what's posted.
Take the time/days you need to post what you come up with, no hurry. Eventually I'll post the code behind the screenshot.
(The idea comes from a six years old SPF thread about splitting a heading text over three lines but differently aligned.)