skill-assessment-app/vendor/assets/foundation-emails/templates/sidebar.html
2016-08-21 13:41:47 -05:00

115 lines
3.7 KiB
HTML

<style type="text/css">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
padding-top: 15px;
}
.header .wrapper-inner {
padding: 20px;
}
.header .container {
background: transparent;
}
table.button.facebook table td {
background: #3B5998 !important;
border-color: #3B5998;
}
table.button.twitter table td {
background: #1daced !important;
border-color: #1daced;
}
table.button.google table td {
background: #DB4A39 !important;
border-color: #DB4A39;
}
.wrapper.secondary {
background: #f3f3f3;
}
.sidebar .menu .menu-item {
border-top: 1px solid #777777;
}
</style>
<wrapper class="header">
<container>
<row class="collapse">
<columns small="6">
<img src="http://placehold.it/200x50/663399">
</columns>
<columns small="6">
<p class="text-right">SIDEBAR</p>
</columns>
</row>
</container>
</wrapper>
<container>
<spacer size="16"></spacer>
<row>
<columns large="7">
<h2>Hello, Han Fastolfe</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
<callout class="secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="#">Click It!</a>
</callout>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
<button class="expand" href="#">Click Me!</button>
</columns>
<columns large="5" class="sidebar">
<callout class="secondary">
<h5>Header</h5>
<p class="lead">Sub-header</p>
<menu class="vertical">
<item href="#">Just a Plain Link &raquo;</item>
<item href="#">Just a Plain Link &raquo;</item>
<item href="#">Just a Plain Link &raquo;</item>
<item href="#">Just a Plain Link &raquo;</item>
<item href="#">Just a Plain Link &raquo;</item>
<item href="#">Just a Plain Link &raquo;</item>
<item href="#">Just a Plain Link &raquo;</item>
</menu>
</callout>
<callout class="secondary">
<h6>CONNECT WITH US:</h6>
<button class="facebook expand" href="#">Facebook</button>
<button class="twitter expand" href="#">Twitter</button>
<button class="google expand" href="#">Google+</button>
<p>CONTACT INFO:</p>
<p>Phone: 408-341-0600</p>
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
</callout>
</columns>
</row>
<row>
<columns>
<center>
<menu>
<item href="#">Terms</item>
<item href="#">Privacy</item>
<item href="#">Unsubscribe</item>
</menu>
</center>
</columns>
</row>
</container>