-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (145 loc) · 5.63 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
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Jott.ly | A simple wiki-like web app</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- This is where your header will begin -->
<div id="header">
<div class="container">
<header class="sixteen columns">
<h1 class="logo">
<a href="#"><img src="images/logo.png" /></a>
</h1>
<nav>
<ul>
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="marketing" class="ten columns offset-by-three">
<h1>An easier way to write & collaborate</h1>
<h2>Edit, post and share content with your peers in a simple way.</h2>
</div>
<div id="screengrab" class="sixteen columns">
<img src="images/screengrab.png" />
</div>
</div>
</div>
<!-- This is where your header will end -->
<!-- This is where the three columns of quick benefits will reside -->
<div id="benefits" class="container">
<div class="one-third column">
<span class="circle"> </span>
<h3>Lorem ipsum dolor sit amet consecuteur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem purus, gravida at
fringilla sit amet, pulvinar a augue. Donec ac dignissim orci. Donec a eros ipsum. Etiam elementum purus nec lorem blandit</p>
</div>
<div class="one-third column">
<span class="circle"></span>
<h3>Lorem ipsum dolor sit amet consecuteur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem purus, gravida at
fringilla sit amet, pulvinar a augue. Donec ac dignissim orci. Donec a eros ipsum. Etiam elementum purus nec lorem blandit</p>
</div>
<div class="one-third column">
<span class="circle"></span>
<h3>Lorem ipsum dolor sit amet consecuteur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem purus, gravida at
fringilla sit amet, pulvinar a augue. Donec ac dignissim orci. Donec a eros ipsum. Etiam elementum purus nec lorem blandit</p>
</div>
</div>
<!-- This is where your benefits end -->
<!-- This is where your first feature begins -->
<div id="feature_one">
<div class="container">
<div class="six columns">
<h4>Lorem ipsum dolor sit amet consecuteur lorem ipsum dolor sit amet consecuteur</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem purus, gravida at
fringilla sit amet, pulvinar a augue. Donec ac dignissim orci. Donec a eros ipsum. Etiam elementum purus nec lorem blandit</p>
</div>
<div class="ten columns">
<img src="images/screengrab2.png" />
</div>
</div>
</div>
<!-- This is the end of your first feature -->
<!-- This is where your second feature begins -->
<div id="feature_two">
<div class="container">
<div class="ten columns">
<img src="images/people.png" />
</div>
<div class="six columns">
<h4>Lorem ipsum dolor sit amet consecuteur lorem ipsum dolor sit amet consecuteur</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem purus, gravida at
fringilla sit amet, pulvinar a augue. Donec ac dignissim orci. Donec a eros ipsum. Etiam elementum purus nec lorem blandit</p>
</div>
</div>
</div>
<!-- This is the end of your second feature -->
<!-- This is where the Email Call-To-Action begins -->
<div id="email">
<div class="container">
<div class="ten columns offset-by-three">
<h5>Want to give it a try?</h5>
<h6>Why not? It’s free to try. Actually, it’s free forever. You never have to pay.</h6>
<form action="">
<!-- Label and text input -->
<input type="text" id="regularInput" />
<button type="submit">Try it for free</button>
</form>
</div>
</div>
</div>
<!-- This is where the Email ends -->
<!-- This is where your footer begins -->
<div id="footer">
<div class="container">
<div class="eight columns">
<nav>
<ul>
<li><a href="#">Home</a></li> /
<li><a href="#">About</a></li> /
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="eight columns right">
<p>© 2013. Jott.ly. All Rights Reserved.</p>
</div>
</div>
</div>
<!-- This is where your footer ends -->
<!-- End Document
================================================== -->
</body>
</html>