Skip to content

Commit 100b228

Browse files
committed
HTML fixes
1 parent 24b9a85 commit 100b228

File tree

2 files changed

+156
-158
lines changed

2 files changed

+156
-158
lines changed

client/templates/home/home.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
header.landing {
1+
header.landing .content {
22
height: 50px;
3+
overflow: auto;
4+
margin: 0;
5+
}
6+
7+
header.landing .content * {
8+
display: inline;
39
}
410

511
.video {
@@ -17,6 +23,7 @@ header.landing {
1723
min-height: calc(100vh - 50px);
1824
min-width: 100%;
1925
margin: auto;
26+
padding-top: 50px;
2027
width: inherit;
2128
filter: brightness(50%);
2229
-webkit-filter: brightness(50%);

client/templates/home/home.html

Lines changed: 148 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,164 @@
11
<template name="home">
2-
{{> sAlert}}
3-
<header class="landing">
4-
5-
<div class="content">
6-
<h1>
7-
<i class="fa fa-check-square-o"></i>
8-
<p>Get it Done</p>
9-
</h1>
10-
<div class="pull-right">
11-
<h3>Organize your time now!</h3>
12-
<button class="btn btn-primary get-started">GET STARTED</button>
13-
</div>
14-
</div>
15-
16-
</header>
17-
18-
<div id="hero">
19-
<div class="video">
20-
<video preload="auto" class="landing-video {{#if playing}}bright{{/if}}" poster="/images/posters/landing.png">
21-
<source src="/videos/landing_video.mp4" type='video/mp4'/>
22-
</video>
23-
{{#if canPlay}}
24-
<div class="controlls {{#if playing}}secondary{{/if}}">
25-
{{#if playing}}
26-
<button class="btn btn-default pause"><i class="fa fa-pause"></i></button>
27-
{{else}}
28-
Watch the video
29-
<button class="btn btn-default play"><i class="fa fa-play-circle-o"></i></button>
30-
or
31-
{{/if}}
32-
<button class="btn btn-primary get-started">START NOW</button>
33-
</div>
34-
{{#unless playing}}
35-
<div class="arrow bounce scroll-to-content">Scroll down to read more...<!-- <i class="fa fa-arrow-down"></i> --></div>
36-
{{/unless}}
37-
{{/if}}
38-
</div>
39-
</div>
40-
41-
<div class="landing content">
42-
<header>
43-
<h1>Features:</h1>
44-
</header>
45-
<article>
46-
<div class="container">
47-
<header >
48-
<h2>Boards</h2>
49-
</header>
50-
<div class="row">
51-
<aside class="col-lg-4 col-md-5 col-sm-6">
52-
<video preload="auto" poster="/images/posters/boards.png">
53-
<source src="/videos/boards.mp4" type='video/mp4' />
54-
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
55-
</video>
56-
</aside>
57-
<p class="col-lg-8 col-md-7 col-sm-6">
58-
Create boards to store tasks in different categories.
59-
</p>
2+
{{> sAlert}}
3+
<header class="landing">
4+
<div class="video">
5+
<video preload="auto" class="landing-video {{#if playing}}bright{{/if}}" poster="/images/posters/landing.png">
6+
<source src="/videos/landing_video.mp4" type='video/mp4'/>
7+
</video>
8+
{{#if canPlay}}
9+
<div class="controlls {{#if playing}}secondary{{/if}}">
10+
{{#if playing}}
11+
<button class="btn btn-default pause"><i class="fa fa-pause"></i></button>
12+
{{else}}
13+
Watch the video
14+
<button class="btn btn-default play"><i class="fa fa-play-circle-o"></i></button>
15+
or
16+
{{/if}}
17+
<button class="btn btn-primary get-started">START NOW</button>
6018
</div>
61-
</div>
62-
</article>
63-
<article>
64-
<div class="container">
65-
<header>
66-
<h2>Inbox</h2>
67-
</header>
68-
<div class="row">
69-
<aside class="col-lg-4 col-md-5 col-sm-6">
70-
<video preload="auto" poster="/images/posters/inbox.png">
71-
<source src="/videos/inbox.mp4" type='video/mp4' />
72-
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
73-
</video>
74-
</aside>
75-
<p class="col-lg-8 col-md-7 col-sm-6">
76-
Keep your unstructured task in Inbox.
77-
</p>
19+
{{#unless playing}}
20+
<div class="arrow bounce scroll-to-content">Scroll down to read more...<!-- <i class="fa fa-arrow-down"></i> --></div>
21+
{{/unless}}
22+
{{/if}}
23+
<div class="content">
24+
<h1><i class="fa fa-check-square-o"></i> Get it Done</h1>
25+
<div class="pull-right">
26+
<h3>Organize your time now!</h3>
27+
<button class="btn btn-primary get-started">GET STARTED</button>
7828
</div>
7929
</div>
80-
</article>
81-
<article>
82-
<div class="container">
83-
<header>
84-
<h2>High priority</h2>
85-
</header>
86-
<div class="row">
87-
<aside class="col-lg-4 col-md-5 col-sm-6">
88-
<video preload="auto" poster="/images/posters/high_priority.png">
89-
<source src="/videos/high_priority.mp4" type='video/mp4' />
90-
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
91-
</video>
92-
</aside>
93-
<p class="col-lg-8 col-md-7 col-sm-6">
94-
Keep mind in aoutopilot doing high priority tasks.
95-
</p>
96-
</div>
30+
</div>
31+
</header>
32+
<div class="landing content">
33+
<header>
34+
<h1>Features:</h1>
35+
</header>
36+
<article>
37+
<div class="container">
38+
<header >
39+
<h2>Boards</h2>
40+
</header>
41+
<div class="row">
42+
<aside class="col-lg-4 col-md-5 col-sm-6">
43+
<video preload="auto" poster="/images/posters/boards.png">
44+
<source src="/videos/boards.mp4" type='video/mp4' />
45+
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
46+
</video>
47+
</aside>
48+
<p class="col-lg-8 col-md-7 col-sm-6">
49+
Create boards to store tasks in different categories.
50+
</p>
9751
</div>
98-
</article>
99-
<article>
100-
<div class="container">
101-
<header>
102-
<h2>Scheduler</h2>
103-
</header>
104-
<div class="row">
105-
<aside class="col-lg-4 col-md-5 col-sm-6">
106-
<video preload="auto" poster="/images/posters/scheduler.png">
107-
<source src="/videos/scheduler.mp4" type='video/mp4' />
108-
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
109-
</video>
110-
</aside>
111-
<p class="col-lg-8 col-md-7 col-sm-6">
112-
Plan your day by boards or activities.
113-
</p>
114-
</div>
52+
</div>
53+
</article>
54+
<article>
55+
<div class="container">
56+
<header>
57+
<h2>Inbox</h2>
58+
</header>
59+
<div class="row">
60+
<aside class="col-lg-4 col-md-5 col-sm-6">
61+
<video preload="auto" poster="/images/posters/inbox.png">
62+
<source src="/videos/inbox.mp4" type='video/mp4' />
63+
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
64+
</video>
65+
</aside>
66+
<p class="col-lg-8 col-md-7 col-sm-6">
67+
Keep your unstructured task in Inbox.
68+
</p>
11569
</div>
116-
</article>
117-
<article>
118-
<div class="container">
119-
<header>
120-
<h2>Time tracking with Toggl</h2>
121-
</header>
122-
<div class="row">
123-
<aside class="col-lg-4 col-md-5 col-sm-6">
124-
<video preload="auto" poster="/images/posters/toggl.png">
125-
<source src="/videos/toggl.mp4" type='video/mp4' />
126-
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
127-
</video>
128-
</aside>
129-
<p class="col-lg-8 col-md-7 col-sm-6">
130-
Use toggl to track your time.
131-
</p>
132-
</div>
70+
</div>
71+
</article>
72+
<article>
73+
<div class="container">
74+
<header>
75+
<h2>High priority</h2>
76+
</header>
77+
<div class="row">
78+
<aside class="col-lg-4 col-md-5 col-sm-6">
79+
<video preload="auto" poster="/images/posters/high_priority.png">
80+
<source src="/videos/high_priority.mp4" type='video/mp4' />
81+
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
82+
</video>
83+
</aside>
84+
<p class="col-lg-8 col-md-7 col-sm-6">
85+
Keep mind in aoutopilot doing high priority tasks.
86+
</p>
13387
</div>
134-
</article>
135-
<article>
136-
<div class="container">
137-
<header>
138-
<h2>Google Calendar integration</h2>
139-
</header>
140-
<div class="row">
141-
<aside class="col-lg-4 col-md-5 col-sm-6">
142-
<video preload="auto" poster="/images/posters/gc.png">
143-
<source src="/videos/gc.mp4" type='video/mp4' />
144-
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
145-
</video>
146-
</aside>
147-
<p class="col-lg-8 col-md-7 col-sm-6">
148-
Import your google calendar events.
149-
</p>
150-
</div>
88+
</div>
89+
</article>
90+
<article>
91+
<div class="container">
92+
<header>
93+
<h2>Scheduler</h2>
94+
</header>
95+
<div class="row">
96+
<aside class="col-lg-4 col-md-5 col-sm-6">
97+
<video preload="auto" poster="/images/posters/scheduler.png">
98+
<source src="/videos/scheduler.mp4" type='video/mp4' />
99+
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
100+
</video>
101+
</aside>
102+
<p class="col-lg-8 col-md-7 col-sm-6">
103+
Plan your day by boards or activities.
104+
</p>
151105
</div>
152-
</article>
106+
</div>
107+
</article>
108+
<article>
153109
<div class="container">
154-
<article class="subscribe">
155-
<header>
156-
<h2>Subscribe to updates</h2>
157-
</header>
158-
<div id="subscribe" class="container col-lg-6 col-md-8 col-sm-10 col-lg-offset-3 col-md-offset-2 col-sm-offset-1">
159-
<input type="email" class="form-control" id="email" placeholder="your@email.com">
160-
<button class="btn btn-primary submit">Subscribe {{#if showSpinner}}{{> spinner}}{{/if}}</button>
161-
</div>
162-
</article>
110+
<header>
111+
<h2>Time tracking with Toggl</h2>
112+
</header>
113+
<div class="row">
114+
<aside class="col-lg-4 col-md-5 col-sm-6">
115+
<video preload="auto" poster="/images/posters/toggl.png">
116+
<source src="/videos/toggl.mp4" type='video/mp4' />
117+
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
118+
</video>
119+
</aside>
120+
<p class="col-lg-8 col-md-7 col-sm-6">
121+
Use toggl to track your time.
122+
</p>
123+
</div>
163124
</div>
164-
</div>
165-
<footer class="landing">
125+
</article>
126+
<article>
166127
<div class="container">
128+
<header>
129+
<h2>Google Calendar integration</h2>
130+
</header>
167131
<div class="row">
168-
<p>Made with <i class="fa fa-heart-o"></i> by <a href="http://jssolutionsdev.com/" title="JSSolutions">JSSolutions</a></p>
132+
<aside class="col-lg-4 col-md-5 col-sm-6">
133+
<video preload="auto" poster="/images/posters/gc.png">
134+
<source src="/videos/gc.mp4" type='video/mp4' />
135+
<p>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
136+
</video>
137+
</aside>
138+
<p class="col-lg-8 col-md-7 col-sm-6">
139+
Import your google calendar events.
140+
</p>
169141
</div>
170142
</div>
171-
</footer>
143+
</article>
144+
<div class="container">
145+
<article class="subscribe">
146+
<header>
147+
<h2>Subscribe to updates</h2>
148+
</header>
149+
<div id="subscribe" class="container col-lg-6 col-md-8 col-sm-10 col-lg-offset-3 col-md-offset-2 col-sm-offset-1">
150+
<input type="email" class="form-control" id="email" placeholder="your@email.com">
151+
<button class="btn btn-primary submit">Subscribe {{#if showSpinner}}{{> spinner}}{{/if}}</button>
152+
</div>
153+
</article>
154+
</div>
155+
</div>
156+
<footer class="landing">
157+
<div class="container">
158+
<div class="row">
159+
<p>Made with <i class="fa fa-heart-o"></i> by <a href="http://jssolutionsdev.com/" title="JSSolutions">JSSolutions</a></p>
160+
</div>
161+
</div>
162+
</footer>
172163
</template>
173164

0 commit comments

Comments
 (0)