<div class="wrapper-light">
<p>During my researches in the Leviathanic histories, I stumbled upon an ancient Dutch volume, which, by the musty whaling smell of it, I knew must be about whalers. The title was, “Dan Coopman,” wherefore I concluded that this must be the invaluable memoirs of some Amsterdam cooper in the fishery, as every whale ship must carry its cooper. I was reinforced in this opinion by seeing that it was the production of one “Fitz Swackhammer.” But my friend Dr. Snodhead, a very learned man, professor of Low Dutch and High German in the college of Santa Claus and St. Pott’s, to whom I handed the work for translation, giving him a box of sperm candles for his trouble—this same Dr. Snodhead, so soon as he spied the book, assured me that “Dan Coopman” did not mean “The Cooper,” but “The Merchant.”</p>
</div>
<div class="wrapper-dark">
<p>During my researches in the Leviathanic histories, I stumbled upon an ancient Dutch volume, which, by the musty whaling smell of it, I knew must be about whalers. The title was, “Dan Coopman,” wherefore I concluded that this must be the invaluable memoirs of some Amsterdam cooper in the fishery, as every whale ship must carry its cooper. I was reinforced in this opinion by seeing that it was the production of one “Fitz Swackhammer.” But my friend Dr. Snodhead, a very learned man, professor of Low Dutch and High German in the college of Santa Claus and St. Pott’s, to whom I handed the work for translation, giving him a box of sperm candles for his trouble—this same Dr. Snodhead, so soon as he spied the book, assured me that “Dan Coopman” did not mean “The Cooper,” but “The Merchant.”</p>
</div>
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
font-family: "Literata", serif;
overflow: hidden;
color: #222;
}
[class*="wrapper"] {
display: grid;
place-items: center;
width: 50vw;
padding: 40px;
overflow: hidden;
}
p {
line-height: 1.43;
font-size: 20px;
max-width: 640px;
font-weight: 500;
}
.wrapper-dark {
background-color: #111;
color: white;
}
.wrapper-dark p {
font-weight: 400;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.