<div class="container"> <!-- Content container -->
<!-- Page Title -->
<section class="title">
<div class="row-break">
<div class="col c" style='margin-right: 3rem;'>
<h1><i class="fas fa-universal-access fa-2x"></i></h1>
</div>
<div class="col b">
<h1>The News Letter</h1>
<h2>A Company's Monthly Newsletter</h2>
</div>
</div>
</section>
<!-- End Page Title -->
<!-- Section -->
<section class="">
<header>
<h2><i class="fas fa-universal-access"></i> Some Info <i class="fas fa-universal-access"></i></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</header>
<div class="">
<h3>Section Subtitle</h3>
<ul class='toggleList'>
<li class='row' onclick="togglePara(this)">
<div class='toggle-icon'>
<i class="fas fa-angle-right"></i>
</div>
<div class="li-content flex1">
<p>Click Me!</p>
<div class="paragraph para-closed">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="">
<h3>Another Section Subtitle</h3>
<ul class='toggleList'>
<li class='row' onclick="togglePara(this)">
<div class='toggle-icon'>
<i class="fas fa-angle-right"></i>
</div>
<div class="li-content flex1">
<p>I Expand!</p>
<div class="paragraph para-closed">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</li>
<li class='row' onclick="togglePara(this)">
<div class='toggle-icon'>
<i class="fas fa-angle-right"></i>
</div>
<div class="li-content flex1">
<p>Secrets Are One Click Away...</p>
<div class="paragraph para-closed">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</li>
<li class='row' onclick="togglePara(this)">
<div class='toggle-icon'>
<i class="fas fa-angle-right"></i>
</div>
<div class="li-content flex1">
<p>Click It, Baby!</p>
<div class="paragraph para-closed">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="callout">
<p>Here's some highlighted text so the user doesn't miss it... And a <a href='#' target='_blank'>Link</a>.</p>
</div>
</section>
<!-- End Section -->
<!-- Section -->
<section>
<header>
<h2><i class="fas fa-universal-access"></i> Another Section <i class="fas fa-universal-access"></i></h2>
</header>
<div class="row-break">
<div class="border block">
<h3>Testimonial Quotes</h3>
<div class="quote">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
<p>- Some person</p>
</div>
<div class="quote">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
<p>- Random person</p>
</div>
<div class="quote">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
<p>- Crazy person</p>
</div>
</div>
<div class="border block">
<h3>Some Charts</h3>
<div class="charts row wrap row-space-between">
<img src="https://cdn-images-1.medium.com/max/1600/1*Eq40iwcboRFBMF37oAaM7Q.png" alt="chart1">
<img src="https://cdn-images-1.medium.com/max/1600/1*0JKExPT7qVu_I0OGz2zGAA.png" alt="chart2">
</div>
</div>
</div>
</section>
<!-- End Section -->
<!-- Section -->
<section>
<head>
<h2><i class="fas fa-universal-access"></i> Another Section Title <i class="fas fa-universal-access"></i></h2>
</head>
<div class="">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non porttitor eros. Vivamus non mauris fermentum purus vehicula volutpat eu in nisi. Sed consectetur lorem purus,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non porttitor eros. Vivamus non mauris fermentum purus vehicula volutpat eu in nisi. Sed consectetur lorem purus,</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non porttitor eros. Vivamus non mauris fermentum purus vehicula volutpat eu in nisi. Sed consectetur lorem purus,</li>
</ul>
</div>
</section>
<!-- End Section -->
<!-- Contact Section -->
<section>
<header>
<h2><i class="fas fa-universal-access"></i> Contact Us <i class="fas fa-universal-access"></i></h2>
</header>
<h3>Need more info?</h3>
<div class="row-break">
<div class="contact row block flex1">
<div class="contact-photo" style="background-image: url('http://photos1.blogger.com/blogger/3406/1317/320/Sock%20Monkey%20Portrait.jpg'); !important"></div>
<div class="contact-details">
<p>Name of Person</p>
<p>Position</p>
<p><i class="fas fa-envelope"></i> <a href='mailto:
[email protected]'>
[email protected]</a></p>
</div>
</div>
<div class="contact row block flex1">
<div class="contact-photo" style="background-image: url('https://i.etsystatic.com/5218822/c/720/571/0/12/il/e2d574/1657989469/il_680x540.1657989469_t5he.jpg');"></div>
<div class="contact-details">
<p>Name of Person</p>
<p>Position</p>
<p><i class="fas fa-envelope"></i> <a href='mailto:
[email protected]'>
[email protected]</a></p>
</div>
</div>
<div class="contact row block flex1">
<div class="contact-photo" style="background-image: url('https://thumbs.dreamstime.com/z/sock-monkey-layout-close-shot-playing-peek-boo-their-hand-covering-its-eyes-43124023.jpg');"></div>
<div class="contact-details">
<p>Name of Person</p>
<p>Position</p>
<p><i class="fas fa-envelope"></i> <a href='mailto:
[email protected]'>
[email protected]</a></p>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
<footer class='row text-grey b'>
<div class="flex1 col c">
<p>Edition 1</p>
</div>
<div class='flex1 text-right'>
<img src="https://tjstoll.github.io/images/logo.svg" width='40px' alt="tjstoll">
</div>
</footer>
</div> <!-- End Content Container -->
@charset "UTF-8";
.bg-red {
background: #800000;
color: white; }
.bg-grey {
background: #4d4d4d;
color: white; }
.bg-yellow {
background: #f3BE26;
color: black; }
.text-red {
color: #800000; }
.text-grey {
color: grey; }
body {
font-family: 'Georgia', serif;
margin: 0;
background: #f2f2f2;
font-size: 14px; }
h1, h2, h3, p {
margin: 0;
margin-bottom: 0.5rem; }
h2 {
color: #4d4d4d;
text-align: center; }
section {
border-bottom: 1px solid #cccccc;
padding: 2rem 0;
margin: 0rem 4rem 0 4rem; }
header {
padding-bottom: 1.5rem; }
header p {
text-align: center; }
ul {
margin: 0; }
li {
padding: 0.5rem 1rem; }
footer {
padding: 0.5rem 0;
margin: 0rem 4rem 0 4rem; }
footer p {
margin: 0; }
@media only screen and (max-width: 900px) {
section {
margin: 0rem 2rem 0 2rem; }
footer {
margin: 0 2rem 0 2rem; } }
@media print {
body {
background: none; }
section {
margin: 0; } }
.container {
max-width: 55rem;
margin: auto;
background: white;
overflow: hidden; }
.row, .row-break {
display: flex;
flex-direction: row; }
.row > .block, .row-break > .block {
margin-right: 1rem; }
.row .block:last-child, .row-break .block:last-child {
margin-right: 0; }
.col {
display: flex;
flex-direction: column; }
.col > .block {
margin-bottom: 1rem; }
.col .block:last-child {
margin-bottom: 0; }
.block {
flex: 1;
box-sizing: border-box; }
.wrap {
flex-wrap: wrap; }
.flex1 {
flex: 1; }
.flex2 {
flex: 2; }
.flex3 {
flex: 3; }
.b {
justify-content: flex-end; }
.c {
justify-content: center; }
.col-space-between {
justify-content: space-between; }
.row-space-between {
align-content: space-between; }
.text-centre {
text-align: center; }
.text-right {
text-align: right; }
@media only screen and (max-width: 900px) {
.container {
margin: 0; }
.row-break {
display: flex;
flex-direction: column; }
.row-break > .block {
margin-right: 0;
margin-bottom: 1rem; }
.row-break .block:last-child {
margin-bottom: 0; } }
@media print {
.conatainer {
margin: 0; }
.row-break {
display: flex;
flex-direction: row; }
.row-break > .block {
margin-right: 1rem; }
.row-break .block:last-child {
margin-right: 0; } }
.title {
padding-top: 0rem;
padding: 2rem 4rem 2rem 4rem;
margin: 0;
border: none;
color: white;
background: url("https://s3.ca-central-1.amazonaws.com/tjstollimages/header1.svg");
background-size: cover; }
.title h1, .title h2 {
text-align: left;
text-shadow: 1px 1px 1px #4d4d4d; }
.title h1 {
font-size: 3rem; }
.title h2 {
color: inherit; }
.callout {
font-style: italic;
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: 10px;
color: white;
background: #800000; }
.callout a {
color: white; }
.callout p {
margin: 0; }
.toggleList {
padding: 0;
margin: 0;
list-style-type: none;
margin-bottom: 2rem; }
.toggleList li {
padding: 0.75rem 1rem 0.25rem 0.75rem;
border: 1px solid #cccccc;
border-radius: 10px;
margin-bottom: 10px; }
.toggleList li::before {
content: none; }
.toggleList li:hover {
cursor: pointer; }
.li-content > p {
color: #800000;
font-style: italic;
font-weight: bolder; }
.para-closed {
display: none; }
.para-open {
display: block; }
.toggle-icon {
margin-right: 1rem;
color: #800000; }
.border {
border-top: 1rem solid #f3BE26;
padding: 1rem;
background: rgba(232, 141, 20, 0.05);
border-radius: 10px; }
.quote {
margin: 0.5rem 2rem;
position: relative;
text-align: center; }
.quote::after {
content: '★★★★★';
color: #D85604; }
.quote p:first-child::before, .quote p:first-child::after {
color: #D85604;
font-size: 1.5rem; }
.quote p:first-child::before {
content: '“'; }
.quote p:first-child::after {
content: '”'; }
.quote p:last-child {
text-align: right;
color: #D85604; }
.charts img {
width: 100%;
height: 100%;
margin-bottom: 1.5rem; }
.charts img:last-child {
margin-bottom: 0; }
.contact {
padding: 1rem;
border-radius: 5px;
border-top: 0.5rem solid #D85604;
background: rgba(216, 86, 4, 0.05); }
.contact:last-child {
margin-right: none; }
.contact-photo {
height: 40px;
width: 40px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 50px;
border: 1px solid #4d4d4d;
margin-right: 1rem; }
.contact-details p:nth-child(1) {
font-weight: bold; }
.contact-details p:nth-child(2) {
font-style: italic;
color: #D85604; }
.contact-details a {
text-decoration: none;
color: #4d4d4d; }
.contact-details i {
color: #4d4d4d; }
@media only screen and (max-width: 900px) {
.charts img {
width: 45%;
height: 45%;
margin-bottom: 0;
margin-right: 1.5rem; }
.charts img:last-child {
margin-right: 0; } }
@media only screen and (max-width: 600px) {
.charts img {
width: 100%;
height: 100%;
margin-bottom: 1.5rem; }
.charts img:last-child {
margin-bottom: 0; } }
@media print {
.para-closed {
display: block; } }
function togglePara(elem) {
// Open/Close the specific paragraph
para = elem.getElementsByClassName('paragraph')[0];
paraState = para.classList;
arrowState = elem.getElementsByClassName('fas')[0].classList;
if (paraState[1] == 'para-closed') {
// Open
arrowState.remove('fa-angle-right');
arrowState.add('fa-angle-down');
paraState.remove('para-closed');
paraState.add('para-open');
} else {
// Close
arrowState.remove('fa-angle-down');
arrowState.add('fa-angle-right')
paraState.remove('para-open');
paraState.add('para-closed');
}
}
function toggleAllItems(elem) {
// Open/Close all of the paragraphs
items = document.getElementsByClassName('paragraph');
arrowState = elem.getElementsByClassName('fas')[0].classList;
if (arrowState[1] == 'fa-angle-down') {
arrowState.remove('fa-angle-down');
arrowState.add('fa-angle-up');
Array.from(items).forEach(function(item) {
item.classList.remove('para-closed');
item.classList.add('para-open');
});
} else {
arrowState.remove('fa-angle-up');
arrowState.add('fa-angle-down')
Array.from(items).forEach(function(item) {
item.classList.remove('para-open');
item.classList.add('para-closed');
});
};
}