-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
189 lines (153 loc) · 6.17 KB
/
index.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<html>
<head>
<title>Surf & Paddle (a.k.a. Day 2)</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Asap|Oswald:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Main blue image overlay -->
<div class="main-background">
<div class="overlay">
<div class="main-banner">
<div class="header-box">
<div class="logo-image"><img src="./images/logo.png"></div>
<div class="logo-text">Surf & Paddle Co. Blog</div>
<div class="search-icon"><img src="./images/search.png"></div>
<div class="header-search-text">search</div>
<div class="header-about">About</div>
</div>
<div class="headline">
<p>Surf & Paddle Co.</p>
</div>
<div class="headline-subtext">
<p>An Ironyard Academy Project Est. Fall 2013</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="main-text">
<!-- main body left -->
<div class="left-body">
<div class="left-body-header">
a fantastic engaging headline goes here
</div>
<div class="article-author-image"><img src="./images/round-pic-face.png"></div>
<div class="article-author-name">Anne Marie    <span class="gray-text">on <span class="underlines">Monday Oct. 7th 9:22pm</span></span> </div>
<div class="main-body-copy">
<p class="main-body-break">Locavore ea meggings, deep v gentrify bespoke butcher yr typewrite. Nisi sunt 8-bit craft beer, leg gins deep v biodisel Williamsburg. Actually hashtag art party nesciunt squid pour-over. Kitsch Vice cray, Marfa brunch fingerstache officia Schlitz Blue Bottle cilium. Mlkshk 9-bit aliquip fingerstache sunt.</p>
<p>Distillery ad sriracha, synth wolf street art brunch excepteur consectetur art party irony fugiat. Duis chia yr, pour-over Portland velit High life non aesthetic fugiat tattooed shabby <span>chic mixtape</span>.</p>
<blockquote>  woah, that's radical!</blockquote>
<p class="main-body-break">Swag nisi mixtape cray, non hashtag blog tote bag dolor bitters before they sold out ea dolor. Raw denim mixtape drinking vinegar, Vice 3 wolf moon authentic officia aute id. Keffiyeh yr retro, salvia do <a href="#"; class="clicky-clicky">aliqua (rollover)</a> leggings selvage narwhal farm-to-table dolor Tonx DIY photo booth. Bitters gastropub non 3 wolf moon Blue Bottle organic, cray aesthetic jean shorts velit umami. Mlkshk roof party cardigan, farm-to-table aute plaid wolf master cleanse. Thundercats tattooed lo-fi culpa, mollie Pinterest American Apparel. 3 wolf moon VHS hella, Tonx beard chambray sustainable jean shorts synth mlkshk fugiat excepteur bahn mi eu whatever.</p>
<p>Vinyl sartorial culpa bespoke labore, ethical readymade tofu selfies ut locavore commodo mumblecore paleo typewrite. Mumblecore selfies nostrud, asymmetrical 90's fanny pack est Blue Bottle ethnic blog. Narwhal Shoreditch fixie tofu, nisi before</p>
</div>
<div class="main-body-links">
<ul>
<li>
<img src="./images/icon-comment.gif">
<div class="comment">Read Comments
</div>
</li>
<li>  </li>
<li>
<img src="./images/icon-cloud.gif"; id="cloud">
<div class="cloud">Read Later
</div>
</li>
<li> </li>
<li>
<img src="./images/icon-share.gif" id="share">
<div class="share">Share This Post
</div>
</li>
</ul>
</div>
</div>
<!-- main right sidebar -->
<div class="right-sidebar">
<div class="side-bar-logo"><img src="./images/round-pic-face.png">
</div>
<div class="side-bar-name">Anne Marie</div>
<div class="side-bar-contact">
<ul>
<li>Twitter</li>
<li>   </li>
<li>Facebook</li>
<li>   </li>
<li>Instagram</li>
</ul>
</div>
<div class="side-bar-advert"><img src="./images/ad.jpg"> </div>
<div class="side-bar-add-link"><a href="www.google.com">
About This Ad</a>
</div>
<div class="side-bar-section-heading">
<span class="side-bar-text-header">sidebar section heading</span>
<p>Distillery ad sriracha, synth wolf street art brunch excepteur consectetur art party irony fugiat. Duis chia yr, pour-over Portland velit High life non aesthetic fugiat tattooed shabby <span class="underlines">;”>chic mixtape</span>.ethical cornhole mustache roof party proident aesthetic hoodie.</p>
</div>
</div>
</div>
<div class="after-main-text"><p>most popular posts</p></div>
<!-- Bottom page pictures -->
<div class="lower-pic-container">
<a href="#">
<div class="footer-pic-text" style="background-image: url(./images/beer-toast.jpg);">
<div class="lower-pic-overlay">
<div class="lower-pic-text">
another cool post
</div>
</div>
</div>
<a/>
<a href="#">
<div class="footer-pic-text" style="background-image: url(./images/beer-shots.jpg);">
<div class="lower-pic-overlay">
<div class="lower-pic-text">
post title
</div>
</div>
</div>
</a>
<a href="#">
<div class="footer-pic-text" style="background-image: url(./images/beer-taps.jpg);">
<div class="lower-pic-overlay">
<div class="lower-pic-text">
here's another longer post title
</div>
</div>
</div>
</a>
<a href="#">
<div class="footer-pic-text" style="background-image: url(./images/beer-mugs.jpg);">
<div class="lower-pic-overlay">
<div class="lower-pic-text">
oh cool a post!
</div>
</div>
</div>
</a>
</div>
<!-- Footer -->
<div class="footer-container">
<div class="footer">
<div class="footer-image"><img src="images/iron-yard-logo.png">
</div>
<div class="footer-text">
The Ironyard Copyright 2013, All Rights Reserved
</div>
<div class="footer-nav">
<ul>
<li>Nav Item 1</li>
<li> | </li>
<li>Nav Item 2</li>
<li> | </li>
<li>Nav Item 3</li>
<li> | </li>
<li>Nav Item 5</li>
</ul>
</div>
</div>
</div>
</body>
</html>