115 lines
3.7 KiB
HTML
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 »</item>
|
||
|
<item href="#">Just a Plain Link »</item>
|
||
|
<item href="#">Just a Plain Link »</item>
|
||
|
<item href="#">Just a Plain Link »</item>
|
||
|
<item href="#">Just a Plain Link »</item>
|
||
|
<item href="#">Just a Plain Link »</item>
|
||
|
<item href="#">Just a Plain Link »</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>
|