Let me just describe this first. With much help from Paul I was able to create a page with a piece of ancient poetry and in the background, an image (an ancient scroll; a piece of parchment).
What I want to do is carve out a space on top of where the page naturally begins to publish notes on the html, the theme of the page style etc. I don’t know if html already anticipated this and has particular codes that were made for this purpose or whether I should just create one from scratch. Here is what I just dove in to attempt on my own. See the style “notes”. I wanted generous margins for this — there isn’t going to be a huge amount of writing and it will take place on a very benign background of white or ivory.(#ffffee). There may need to be small images by way of explanation (see below, although it blew up in size it is actually small). Another thing is to be able to include links. Here is my brash attempt. Open to thoughts . . .
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, 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=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;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=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<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=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&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">
<title><shape-outside: ellipse> by semicodin ᰄ with Vast Assistance from Paul O’Brien of Sitepoint Forums</title>
<style>
body {
width: 950px;
margin: 0 auto;
font-family: 'roboto slab', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 600;
color: black;
}
#counter {
margin-top: 2.5rem;
text-align: center;
position: absolute;
bottom: 0;
max-width: 100%;
}
.notes {
margin: 5rem;
background-color: #ffffee;
font-style: italic;
text-align: left;
color: black;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
/* ━━━━━━━━━ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ━━━━━━━━━ */
:root {
--tab1color: #ffe5fe;
--tab2color: teal;
--tab3color: #caffff;
--border-color: #000;
/* this one above is the filter color that makes the top border*/
--bottom-border-color: #000;
/* no need to change*/
}
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.25rem;
line-height: 1.5;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {
box-shadow: 0 34px rgb(0, 0, 0, 0.8)
}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://assets.codepen.io/74047/PARCHMENT-A.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr{
pointer-events:none;
}
.ctr a{
pointer-events:initial;
}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {
z-index: 3;
}
.ctrmid {
z-index: 2;
}
.ctr3 {
z-index: 1;
}
.ctr2 .tab:before {
flex: 0 0 65px;
}
.ctr3 .tab:after {
flex: 0 0 65px;
}
/*
.ctr2 .tab span *,
.ctr2 .tablabel3:before {
background: var(--tab1color);
color: #000;
}
.ctr2 .tab:before,
.ctr2 .tab:after {
box-shadow: 0 34px var(--tab1color);
}
.ctr3 .tab span *,
.ctr3 .tablabel3:before {
background: var(--tab3color);
color: #000;
}
.ctr3 .tab:before,
.ctr3 .tab:after {
box-shadow: 0 34px var(--tab3color);
}
*/
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {
z-index: 1;
}
/* ━━━━━━ BACKGROUND & POEM-A ━━━━━━ */
.indent {
margin-left: 6.26rem
}
.tab a {
transform: translateY(-8px);
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
.redlink a:link {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.redlink a:visited {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.leada {
color: black;
margin-top: 3.13rem;
text-align: center;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-align: center;
font-family: 'crete round', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'crete round', serif;
font-weight: 400;
font-size: 2rem;
line-height: 2.5rem;
}
.poem-a {
margin-top: 3.13rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOwNR1n9BJD_duNlaAmcp9BoDYm5xk-k0tBWV70BcThwR3CVkHBHXOFuHk-pHqtEROpyLL8B8314huJJUfMvey2_8iqUPGZlvSt8NSlKERCbdBZbw=w890-h1080');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
}
/* The following is taken directly from CSS Tricks.
I simply parked it here to make it easier for you to edit. */
* {
box-sizing: border-box;
}
p.circle {
clear: both;
margin: 0;
padding: 1rem 0;
}
.circle:before {
content: "";
float: left;
shape-outside: ellipse(50% 36% at left);
width: 111px;
height: 385px;
margin-top: -3rem;
}
.circle2:before {
content: "";
height: 485px;
}
.foot {
color: #ffffee; ?/* ivory */
margin-top: 1rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
</style>
</head>
<body>
<div style="notes">
The <shape-outside: ellipse> is a CSS property that allows you to structure text flow around a user-defined shape. This one happens to be an ellipse. I won’t go into a lot of technical detail about <shape-outside: ellipse> — there are numerous sites you can go to to learn the technique — what I wanted to say is this: You have to bravely go into this with a great deal of patience because this is one of those times where you will be <i>fiddling around</i> with the numbers to get the shape(s) you want.
</div>
<div class="bkdimg tab1active"
<div class="ctr ctr2">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Thomas_Merton">T. Merton</a></span></div>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">Chuang Tzu</a></span></div>
</div>
<div class="ctr ctr3">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">“Zhuangzi”</a></span></div>
</div>
</div>
<div class="parch">
<div class="poem-a">
<div class="leada">
“The Empty Boat”
</div>
<div class="leadb">
From <i>“The Way of Chuang Tzu”</i>
</div>
<div class="leadc">
Translated by Thomas Merton, Trappist Monk<br>
1915-1968
</div>
<div class="twrap1">
<p class="circle">
He who rules men lives in confusion;<br>
He who is ruled by men lives in sorrow.<br>
Yao therefore desired<br>
Neither to influence others<br>
Nor to be influenced by them.<br>
The way to get clear of confusion<br>
And free of sorrow<br>
Is to live with Tao<br>
In the land of the great Void.<br>
</p>
<p class="circle circle2">
If a man is crossing a river<br>
And an empty boat collides with his own skiff,<br>
Even though he be a bad-tempered man<br>
He will not become very angry.<br>
But if he sees a man in the boat,<br>
He will shout at him to steer clear.<br>
If the shout is not heard, he will shout again,<br>
And yet again, and begin cursing.<br>
And all because there is somebody in the boat.<br>
Yet if the boat were empty,<br>
He would not be shouting, and not angry.<br>
</p>
</div>
<div class="indent">
If you can empty your own boat<br>
Crossing the river of the world,<br>
No one will oppose you,<br>
No one will seek to harm you.<br>
</div>
<br>
The straight tree is the first to be cut down,<br>
The spring of clear water is the first to be drained dry.<br>
If you wish to improve your wisdom<br>
And shame the ignorant,<br>
To cultivate your character<br>
And outshine others;<br>
A light will shine around you<br>
As if you had swallowed the sun and the moon:<br>
You will not avoid calamity.<br>
<br>
A wise man has said:<br>
<div class="indent">
“He who is content with himself<br>
Has done a worthless work.<br>
Achievement is the beginning of failure.<br>
Fame is the beginning of disgrace.”
</div>
<br>
Who can free himself from achievement<br>
And from fame, descend and be lost<br>
Amid the masses of men?<br>
He will flow like Tao, unseen,<br>
He will go about like Life itself<br>
With no name and no home.<br>
Simple is he, without distinction.<br>
To all appearances he is a fool.<br>
His steps leave no trace. He has no power.<br>
He achieves nothing, has no reputation.<br>
Since he judges no one<br>
No one judges him.<br>
<br>
<div class="indent">Such is the perfect man:<br>
His boat is empty.
</div>
<br>
<br>
<div class="foot">
[xx. 2.]<br>
[xx. 2, 4.]<br>
114<br>
115
</div>
</div> <!-- Closing POEM-A -->
</div> <!-- Closing PARCH -->
I thought you wanted the div closed. Yes that works. Do you have thoughts as to why none of my margins show?