<!--
Forum question answer only:
https://www.sitepoint.com/community/t/creating-a-new-template-in-html/383694
-->
<div class="wrap">
<header class="header">
<div class="to-section">
<div class="TOFROM"> TO: </div>
<div class="usps"> <span>USPS USPS</span> / </div>
<div class="bigbold">
BIGBOLD<br>
BIGBOLD
</div>
<div class="addressee"> ADDRESSEE
<br> ADDRESSEE
</div>
<div> <img class="fancyamp" src="FANCYAMP_546.png" width="53" height="50" alt=""> </div>
<div class="usps"> <span>2ND USPS HERE</span> / </div>
<div class="bigbold"> bigbold
<br> bigbold
</div>
<div class="addressee">
ADDRESSEE<br>
ADDRESSEE
</div>
</div>
<div class="from-section">
<div class="round">
<p class="tofrom">From:</p>
<p class="bigbold">Bigbold</p>
<div class="addressee">
ADDRESSEE<br>
ADDRESSEE
</div>
<p class="little">Little Little Little Little Little </p>
<table class="from-data">
<tbody>
<tr>
<td>
<div class="right"> RIGHT-ALIGNED: </div>
</td>
<td>
<div class="left"> LEFT-ALIGNED </div>
</td>
</tr>
<tr>
<td>
<div class="right"> RIGHT-ALIGNED: </div>
</td>
<td>
<div class="left"> LEFT-ALIGNED </div>
</td>
</tr>
<tr>
<td>
<div class="right"> RIGHT-ALIGNED: </div>
</td>
<td>
<div class="left"> LEFT-ALIGNED </div>
</td>
</tr>
<tr>
<td>
<div class="right"> RIGHT-ALIGNED: </div>
</td>
<td>
<div class="left"> LEFT-ALIGNED </div>
</td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
<tr>
<td colspan="2"> OUT OF THE COLUMN NOW (align-left) </td>
</tr>
</tbody>
</table>
</div>
</div>
</header>
</div>
<hr class="groovy">
<div class="wrap">
<div class="nolo"> <span class="nolobig">
Unlike most of the text
</span> in this document, this block is exclusively in ITALICIZED SERIF, all CENTERED with a 10% MARGIN (the standard 4% used throughout the Body with an additional 6%). If you notice the effect I'm trying to achieve however is the first few words appearing BIGGER + BOLDED using the > SAME LINE HEIGHT and able to accommodate the TOP BORDER which should breach the 4% MARGINS to span 100% of the width of the page. </div>
<main>
<div class="main">
<h1>Start of the BODY of the letter</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Orci nulla pellentesque dignissim enim. Integer eget aliquet nibh praesent tristique magna sit amet. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Auctor augue mauris augue neque gravida in fermentum et. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Aliquet bibendum enim facilisis gravida. Bibendum arcu vitae elementum curabitur vitae nunc. Congue eu consequat ac felis donec et odio pellentesque diam. Ac feugiat sed lectus vestibulum mattis ullamcorper velit. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Vitae tempus quam pellentesque nec. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. In eu mi bibendum neque. Arcu ac tortor dignissim convallis aenean et tortor at risus. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum.</p>
</div>
</main>
</div>
/*
Forum question answer only:
https://www.sitepoint.com/community/t/creating-a-new-template-in-html/383694
*/
html,
body {
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-size: 1.125rem;
line-height: 1.2;
padding: 50px 0;
}
.wrap {
max-width: 1980px; /* adjust to suit */
margin: auto;
padding: 10px 4%;
}
.header {
display: flex;
align-items: flex-start;
}
.to-section {
flex: 1 0 45%;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.from-section {
flex: 1 0 55%;
}
.from-data {
width: 100%;
table-layout: fixed;
}
.round {
border-radius: 25px;
border: 10px solid black;
padding: 10px;
}
.tofrom {
text-transform: uppercase;
text-align: left;
color: #8d8d8d;
font-size: 1.75rem;
line-height: 1;
margin: 0;
}
.usps {
font-size: 1rem;
line-height: 1;
color: dodgerblue;
margin: 20px 0 10px;
}
.usps span {
text-decoration: underline;
}
.fancyamp {
display: block;
margin: 50px auto;
}
.little {
font-size: 1rem;
line-height: 1;
color: dodgerblue;
margin: 10px 0 20px;
text-transform: uppercase;
}
.bigbold {
font-size: 1.375rem;
line-height: 1;
font-weight: bold;
color: black;
margin: 10px 0 5px;
text-transform: uppercase;
}
.addressee {
font-size: 1.175rem;
line-height: 1;
color: black;
}
.right {
margin-right: 5px;
text-align: right;
color: #8d8d8d;
font-size: 1.375rem;
line-height: 1;
}
.left {
text-align: left;
color: black;
font-size: 1.375rem;
line-height: 1;
}
.groovy {
display: block;
border: none;
background: transparent;
height: 0;
border-top: 20px groove red;
margin: 50px 0 10px;
}
.nolobig {
font-weight: bold;
font-size: 1rem;
line-height: 1;
color: black;
}
.nolo {
margin: 30px 10% 5px 10%;
font-size: 0.75rem;
line-height: 1.2;
color: black;
text-align: center;
font-style: italic;
}
main {
padding: 10px 0;
}
@media screen and (max-width: 780px) {
.header {
display: block;
}
.to-section {
position: static;
margin-bottom: 50px;
}
}
/*
Forum question answer only:
https://www.sitepoint.com/community/t/creating-a-new-template-in-html/383694
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.