Paul, Everybody. Okay before you jump my bones no I did not tidy the code below and that is because I could not get the engine to cease and desist altering inline style data I have to maintain. When I couldn’t get his idiot engine to stop ruthlessly renaming styles I spent one entire day just trying manually to get the document laid out in the format I know you professionals are most comfortable working in and every goddamn time I altered anything it broke the page. I can’t have the engine rewriting my styles or creating new ones (how do people put up with this guy?). There used to be a site hosted by the original Tidy guy and he was awesome! He added absolutely nothing to your page; the only thing he did was cascade indentation – and if you wanted it he would offer to lowercase your styles that weren’t case sensitive (IDs). He added nothing, he removed nothing. So – temporary guys, just temporary. I can only stand so much of this before my brain explodes. The code below validates.
I’ve had so many people complain about my “overuse” of Latin placeholder text I decided to try something a little different: Shakespeare.
This is the first time I’ve tried this. At first I was going to go Will Lite and stick with his most popular quotes (Brevity is the soul of wit; My Horse My Horse, my Kingdom ~ etc.) but the problem is . . . I love Shakespeare so much it’s impossible to just nibble when the man is an unparalleled banquet of the best writing in the English language ever. It will more than satisfy our need to get to a Viewport design. And I can use it again.
The other thing I’m uploading is a little graphical representation of the box that used to be Style FIVE and is now rechristened as THREE. It’s hard to explain this so refer to the graphic: THREE needs to sit at the base of RNDBDR2’s border-radius container frame’s BOTTOM OUTSIDE EDGE whenever the content of COLUMN-A is deficient to place it there coincidentally. In other words: the baseline. There can be a little or a lot of data in COLUMN-A – this anchors THREE when there isn’t enough data to push it down there on its own.
If you can get me there generally I should be able to modify the pixels to get it perfect. See my graphic to understand precisely what I mean. In the event the data in COLUMN-A is really full, THREE can hang lower – much lower if necessary – than the total height of RNDBDR1. That’s okay. A short COLUMN-B is not the problem; a short COLUMN-A is. And both RNDBDRs are Flexboxes so it should be the kind of easy coding Flex was made for. THREE needs a top margin of 70px permanently. Like I said, get me there generally and I’ll fool around with the pixels to get it perfect. —s
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1080, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<TITLE>VIEWPORT 99 ᰄ semicodin</TITLE>
<STYLE>
HTML, BODY {
/* not representing these as 'rems' because they are factors */
text-size-adjust: 100%;
font-size: 16px; /* factor expressed in px setting the basis for rem */
line-height: 16px; /* factor expressed in px setting the basis for rem */
}
BODY {
margin: 2.13rem 0 0;
padding: 0;
width: 100%;
font-family: 'solway', cursive;
}
#TWOCOLUMNS {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 1.88rem;
}
#COLUMN-A {
width: 41%;
}
#COLUMN-B {
width: 59%;
}
#RNDBDR1 {
border-radius: 1.56rem;
border: .63rem solid black;
padding: .56rem;
width: auto;
}
#RNDBDR2 table {
width: 100%;
border-bottom: none; /* DO NOT REMOVE */
}
#RNDBDR2 th {
border-radius: .31rem .31rem 0rem 0rem;
/* TOP-LEFT + TOP-RIGHT + BOTTOM-RIGHT + BOTTOM-LEFT */
}
#RNDBDR2 tr:last-child td {
border-bottom: none; /* DO NOT REMOVE */
}
#RNDBDR2 {
background-color: WHITE;
border-radius: .63rem;
border: .31rem SOLID BLACK;
padding: 0rem;
color: black;
border-collapse: collapse;
width: AUTO;
margin-top: .94rem;
margin-left: 0rem;
margin-right: 0rem;
font-weight: 400;
font-family: 'Roboto Condensed', sans-serif;
}
TABLE, TH, TD {
border-collapse: collapse;
border-bottom: .14rem SOLID BLACK;
}
TH {
background-color: #E3F0FF;
border-bottom: .14rem SOLID BLACK;
padding: .31rem;
border-collapse: collapse;
width: 100%;
margin-left: 0rem;
margin-right: 0rem;
color: black;
text-align: center;
font-size: 1.63rem;
line-height: 1.05;
font-style: ITALIC;
font-weight: BOLD;
font-family: 'Crete Round', cursive;
}
TABLE .LEFTINTRO {
padding-top: .1rem;
text-align: CENTER;
color: #666666;
font-style: ITALIC;
font-size: .81rem;
line-height: 1;
margin-left: 0px;
margin-right: .13rem;
font-weight: 400;
font-family: 'Crete Round', cursive;
}
TABLE .LEFTCOL {
padding-top: .1rem;
text-align: right;
color: #686868;
font-size: 1.19rem;
line-height: 1;
margin-left: 0px;
margin-right: .13rem;
font-weight: 500;
font-family: 'Roboto', sans-serif;
}
TABLE .RIGHTCOL {
padding-top: .1rem;
text-align: left;
color: black;
font-size: 1.19rem;
line-height: 1;
margin-right: 1rem;
font-weight: 500;
font-family: 'Roboto', sans-serif;
}
#INDENT {
margin-top: .38rem;
margin-left: .38rem;
}
img {
padding-left: 70px;
padding-top: 20px; /* expressed as PX because rems not accurate! */
padding-bottom:8px;
width: 42px;
height: 40px;
}
.ONE {
text-align: left;
margin-bottom: .75rem;
color: #535353;
font-size: 1.63rem;
line-height: 1;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
.TWO {
color: dodgerblue;
text-align: left;
margin-top: .69rem; /* was 11px */
margin-bottom: 4.38rem;
font-size: 1.63rem;
line-height: 1;
font-weight: 500;
font-family: 'Fira Sans Condensed', sans-serif;
}
.THREE {
width: 80%;
margin-top: 70px;
padding: .38rem .63rem .38rem .5rem;
text-align: CENTER;
font-style: OBLIQUE;
background-color: MAROON; /* #CCCCCC */
color: WHITE; /* #353535 */
font-size: 1.13rem;
line-height: 1.1;
font-weight: 600;
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#FOUR {
width: 100%;
border: none;
color: BLACK;
text-align: left;
font-size: 1.22rem;
line-height: 1.02;
font-weight: 600;
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#FIVE {
width: 100%;
border: none;
color: BLACK;
text-align: LEFT;
font-size: 1.22rem;
line-height: 1.02;
font-weight: 600;
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#SIX {
width: 100%;
border: none;
color: BLACK;
text-align: LEFT;
font-size: 1.22rem;
line-height: 1.02;
font-weight: 600;
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#SEVEN {
width: 100%;
border: none;
color: BLACK;
text-align: LEFT;
font-size: 1.22rem;
line-height: 1.02;
font-weight: 600;
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
.EIGHT {
margin-top: .63rem;
margin-bottom: .93rem;
color: #828282;
text-align: left;
font-size: 1.13rem;
line-height: 1;
font-weight: 500;
font-family: 'Fira Sans Condensed', sans-serif;
}
#NINE {
margin-left: 5%;
margin-right: 5%;
color: BLACK;
text-align: left;
font-size: 1rem;
line-height: 1;
font-weight: 500;
font-family: 'Solway', cursive;
}
#TEN {
margin-top: 3rem;
margin-left: 5%;
margin-right: 5%;
color: BLACK;
text-align: left;
font-size: 1rem;
line-height: 1;
font-weight: 500;
font-family: 'Solway', cursive;
}
/* THE WITCHES! */
.MAROON {
color: maroon;
margin-top: 24px;
font-size: 2.25rem;
line-height: 1.1;
font-weight: 800;
font-family: 'Solway', cursive;
}
.MAROONDD {
color: maroon;
margin-left: 13%;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 800;
font-family: 'Solway', cursive;
}
.ONCE {
margin-left: 13%;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL10-5 {
font-size: .63rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL12-5 {
font-size: .75rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL14-5 {
font-size: .88rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL15-5 {
font-size: .94rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL16-5 {
font-size: 1rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL18-5 {
font-size: 1.13rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.GROOVYB {
width: 100%;
padding: 0;
margin-top: 1.3rem;
margin-bottom: 3rem;
border-top: .88rem GROOVE DODGERBLUE;
}
.HILITER {
margin-left: 4.38rem; /* 70px */
margin-top: 1rem;
margin-bottom: .5rem;
color: black;
text-align: left;
font-size: 1.13rem;
line-height: 1.1;
font-weight: 800;
font-family: 'Fira Sans', sans-serif;
}
.HILITEY {
background-color: #FFFFBF;
}
.DBLUE {color: DODGERBLUE}
.DBLUEA {
color: DODGERBLUE;
font-weight: 500;
font-family: 'Fira SansCondensed', sans-serif;
}
.AA {
color: #AAAAAA;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.BB {
color: #999999;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.CC {
color: #777777;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.DD {
color: #555555;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.DOTTY {
margin-left: 5%;
margin-right: 5%;
width: 29.5rem;
border-bottom: .28rem DOTTED BLACK;
color: #333333;
text-align: left;
margin-bottom: 1.88rem;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Solway', cursive;
}
.SOL20-5 {
margin-top: 0px;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL22-5nomar {
margin-top: 0px;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL22-5 {
font-size: 1.38rem;
line-height: 1.02;
font-weight: 500;
font-family: 'Solway', cursive;
}
.SOL22-7 {
font-size: 1.38rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Solway', cursive;
}
.SOL22-8 {
margin-left: 0;
margin-right: 0;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 800;
font-family: 'Solway', cursive;
}
.SOL22-8DD {
margin-left: 13%;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 800;
font-family: 'Solway', cursive;
}
.SOL22-9 {
margin-left: 0;
margin-right: 0;
text-align: left;
font-size: 1.38rem;
line-height: 1.02;
font-weight: 900;
font-family: 'Solway', cursive;
}
.SOL24-8DD {
margin-left: 13%;
text-align: left;
font-size: 1.5rem;
line-height: 1.05;
font-weight: 800;
font-family: 'Solway', cursive;
}
.SOL28-7 {
font-size: 1.75rem;
line-height: 1.05;
font-weight: 700;
font-family: 'Solway', cursive;
}
.FIRA700 {
width: 100%;
border: none;
color: BLACK;
text-align: LEFT;
font-size: 1.44rem;
line-height: .94;
font-weight: 700;
font-family: 'Fira Sans', sans-serif;
}
.TEXT18DD {
margin-left: 4.38rem; /* 70px */
margin-bottom: .63rem;
color: black;
text-align: left;
font-size: 1.13rem;
font-weight: 400;
line-height: 1.1;
font-family: 'Fira Sans Condensed', sans-serif;
}
.TEXT20 {
color: black;
text-align: left;
font-size: 1.25rem;
line-height: 1.05;
font-weight: 500;
font-family: 'Fira Sans Condensed', sans-serif;
}
.TEXT20DD {
margin-left: 4.38rem; /* 70px */
color: black;
text-align: left;
font-size: 1.25rem;
line-height: 1.05;
font-weight: 500;
font-family: 'Fira Sans Condensed', sans-serif;
}
.TEXT20DDb {
margin-left: 4.38rem; /* 70px */
color: black;
text-align: left;
font-size: 1.25rem;
line-height: 1.05;
font-weight: 700;
font-family: 'Fira Sans Condensed', sans-serif;
}
.TEXT22 {
color: black;
text-align: left;
font-size: 1.38rem;
line-height: 1;
font-weight: 500;
font-family: 'Roboto', sans-serif;
}
.TEXT22b {
color: black;
text-align: left;
font-size: 1.38rem;
line-height: 1.1;
font-weight: BOLD;
font-family: 'Roboto', sans-serif;
}
.TEXT24b {
color: black;
text-align: left;
font-size: 1.5rem;
line-height: 1;
font-weight: BOLD;
font-family: 'Roboto', sans-serif;
}
.TEXT24DDb {
margin-left: 1.88rem;
color: black;
text-align: left;
font-size: 1.5rem;
line-height: 1;
font-weight: BOLD;
font-family: 'Roboto', sans-serif;
}
</STYLE>
</HEAD>
<BODY>
<div ID="TWOCOLUMNS">
<div ID="COLUMN-A">
<div class="ONE" style="margin-top: 1.57rem">“Come, you spirits that tend on</div>
<div class="TWO">
<span style="text-decoration: underline;">
“Cry ‘havoc!</span>’</div>
<div class="TEXT24b">
“But, soft! What light through<BR>
yonder window breaks?</div>
<div class="TEXT24DDb">
It is the east,<BR>
and Juliet is the sun.”</div>
<img src="https://lh3.googleusercontent.com/mgGLyS9M0bqfqyz9uRNAZNKUX5jh2YN6HN-J2-pQj8YrjJrFnmcLB8skQVNsXl3P_djlaSBPzYr5ouc_5HsHDk6Ws-43lx5KkzViuFGsUhijtXhMzWhvTUzexNPguxgmJ089WBD8=w42-h40-p-k" alt="">
<div class="TWO">
<span style="text-decoration: underline;">
let slip the dogs of war</span>”</div>
<div class="TEXT24b">
“We are such stuff<br>
as dreams are made on,</div>
<div class="TEXT24DDb">and our little life</div>
<div class="TEXT22">is rounded with a sleep.”</div>
<div class="THREE">
“Methought I heard a voice cry ‘Sleep no more! Macbeth does murder sleep,’ the innocent sleep, sleep that knits up the ravell’d sleeve of care, the death of each day’s life . . . ”
</div>
</div> <!-- CLOSING COLUMN-A -->
<div ID="COLUMN-B"> <!-- STARTING COLUMN-B -->
<div ID="RNDBDR1"> <!-- STARTING #RNDBDR1 -->
<div class="ONE" style="margin-top: 6px">mortal thoughts, unsex me here . . .”</div>
<div class="TEXT22b">
“Till then sit still, my soul:</div>
<div class="TEXT20">
foul deeds will rise,<BR>
though all the earth o’erwhelm them, to men’s eyes.”
</div>
<div class="HILITER">
<span style="background-color: #FFFFBF">
“O God, I could be bounded in a nutshell,<BR>
and count myself a king of infinite space,<BR>
were it not that I have bad dreams.”</span></div>
<div class="TEXT20DD">
“Great reason why: Lest I revenge. <span style="font-weight: 700">What, myself upon myself? Alack. I love myself.</span> Wherefore? for any good that I myself have done unto myself? <span style="font-weight: 700">O, no! alas, I rather hate myself for hateful deeds committed by myself!</div>
<div class="TEXT18DD">
I am a villain: yet I lie. I am not. <span style="color: maroon">Fool, of thyself speak well:</span> fool, do not flatter. My conscience hath a thousand several tongues, and every tongue brings in a several tale, and every tale condemns me for a villain.</div>
<TABLE ID="FOUR">
<TR><TD style="border: none">
“As flies to wanton boys, are we to the gods. They kill us for their sport.”
</TD>
</TR>
</TABLE>
<TABLE ID="FIVE">
<TR><TD style="border: none">
“If you prick us, do we not <span class="DBLUEA">bleed</span>? . . . <span class="HILITEY">If you poison us, do we not DIE?</span>”
</TD>
</TR>
</TABLE>
<TABLE ID="SIX">
<TR><TD style="border: none">
“I, that am rudely stamp’d, <span class="DBLUEA">deformed</span>, unfinish’d, scarce half made up”
</TD>
</TR>
</TABLE>
<TABLE ID="SEVEN">
<TR><TD style="border: none">
“What – you dote thus on such luggage? Let’s alone and do the <span class="DBLUE">murder</span>.”
</TD>
</TR>
</TABLE>
<div class="EIGHT">
<span class="DBLUE">
ᐞ</span>“You taught me language; and my profit on’t is, I know how to curse. The <span style="color:#424242">red plague rid you</span> for learning me your language!”
</div>
<DIV ID="RNDBDR2">
<TABLE>
<THEAD>
<TR>
<TH colspan="2">
“The time is out of joint: O cursed spite,<br>
That ever I was born to set it right!”
</TH>
</TR>
</THEAD>
<TBODY>
<tr>
<td colspan="2"><div class="LEFTINTRO">
By the pricking of my thumbs, something wicked this way comes . . .</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
</div></td>
<td><div class="RIGHTCOL"> </div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
When shall we three</div></td>
<td><div class="RIGHTCOL">meet again?</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
In thunder, lightning,</div></td>
<td><div class="RIGHTCOL">or in rain?</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
When the hurly-burly’s</div></td>
<td><div class="RIGHTCOL">done,</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
When the battle’s</div></td>
<td><div class="RIGHTCOL">lost and won.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
That will be ere</div></td>
<td><div class="RIGHTCOL">the set of sun.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
Where the place?</div></td>
<td><div class="RIGHTCOL">Upon the heath.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
There to meet with</div></td>
<td><div class="RIGHTCOL">Macbeth.</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
Fair is foul,</div></td>
<td><div class="RIGHTCOL">and foul is fair:</div></td>
</tr>
<tr>
<td><div class="LEFTCOL">
Hover through the fog</div></td>
<td><div class="RIGHTCOL">and filthy air.</div></td>
</tr>
</TBODY>
</TABLE>
</DIV> <!-- CLOSING RNDBDR2 -->
</DIV> <!-- CLOSING RNDBDR1 -->
</DIV> <!-- CLOSING COLUMN-B -->
</DIV> <!-- CLOSING TWOCOLUMNS -->
<div class="GROOVYB"></div>
<div ID="NINE">
<div class="SOL22-9">“To-morrow,</div>
<div class="SOL22-7">and to-morrow,</div>
<div class="SOL22-5">
and to-morrow, creeps in this petty pace from day to day to the last syllable of recorded time, and all our yesterdays have lighted fools the way to dusty death. Out, out, brief candle! Life’s but a walking shadow, a poor player that struts and frets his hour upon the stage and then is heard no more:
</div>
<div style="margin-top: .88rem"></div>
<div class="SOL22-8DD">
<span class="HILITEY">It is a tale told by an idiot,</span>
</DIV> <!-- CLOSING SOL22-8DD -->
<div class="SOL24-8DD">
full of sound and fury,
</DIV> <!-- CLOSING SOL24-8DD -->
<div class="SOL28-7">signifying nothing.”</div>
<div style="margin-top: 24px"></div>
<div class="SOL22-5">
“To be, or not to be: that is the question. Whether ’tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them? To die: to sleep; <span style="font-weight: 800">no more</span>; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, ’tis a consummation devoutly to be wish’d. To die, to sleep; to sleep, perchance to dream, ay, there’s the rub; for in that sleep of death what dreams may come when we have shuffled off this mortal coil . . .”
</DIV> <!-- CLOSING SOL22-5 -->
<div class="MAROON">“Thrice</div>
<div class="MAROONDD">the brinded cat hath mew’d.</div>
<div class="ONCE">
Thrice and once the hedge-pig whined. <i>Harpier cries ’tis time, ’tis time.</i>
</DIV> <!-- CLOSING ONCE -->
<div class="WITCHES">
Round about the cauldron go; <i>in the poison’d entrails throw. </i>
<span class="SOL18-5">
Toad, that under cold stone days and nights has thirty-one swelter’d venom sleeping got, <i>boil thou first i’ the charmed pot.</i> Double, double toil and trouble; <i>fire burn, and cauldron bubble.</i> </span>
<span class="SOL16-5">
Fillet of a fenny snake, <i>in the cauldron boil and bake;</i> eye of newt and toe of frog, <i>wool of bat and tongue of dog,</i> adder’s fork and blind-worm’s sting, <i>lizard’s leg and owlet’s wing,</i> </span>
<span class="SOL15-5">
for a charm of powerful trouble, <i>like a hell-broth boil and bubble.</i>
Double, double toil and trouble; <i>fire burn and cauldron bubble.</i> Scale of dragon, tooth of wolf, <i>witches’ mummy, maw and gulf</i> </span>
<span class="SOL14-5">
of the ravin’d salt-sea shark, <i>root of hemlock digg’d i’ the dark,</i> liver of blaspheming jew, <i>gall of goat, and slips of yew</i> silver’d in the moon’s eclipse, <i>nose of turk and tartar’s lips,</i> </span>
<span class="SOL12-5">
finger of birth-strangled babe ditch-deliver’d by a drab, <i>make the gruel thick and slab:</i> Add thereto a tiger’s chaudron, <i>for the ingredients of our cauldron.</i> </span>
<span class="SOL10-5">
Double, double toil and trouble; <i>fire burn and cauldron bubble.</i> Cool it with a baboon’s blood, <span style="color: maroon"><i>then the charm is firm and good.”</i></span></span>
</DIV> <!-- CLOSING WITCHES -->
</DIV> <!-- CLOSING NINE ID -->
<div ID="TEN">
<div class="AA">
“The first thing we do, let’s kill all the lawyers.”</div>
<div class="BB">
“Now is the winter of our discontent.”</div>
<div class="CC">
“Brevity is the soul of wit.”
</div>
<div class="DD">
“This thing of darkness I acknowledge mine.”</div>
</DIV> <!-- CLOSING TEN ID -->
<div class="DOTTY">
“This above all: to thine own self be true.”
</DIV> <!-- CLOSING DOTTY -->
</BODY>
</HTML>
It will never be hosted anywhere nor seen by anyone but me. I would like the code to use this tag but I’ll revert to my 1080 if there is no other way to express this because it looks great with it.
