-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
150 lines (142 loc) · 7.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="nav">
<div class="flex" id="navdiv">
<div class="navright flex">
<a id="home" href="#">HOME</a>
<a href="#">PRICE PLANS</a>
<a href="#">BLOG</a>
</div>
<div class="flex sb navleft">
<a href="#">Take a trial</a>
<a href="#">Login</a>
</div>
</div>
</nav>
<div class="container">
<main>
<article class="grid">
<div class="content flex">
<img class="thriveLogo" src="/static/thriveLogo.svg" alt="">
<h1>Running a business is hard.
Luckily you've just found
your wingman...</h1>
<img class="arrow" src="/static/arrowDown.svg" alt="">
</div>
<div class="aside">
<button class="btn">Start your trial</button>
</div>
</article>
<article id="article2" class="grid">
<div class="content flex">
<img class="speechMarks" src="/static/speechMarks.svg" alt="">
<div id="article2div">
<h2>Thrive’s a great assistant and an elegant way to ensure your creative projects run smoothly.</h2>
</div>
<p><b>PHOTOGRAPHER</b> Gerald Foster</p>
</div>
</article>
<article class="grid article3">
<div class="content flex">
<img class="projectimg" src="/static/projects.png" alt="">
</div>
<div class="aside">
<div class="projects">
<h3>MANAGE AND ANALYSE PROJECTS</h3>
<p>Keep up-to-date with your workload, review your performance, analyse percentage of deadlines met and manage your time and tasks. Stay on-top so you can take on more and increase earnings.</p>
</div>
<img class="arrow" src="static/arrowDown.svg">
</div>
</article>
<article class="grid article4">
<div class="content flex">
<div>
<h3>MANAGE AND ANALYSE PROJECTS</h3>
<p>Keep up-to-date with your workload, review your performance, analyse percentage of deadlines met and manage your time and tasks. Stay on-top so you can take on more and increase earnings.</p>
</div>
<img class="arrow" src="static/arrowDown.svg">
</div>
<div class="aside">
<img class="timesheets" src="/static/timesheets.png" alt="">
</div>
</article>
<article class="grid article5">
<div class="content flex">
<img class="invoice" src="/static/invoice.png" alt="">
</div>
<div class="aside">
<div class="projects">
<h3>ENJOY EFFORTLESS, ELEGANT INVOICING</h3>
<p>One-click invoicing means great looking invoices are quick to create and simple to send. Fields are instantly filled out with the necessary details, ready to fire off to clients with a single click, saving time and helping you get paid faster.</p>
</div>
<img class="arrow" src="static/arrowDown.svg">
</div>
</article>
<article class="grid article6">
<div class="content flex">
<img class="expenses" src="/static/expenses.png" alt="">
</div>
<div class="aside">
<div class="projects">
<h3>EASILY TRACK EXPENSES</h3>
<p>OThrive helps you keep an eye on what’s coming in and going out with simple visual metrics. It lets you set up and monitor recurring costs (like rent, hosting and utilities), and easily add random one-off expenses so you can see where money’s going at a glance.</p>
</div>
<img class="arrow" src="static/arrowDown.svg">
</div>
</article>
<article class="grid article7">
<div class="content flex">
<div>
<h3>PRIORITIZE YOUR WORKLOAD</h3>
<p>Milestones and tasks are brought together in one place so you can focus on what to tackle next. Metrics give feedback on your performance helping you bring jobs in on budget and deliver projects on time.</p>
</div>
<img class="arrow" src="static/arrowDown.svg">
</div>
<div class="aside">
<img class="todo" src="/static/todo.png" alt="">
</div>
</article>
<article class="grid article8">
<div class="content flex">
<div>
<h3>PRIORITIZE YOUR WORKLOAD</h3>
<p>Milestones and tasks are brought together in one place so you can focus on what to tackle next. Metrics give feedback on your performance helping you bring jobs in on budget and deliver projects on time.</p>
</div>
<button class="btn">Start Your Free Trial</button>
<img class="arrow" src="static/arrowDown.svg">
</div>
<div class="aside">
<img class="quotes" src="/static/quotes.png" alt="">
</div>
</article>
<article class="grid article9">
<div class="content flex">
<div>
<h3>If you'd like to find out more about Thrive, join our mailing list. We promise we won't bombard you with emails.</h3>
</div>
</div>
<div class="aside">
<div class="aside-top">
As well as building one of the best project management apps, we also have sent pretty cool emails. They’re beautifully designed, full of interesting content including: killer blog posts, user features, partner offers, and more.
</div>
<div class="aside-bottom flex sb">
<button class="btn-dsb">GO ON GIVE US YOUR LOVELY EMAIL</button>
<button class="btn" id="login-btn">LOGIN</button>
</div>
</div>
</article>
<footer>
<img class="thriveLogo" src="/static/thriveLogo.svg" alt="">
</footer>
</main>
</div>
</body>
</html>