-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·131 lines (126 loc) · 6.98 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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>EasySMS</title>
<meta name="description" content="Easily schedule messages and send to numbers from a csv.">
<link rel="icon" href="img/favicon.ico" sizes="32x32" type="image/png">
<!-- custom.css -->
<link rel="stylesheet" href="css/custom.css">
<!-- bootstrap.min.css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- font-awesome -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<!-- AOS -->
<link rel="stylesheet" href="css/aos.css">
</head>
<body>
<!-- banner -->
<div class="jumbotron jumbotron-fluid" id="banner" style="background-image: url(img/banner-bk.jpg);">
<div class="container text-center text-md-left">
<header>
<div class="row justify-content-between">
<div class="col-2">
<img src="img/logo.png" alt="logo">
</div>
<div class="col-6 align-self-center text-right">
<p class="text-white lead">Available Now!</p>
</div>
</div>
</header>
<h1 data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="display-3 text-white font-weight-bold my-5">
EasySMS
</h1>
<p data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="lead text-white my-4">
Easily plan a campaign with messages that can be sent now or in the future.
<br> Just provide us your Twilio account info and a .csv of phone numbers!
</p>
<a href="https://easysms-app.now.sh" data-aos="fade" data-aos-easing="linear" data-aos-duration="1000" data-aos-once="true" class="btn my-4 font-weight-bold atlas-cta cta-green">Get Started</a>
</div>
</div>
<!-- three-blcok -->
<div class="container my-5 py-2" id="features">
<h2 class="text-center font-weight-bold my-5">Cheaply Reach All Your Customers</h2>
<div class="row">
<div data-aos="fade-up" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true" class="col-md-4 text-center">
<img src="img/calendar.png" width="100" height="100" alt="Schedulable" class="mx-auto">
<h4 class="mt-3">Schedulable</h4>
<p>Send your messages now, or in the future!</p>
</div>
<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000" data-aos-once="true" class="col-md-4 text-center">
<img src="img/magic.png" width="100" height="100" alt="Simple UI" class="mx-auto">
<h4 class="mt-3">Simple UI</h4>
<p>We do the hard work for you! Our UI is clean and easy to use.</p>
</div>
<div data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000" data-aos-once="true" class="col-md-4 text-center">
<img src="img/low-price.png" width="66" height="100" alt="Low Cost" class="mx-auto">
<h4 class="mt-3">Low Cost</h4>
<p>You bring your own Twilio account, so there's no mark up on texts.</p>
</div>
</div>
</div>
<!-- feature (skew background) -->
<div class="jumbotron jumbotron-fluid feature" id="feature-first">
<div class="container my-5">
<div class="row justify-content-between text-center text-md-left">
<div data-aos="fade-right" data-aos-duration="1000" data-aos-once="true" class="col-md-6">
<h2 class="font-weight-bold">Easy Reporting</h2>
<p class="my-4">We track any issues with deliveries and record responses,
<br> making reports easily accesible to you.</p>
</div>
<div data-aos="fade-left" data-aos-duration="1000" data-aos-once="true" class="col-md-6 align-self-center">
<img src="img/csv.png" style="max-width: none; width: 50%;" alt="Take a look inside" class="mx-auto d-block">
</div>
</div>
</div>
</div>
<!-- feature (green background) -->
<div class="jumbotron jumbotron-fluid feature" id="feature-last">
<div class="container">
<div class="row justify-content-between text-center text-md-left">
<div data-aos="fade-left" data-aos-duration="1000" data-aos-once="true" class="col-md-6 flex-md-last">
<h2 class="font-weight-bold">BYO Twilio Account</h2>
<p class="my-4">
Twilio is a service is an API based service for sending messages.
<br> We provide a convenient UI to interact with Twilio, and charge you nothing. Just pay your Twilio bill!
</p>
</div>
<div data-aos="fade-right" data-aos-duration="1000" data-aos-once="true" class="col-md-6 align-self-center flex-md-first">
<img src="img/twilio.png" alt="Safe and reliable" class="mx-auto d-block">
</div>
</div>
</div>
</div>
<!-- copyright -->
<div class="jumbotron jumbotron-fluid" id="copyright">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-6 text-white align-self-center text-center text-md-left my-2">
Landing Page: Copyright © 2018 Chen, Yi-Ya. <div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</div>
<!-- <div class="col-md-6 align-self-center text-center text-md-right my-2" id="social-media">
<a href="#" class="d-inline-block text-center ml-2">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="#" class="d-inline-block text-center ml-2">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="#" class="d-inline-block text-center ml-2">
<i class="fa fa-medium" aria-hidden="true"></i>
</a>
<a href="#" class="d-inline-block text-center ml-2">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div> -->
</div>
</div>
</div>
<!-- AOS -->
<script src="js/aos.js"></script>
<script>
AOS.init({
});
</script>
</body>
</html>