-
Notifications
You must be signed in to change notification settings - Fork 4
/
layoutGrid_blackBar_SideBar.html
157 lines (154 loc) · 8.56 KB
/
layoutGrid_blackBar_SideBar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Paul Huxen
License: Creative Commons Attribution-ShareAlike 3.0 Unported License
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grid Sidebar</title>
<style type="text/css">
body {width: 100% !important; padding:0; margin:0; background:#ffffff; text-align:left;}
h1, h2, h3, h4, h5, h6, p, a {margin:0; padding:0}
img { display:block;line-height:0; }
</style>
</head>
<body style="margin:0; padding:0; width:100%; background:#ffffff;">
<table cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;border-collapse:collapse; background:#ffffff; width: 100% !important; padding:0; margin:0; text-align:left;">
<tr>
<td>
<!--
TOP BAR
This is the bar that stretches the whole width of the mailout.
-->
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#171717" style="table-layout:fixed;border-collapse:collapse;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="700px" align="center">
<tr>
<td valign="center">
<h1 style="text-align:left;font-family:Arial,Helvetica,sans-serif;color:#f7f7f7;font-size:22px;line-height:32px;margin-top:5px;margin-bottom:5px;">Project</h1>
</td>
<td valign="center">
<p style="text-align:right;font-family:Arial,Helvetica,sans-serif;color:#a0a0a0;font-size:13px;line-height:21px;">Has this gone a bit Picasso? <a href="#" style="color:#57acd6;text-decoration:none;">View it in your browser</a></p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table><tr><td height="10px"></td></tr></table>
<!--
BODY WRAPPER
This is where you throw ALL your content. How cool is that?
The first table acts like the border around the entire main content
-->
<table cellpadding="0" cellspacing="0" width="700" align="center" style="table-layout:fixed;border-collapse:collapse;background:#eeeeee;">
<tbody>
<tr><td height="3"></td></tr>
<tr>
<td>
<!--
MAIN CONTENT
Beginning of the main content
694px wide
-->
<table cellpadding="0" cellspacing="0" width="694" align="center" style="table-layout:fixed;border-collapse:collapse;background:#fff;border:1px solid #cacaca">
<tr>
<!--
MAIN BAR
Put all your stories in here
-->
<td width="500px" valign="top" >
<table cellpadding="0" cellspacing="0" width="100%" align="center" style="table-layout:fixed;border-collapse:collapse;">
<!--
TOP IMAGE
Throw in a awesome image, here I've used a kitten placeholder
-->
<tr>
<td valign="top" colspan="2" style="border-bottom:1px solid #cacaca;">
<img style="display:block;line-height:0;" alt="title" src="http://placekitten.com/500/300?image=15">
</td>
</tr>
<!--
FIRST STORY
Tell everyone brave tales or stories about kittens
-->
<tr>
<td valign="top" colspan="2" style="padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px">
<h1 style="text-align:left!important;font-family:Arial,Helvetica,sans-serif;color:#242424;font-size:28px;line-height:32px;font-weight:bold;margin-bottom:8px;">Aenean erat neque, cursus sit amet kitty</h1>
<p align="left" style="text-align:left;font-family:Arial,Helvetica,sans-serif;color:#686868;font-size:13px;line-height:21px;">Fusce consectetur pretium ipsum, non vulputate augue euismod ut. Praesent a ipsum turpis. Duis sit amet mauris interdum nibh adipiscing aliquam id id urna. Morbi suscipit nulla auctor diam accumsan dictum. Nunc eleifend accumsan nisl in dictum. Aenean erat neque, cursus sit amet tincidunt vel, vestibulum vitae nunc. Proin sit amet nibh at est congue accumsan. Suspendisse quis enim at mi commodo suscipit nec id eros.
<br />
<a href="#" title="Read more" target="_blank" style="color:#2E74A6;text-decoration:none;font-weight:bold;">Read more »</a></p>
</td>
</tr>
<!--
EXTRA STORIES
-->
<tr>
<td valign="top" style="padding-right:8px;padding-left:15px">
<img style="display:block;line-height:0;" alt="title" src="http://placekitten.com/227/150?image=3">
</td>
<td valign="top" style="padding-right:15px;padding-left:8px;">
<img style="display:block;line-height:0;" alt="title" src="http://placekitten.com/227/150?image=5">
</td>
</tr>
<tr>
<td valign="top" style="padding-top:10px;padding-right:8px;padding-bottom:10px;padding-left:15px">
<h2 style="text-align:left!important;font-family:Arial,Helvetica,sans-serif;color:#242424;font-size:22px;line-height:26px;font-weight:bold;margin-bottom:5px;">Proin sit amet nibh</h2>
<p align="left" style="text-align:left;font-family:Arial,Helvetica,sans-serif;color:#686868;font-size:13px;line-height:21px;">Fusce consectetur pretium ipsum, non vulputate augue euismod ut. Praesent a ipsum turpis. Duis sit amet mauris interdum nibh adipiscing aliquam id id urna. Morbi suscipit nulla auctor <a style="color:#2E74A6;text-decoration:none;font-weight:bold;" href="#">diam accumsan dictum</a>. Nunc eleifend accumsan nisl in dictum. Aenean erat neque, cursus sit amet tincidunt vel, vestibulum vitae nunc. Proin sit amet nibh at est congue accumsan. Suspendisse quis enim at mi commodo suscipit nec id eros.
<br />
<a href="#" title="Read more" target="_blank" style="color:#2E74A6;text-decoration:none;font-weight:bold;">Read more »</a></p>
</td>
<td valign="top" style="padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:8px;">
<h2 style="text-align:left!important;font-family:Arial,Helvetica,sans-serif;color:#242424;font-size:22px;line-height:26px;font-weight:bold;margin-bottom:5px;">Proin sit amet nibh</h2>
<p align="left" style="text-align:left;font-family:Arial,Helvetica,sans-serif;color:#686868;font-size:13px;line-height:21px;">Fusce consectetur pretium ipsum, non vulputate augue euismod ut. Praesent a ipsum turpis. Duis sit amet mauris interdum nibh adipiscing aliquam id id urna. Morbi suscipit nulla auctor <a style="color:#2E74A6;text-decoration:none;font-weight:bold;" href="#">diam accumsan dictum</a>. Nunc eleifend accumsan nisl in dictum. Aenean erat neque, cursus sit amet tincidunt vel, vestibulum vitae nunc. Proin sit amet nibh at est congue accumsan. Suspendisse quis enim at mi commodo suscipit nec id eros.
<br />
<a href="#" title="Read more" target="_blank" style="color:#2E74A6;text-decoration:none;font-weight:bold;">Read more »</a></p>
</td>
</tr>
</table>
</td>
<!--
SIDE BAR
Throw in call to actions, new bits and other nice things
-->
<td valign="top" style="border-left:1px solid #cacaca;background:#f8f8f8;">
<table cellpadding="0" cellspacing="0" width="100%" align="center" style="table-layout:fixed;border-collapse:collapse;">
<!--
FIRST STORY
-->
<tr>
<td valign="top" style="padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px">
<h3 style="text-align:left!important;font-family:Arial,Helvetica,sans-serif;color:#242424;font-size:16px;line-height:22px;font-weight:bold;margin-bottom:5px;">Proin sit amet nibh</h3>
<p align="left" style="text-align:left;font-family:Arial,Helvetica,sans-serif;color:#686868;font-size:13px;line-height:21px;">Fusce consectetur pretium ipsum, non vulputate augue euismod ut. </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="3px"></td></tr>
</tbody>
</table>
<!--
FOOTER
End of main section
-->
<table cellpadding="0" cellspacing="0" width="700px" align="center" style="table-layout:fixed;border-collapse:collapse;">
<tr><td height="10px"></td></tr>
<tr>
<td>
<span style="text-align:left;font-family:Arial,Helvetica,sans-serif;color:#686868;font-size:13px;line-height:21px;">Copyright © Project 2012. All rights reserved.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>