-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
265 lines (236 loc) · 9.22 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html ng-app="TodoApp">
<head>
<title>My Profile</title>
<link rel="icon" type="image/png" href="rocket.png" sizes="16x16">
<!-- CSS Files -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<!-- test section -->
<!-- <section id="test">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="parallax-window" data-parallax="scroll" data-image-src="image/home-bg.jpg">
<h1>Hello</h1>
<p>Testing parallax</p>
</div>
</div>
</div>
</div>
</section> -->
<!-- Home Section -->
<section id="home" >
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="parallax-window" data-parallax="scroll" data-image-src="image/home-bg.jpg">
<div class="wrapper">
<h1 class="wow bounceInDown">welcome</h1>
<p class="wow bounce" data-wow-delay=".3s">to</p>
<h2 class="wow bounce" data-wow-delay=".4s">keroro site</h2>
<a href="#intro">
<button class="btn btn-warning">
Start
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Introduction Section -->
<section id="intro">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 icon-head">
<h1>introduction</h1>
<hr>
<i class="fa fa-cubes"></i>
<h2>weerapat chulaket</h2>
<p>I want to be a Developer</p>
</div>
<div class="col-md-12 col-sm-12 img-intro">
<div class="col-md-3 col-sm-3 wow bounceIn cursor" data-wow-delay=".3s">
<img src="image/profile-1.jpg" class="intro-image" onclick="openBox();showImage(0);">
</div>
<div class="col-md-3 col-sm-3 wow bounceIn cursor" data-wow-delay=".5s">
<img src="image/profile-2.jpg" class="intro-image" onclick="openBox();showImage(1);">
</div>
<div class="col-md-3 col-sm-3 wow bounceIn cursor" data-wow-delay=".7s">
<img src="image/profile-3.jpg" class="intro-image" onclick="openBox();showImage(2);">
</div>
<div class="col-md-3 col-sm-3 wow bounceIn cursor" data-wow-delay=".9s">
<img src="image/profile-4.jpg" class="intro-image" onclick="openBox();showImage(3);">
</div>
</div>
<!-- Slide Show intro image (Open when click) -->
<div id="myBox" class="Box">
<div class="container-fluid">
<div class="col-md-12 col-sm-12">
<i class="fa fa-times" onclick="closeBox()"></i>
<div class="mySlide">
<img src="image/profile-1.jpg" class="img-style">
</div>
<div class="mySlide">
<img src="image/profile-2.jpg" class="img-style">
</div>
<div class="mySlide">
<img src="image/profile-3.jpg" class="img-style">
</div>
<div class="mySlide">
<img src="image/profile-4.jpg" class="img-style">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Todo List Section -->
<section id="todo">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 center">
<h1>todos</h1>
</div>
<div class="col-md-12 col-sm-12 center">
<div ng-controller="addTextController">
<form ng-submit="save()">
<input type="text" placeholder="What need to do done?" ng-model="title">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div ng-controller="showListController">
<div class="col-md-12 col-sm-12">
<table class="table">
<thead class="header">
<tr>
<td width="5%"></td>
<td width="30%">Title</td>
<td width="20%">Done</td>
</tr>
</thead>
<tbody ng-controller="checkController">
<tr ng-repeat="text in titles" class="table-row-hover" ng-model="check" ng-click="checkDone(text)">
<td style="text-align: center;"><input type="checkbox" ng-checked="text.check" class="table-row-hover"></td>
<td style="padding-left: 100px;">{{text.title}}</td>
<td><div ng-if="text.check">complete</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- AWS Section -->
<section id="aws">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 title wow slideInLeft">
<i class="fa fa-cloud"></i>
<h1>Amazon Web Services</h1>
<hr>
<p>Amazon Web Services (AWS) is a secure cloud services platform, offering compute power, database storage, content delivery and other functionality to help businesses scale and grow. Explore how millions of customers are currently leveraging AWS cloud products and solutions to build sophisticated applications with increased flexibility, scalability and reliability.</p>
</div>
<div class="col-md-8 col-sm-8">
<a href="#s3">
<div class="col-md-4 col-sm-4 bg-black services wow fadeInDown"
data-wow-delay=".1s">
<i class="fa fa-hdd-o"></i>
<h3>Amazon S3</h3>
</div>
</a>
<a href="#home">
<div class="col-md-4 col-sm-4 bg-red services wow slideInLeft"
data-wow-delay=".3s">
<i class="fa fa-code"></i>
<h3>Amazon Lambda</h3>
</div>
</a>
<a href="#home">
<div class="col-md-4 col-sm-4 bg-black services wow slideInLeft"
data-wow-delay=".5s">
<i class="fa fa-briefcase"></i>
<h3>Amazon CloudFormation</h3>
</div>
</a>
<a href="#home">
<div class="col-md-4 col-sm-4 bg-red services wow slideInRight"
data-wow-delay="1s">
<i class="fa fa-users"></i>
<h3>Amazon IAM</h3>
</div>
</a>
<a href="#home">
<div class="col-md-4 col-sm-4 bg-black services wow slideInRight"
data-wow-delay=".8s">
<i class="fa fa-database"></i>
<h3>Amazon DynamoDB</h3>
</div>
<a href="#home">
<div class="col-md-4 col-sm-4 bg-red services wow bounceInUp"
data-wow-delay=".6s">
<i class="fa fa-server"></i>
<h3>Amazon EC2</h3>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- S3 Section -->
<section id="s3">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12" data-wow-delay=".3s">
<i class="fa fa-hdd-o wow bounceIn"></i>
<h1 class=" wow bounceIn">amazon s3</h1>
<hr class=" wow bounceIn">
<div class="col-md-6 col-md-offset-3 col-sm-offset-2 col-sm-8 wow bounceIn">
<div class="video-container">
<iframe height="349" width="560" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/rKpKHulqYOQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-12 col-sm-12 wow fadeInUp">
<p>Companies today need the ability to simply and securely collect, store, and analyze their data at a massive scale. Amazon S3 is object storage built to store and retrieve any amount of data from anywhere – web sites and mobile apps, corporate applications, and data from IoT sensors or devices. It is designed to deliver <font color="red">99.999999999%</font> durability, and stores data for millions of applications used by market leaders in every industry. S3 provides comprehensive security and compliance capabilities that meet even the most stringent regulatory requirements. It gives customers flexibility in the way they manage data for cost optimization, access control, and compliance. S3 provides query-in-place functionality, allowing you to run powerful analytics directly on your data at rest in S3. And Amazon S3 is the most supported storage platform available, with the largest ecosystem of ISV solutions and systems integrator partners.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 only">
<h1>contact me</h1>
<i class="fa fa-facebook hover-blue wow bounceIn" data-wow-delay=".2s"></i>
<i class="fa fa-instagram hover-brown wow bounceIn" data-wow-delay=".4s"></i>
<i class="fa fa-twitter hover-aqua wow bounceIn" data-wow-delay=".6s"></i>
<i class="fa fa-phone hover-green wow bounceIn" data-wow-delay=".8s"></i>
<p>Copyright © 2018 Keroro Company | Design by <a href="#home"><font color="#FFFF8E">Weerapat Chulaket</font></a></p>
</div>
</div>
</div>
</section>
<!-- JS Files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Animation wow bounce -->
<script src="js/wow.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/main.js"></script>
<!-- Todo List Library -->
<script src="node_modules/angular/angular.min.js" charset="utf-8"></script>
<script src="appTodo.js" charset="utf-8"></script>
</body>
</html>