-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (140 loc) · 7.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>eprojectplan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<header class='grid header'>
<div class="logo">
<h1 class='logo-content'>
<span class='logo-punch'>e</span><span class='logo-punch-2'>Projectplan</span>
</h1>
</div>
<div class='signup'>
<a href='#'>Login</a>
</div>
</header>
<section class='grid showcase'>
<!-- <img src='/images/showcase.jpg' /> -->
<div class='showcase-content'>
<h3>The best way to
<span class='typewriter' data-period="2000" data-type='["Plan", "Coordinate", "Achieve", "Succeed" ]'></span>
<span class='wrap'></span>
</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos pariatur praesentium quo sequi in voluptas, libero fugit. Est, omnis voluptate.</p>
<a href='#'>Read More</a>
</div>
</section>
<main class='main-content'>
<section class='grid extra-info-section'>
<div class="extra-info-container">
<h4>Prince 2</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor deserunt quis qui unde ad ipsam saepe laborum, tempore hic architecto eius! Adipisci blanditiis cumque nesciunt. Voluptas totam cum dolores quos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis fugit natus earum? A deleniti voluptatum minima, soluta non quisquam rem. Eaque magni atque possimus id numquam ab illo, dolorem consectetur alias sunt deleniti dolore voluptates sapiente sequi! Soluta est quo quia corporis, molestiae quasi ducimus fuga itaque blanditiis ipsam hic, autem voluptas sapiente vel pariatur! Ratione in ipsum odit reiciendis assumenda magni laudantium non facere, excepturi voluptas molestiae ipsa ea ut nesciunt commodi rem nemo mollitia inventore. Quo voluptas, facilis in asperiores quidem debitis omnis animi, rem molestias possimus, quibusdam a blanditiis nam exercitationem dicta pariatur nisi! Illo, vero. Consectetur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis fugit natus earum? A deleniti voluptatum minima, soluta non quisquam rem. Eaque magni atque possimus id numquam ab illo, dolorem consectetur alias sunt deleniti dolore voluptates sapiente sequi! Soluta est quo quia corporis, molestiae quasi ducimus fuga itaque blanditiis ipsam hic, autem voluptas sapiente vel pariatur! Ratione in ipsum odit reiciendis assumenda magni laudantium non facere, excepturi voluptas molestiae ipsa ea ut nesciunt commodi rem nemo mollitia inventore. Quo voluptas, facilis in asperiores quidem debitis omnis animi, rem molestias possimus, quibusdam a blanditiis nam exercitationem dicta pariatur nisi! Illo, vero. Consectetur!</p>
</div>
</section>
<section class='grid packages-section'>
<div class="packages-content">
<div class="card basic">
<div class="card-title">
<h1><i class='fa fa-bolt package-icon' style='color:#379683'></i></h1>
<h4>Basic</h4>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex adipisci perspiciatis architecto sit officiis eum autem eligendi, illo suscipit ea minus quaerat quidem saepe nobis est at quibusdam. Sequi culpa unde fuga odio quis provident autem illo cupiditate nobis! Quos?</p>
</div>
</div>
<div class="card premium">
<div class="card-title">
<h1><i class='fa fa-bolt package-icon' style='color:#379683'></i></h1>
<h4>Premium</h4>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex adipisci perspiciatis architecto sit officiis eum autem eligendi, illo suscipit ea minus quaerat quidem saepe nobis est at quibusdam. Sequi culpa unde fuga odio quis provident autem illo cupiditate nobis! Quos?</p>
</div>
</div>
<div class="card enterprise">
<div class="card-title">
<h1><i class='fa fa-bolt package-icon' style='color:#379683'></i></h1>
<h4>Enterprise</h4>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex adipisci perspiciatis architecto sit officiis eum autem eligendi, illo suscipit ea minus quaerat quidem saepe nobis est at quibusdam. Sequi culpa unde fuga odio quis provident autem illo cupiditate nobis! Quos?</p>
</div>
</div>
</div>
</section>
<section class='grid about-us'>
<div class="about-us-content">
<h3>
About Us
</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium debitis quos asperiores, praesentium pariatur doloremque dolore consectetur distinctio officiis similique dolores culpa nihil tempora quibusdam? Alias molestias omnis repudiandae cum tempore at, et similique nesciunt temporibus animi suscipit voluptatem, excepturi atque debitis necessitatibus incidunt praesentium unde delectus nisi consequuntur repellat!
</p>
</div>
</section>
</main>
<footer class='grid footer'>
<div class='footer-content'>
Copyright © 2018 eprojectplan
</div>
</footer>
<script>
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewriter');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewriter > .wrap { border-right: 0.08em solid #fff; color: #5cdb95; animation: blink-caret .75s step-end infinite; }";
document.body.appendChild(css);
};
</script>
</body>
</html>