BUCK

by toubia95

HTML

<div class="page">
<p>
<span class="title1"><em>A Dictionary of</em><br>
Selected Synonyms</span><br>
<span class="title2"><em>in the</em></span><br>
<span class="title3">principal<br>
indo-european<br>
languages</span><br>
<span class="separator">ӂ</span><br>
<span class="author">By CARL DARLING BUCK</span><br>
<span class="description">Containing more than a thousand semantic groupings<br>
of words in the principal Indo-European languages</span>
</p>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

body {
  padding: 10px;
  font-family: "Cormorant Garamond", serif;
}
.page {
  width: 400px;
  height: 500px;
  padding-top: 10px;
  
  /* background-color: rgba(214, 148, 77, 0.85); */
  background: repeating-linear-gradient(0deg, rgba(214, 148, 77, 0.85), rgba(214, 148, 77, 0.95) 4px, rgba(214, 148, 77, 0.85) 4px, rgba(214, 148, 77, 0.95) 8px);
  color: #4a2000; /* rgba(74, 32, 77, 0.29); */
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.title1 {
  font-size: 44px;
  line-height: 60px;
  font-weight: 500;
}
.title2 {
  font-size: 38px;
  line-height: 48px;
  font-weight: 400;
}
.title3 {
  font-size: 56px;
    font-variant-caps: small-caps;
    line-height: 56px;
    font-weight: 600;
}
.separator {
  font-size: 32px;
  line-height: 48px;
  font-weight: 300;
}
.author {
  font-size: 22px;
  line-height: 48px;
  font-weight: 700;
}
.description {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
}