-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample-blog.html
171 lines (170 loc) · 10.7 KB
/
example-blog.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
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='./css/main.css'>
<link href="https://fonts.googleapis.com/css?family=Merriweather+sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<div class='grid'></div>
<div class='full-width-section' style='min-height:216px'>
<div class='container vertical-center'>
<div class='row vertical-center'>
<div class='column align-items-left'>
<h1>A Distraction Free Blog Design</h1>
<div class='text-content'>Share your thoughts with the world.</div>
</div>
</div>
</div>
</div>
<div class='full-width-section'>
<div class='container'>
<div class='row'>
<div class='column width-50'>
<img src='./img/img01.jpeg' class='gutter-margin_bottom' height='400'>
<p class='heading-title text-secondary text-uppercase'>Featured</p>
<h2 class='strong'>First Mover Advantage</h2>
<p class='text-content'>Innovate Steve Jobs pivot prototype entrepreneur integrate cortado workflow. Agile pivot integrate quantitative vs. qualitative human-centered design venture capital quantitative vs. qualitative user centered design agile entrepreneur. Bootstrapping affordances experiential cortado actionable insight ideate thought leader food-truck user story. Grok quantitative vs. qualitative agile prototype user centered design hacker hacker agile driven pitch deck disrupt minimum viable product.</p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user01.jpg');width:45px;height:45px;background-size:cover;" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Sarah Baker</span>
<span class='text-secondary text-s'>Marketing Specialist</span>
</div>
</div>
</div>
<div class='column width-50'>
<img src='./img/img03.jpeg' class='gutter-margin_bottom' height='400'>
<p class='heading-title text-secondary text-uppercase'>Breaking news</p>
<h2 class='strong'>Gamification Mass Market</h2>
<p class='text-content'>IPhone crowdfunding niche market equity research & development long tail direct mailing traction business-to-consumer handshake. Ramen startup low hanging fruit analytics seed round termsheet pivot creative pitch stock assets client social proof. Lean startup iPhone deployment focus technology niche market validation accelerator iPad graphical user interface entrepreneur business plan. Focus angel investor incubator deployment agile development.</p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user02.jpeg');width:45px;height:45px;background-size:cover" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Ted Stevens</span>
<span class='text-secondary text-s'>Frontend Developer</span>
</div>
</div>
</div>
</div>
<div class='horizontal-divider gutter-margin_top2'></div>
<div class='row space-around'>
<div class='column align-items-center'>
<h2 class='strong'>425</h2>
<p class='text-content'>Posts</p>
</div>
<div class='column align-items-center'>
<h2 class='strong'>15%</h2>
<p class='text-content'>Growth</p>
</div>
<div class='column align-items-center'>
<h2 class='strong'>1574</h2>
<p class='text-content'>Comments</p>
</div>
<div class='column align-items-center'>
<h2 class='strong'>10</h2>
<p class='text-content'>Alerts</p>
</div>
<div class='column align-items-center'>
<h2 class='strong'>544</h2>
<p class='text-content'>Messages</p>
</div>
</div>
<div class='horizontal-divider gutter-margin_top2'></div>
<div class='row gutter-margin_bottom'>
<div class='column width-33'>
<img src='./img/img04.jpeg' class='gutter-margin_bottom' height='270'>
<p class='heading-title text-secondary text-uppercase'>Investment</p>
<h2>Business Model Idea</h2>
<p class='text-content'>Business model canvas niche market direct mailing responsive web design beta branding partnership android lean startup freemium business-to-business.</p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user03.jpeg');width:45px;height:45px;background-size:cover" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Sam Nolan</span>
<span class='text-secondary text-s'>Investor & Founder</span>
</div>
</div>
</div>
<div class='column width-33'>
<img src='./img/img05.jpeg' class='gutter-margin_bottom' height='270'>
<p class='heading-title text-secondary text-uppercase'>Business</p>
<h2>Funding Termsheet</h2>
<p class='text-content'> Supply chain lean startup research & development business model canvas investor traction pivot MVP non-disclosure agreement agile development iPad.</p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user02.jpeg');width:45px;height:45px;background-size:cover" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Ted Stevens</span>
<span class='text-secondary text-s'>Frontend Developer</span>
</div>
</div>
</div>
<div class='column width-33'>
<img src='./img/img06.jpeg' class='gutter-margin_bottom' height='270'>
<p class='heading-title text-secondary text-uppercase'>Business</p>
<h2>Buyer Hackathon</h2>
<p class='text-content'>Infrastructure return on investment deployment assets lean startup bandwidth conversion. Strategy rockstar business model canvas launch party validation crowdfunding.</p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user01.jpg');width:45px;height:45px;background-size:cover" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Sarah Baker</span>
<span class='text-secondary text-s'>Marketing Specialist</span>
</div>
</div>
</div>
</div>
<div class='row gutter-margin_bottom'>
<div class='column width-33'>
<img src='./img/img07.jpeg' class='gutter-margin_bottom' height='270'>
<p class='heading-title text-secondary text-uppercase'>Guides</p>
<h2>Beta Partnership</h2>
<p class='text-content'> Seed round bootstrapping advisor android analytics incubator termsheet social media founders validation. Infrastructure mass market direct mailing. </p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user01.jpg');width:45px;height:45px;background-size:cover" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Sarah Baker</span>
<span class='text-secondary text-s'>Marketing Specialist</span>
</div>
</div>
</div>
<div class='column width-33'>
<img src='./img/img09.jpeg' class='gutter-margin_bottom' height='270'>
<p class='heading-title text-secondary text-uppercase'>Featured</p>
<h2>Social Media Venture</h2>
<p class='text-content'>Product management traction customer buzz responsive web design advisor. Return on investment product management client handshake interaction design stealth.</p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user03.jpeg');width:45px;height:45px;background-size:cover" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Sam Nolan</span>
<span class='text-secondary text-s'>Investor & Founder</span>
</div>
</div>
</div>
<div class='column width-33'>
<img src='./img/img10.jpeg' class='gutter-margin_bottom' height='270'>
<p class='heading-title text-secondary text-uppercase'>Investment</p>
<h2>Investor Series A</h2>
<p class='text-content'>Success customer ownership burn rate. Founders graphical user interface facebook twitter ramen user experience focus niche market holy grail startup direct mailing accelerator.</p>
<div class='row vertical-center' style='padding-top:8px'>
<div style="background:url('/img/user01.jpg');width:45px;height:45px;background-size:cover" class='img-round'></div>
<div class='column vertical-center' style='padding-left:16px'>
<span class='text-primary strong' style='margin-bottom:0'>Sarah Baker</span>
<span class='text-secondary text-s'>Marketing Specialist</span>
</div>
</div>
</div>
</div>
<div class='row align-items-center'>
<button class='btn-outlined_text-primary'>Load More Articles</button>
</div>
<div class='horizontal-divider gutter-margin_top2 gutter-margin_bottom'></div>
<div class='row text-secondary' style='margin-top:0'>
<span class='gutter-margin_right'>Getting Started</span>
<span class='gutter-margin_right'>Help</span>
<span class='gutter-margin_right'>Terms</span>
<span class='gutter-margin_right'>About</span>
<span class='gutter-margin_right'>Contact</span>
</div>
</div>
</div>
</body>
</html>