-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
489 lines (417 loc) · 24.5 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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Easiest Website Ever</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Easiest Website Ever</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#services">What</a>
</li>
<li>
<a class="page-scroll" href="#why">Why</a>
</li>
<li>
<a class="page-scroll" href="#process">How</a>
</li>
<li>
<a class="page-scroll" href="#about">Who</a>
</li>
<li>
<a href="https://github.com/shacharoz/easiest-website-ever/archive/gh-pages.zip" target="_blank">Download</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="intro-text">
<div class="intro-heading">Easiest Path for a Profesional Website</div>
<div class="intro-lead-in">Your product's new website can be created within the next hour. For free.</div>
<a href="https://github.com/shacharoz/easiest-website-ever/archive/gh-pages.zip" target="_blank" class="btn btn-xl"><i class="fa fa-download fa-2x"></i> Download Site Files</a>
</div>
</div>
</header>
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">What is this</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-clock-o fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Super Fast</h4>
<p class="text-muted">In less than one hour from now you will have a duplicated site just as this one, up and running live on the web.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-anchor fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Professional. Full Control</h4>
<p class="text-muted">You have full control of the code and the content. Powered by great products and stable technologies: Github, SourceTree, Bootstrap. These are here to stay.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-gavel fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Free. Open Source. Yours.</h4>
<p class="text-muted">Its free, but its fully owned by you. All is established by open source code and apps. No hidden intentions. All legal stuff :)</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-bank fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Free Hosting</h4>
<p class="text-muted">Making a website requires a place on the internet where you can keep the site's content. this is called Hosting. Github is now providing a free hosting service. You dont need to have any special skill to use that service.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">You Design the Website</h4>
<p class="text-muted">It is recommended you would know what site you want to create. It is your responsibility to write the content, bring the images etc.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Get a Web Developer Later</h4>
<p class="text-muted">This site's html template can be fully edited. It would be easier to you if you would know a little html. but if not, you can still make enough changes by yourself.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="why">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Goal: <small>Why have I created this?</small></h2>
</div>
</div>
<div class="row">
<div class="col-md-7">
<p>I have searched for an easy system to create websites for years, from WIX to Wordpress to pure HTML. I have hosting accounts at GoDaddy and Bluehost. These have their advantages (they are very customer friendly and I do not complain). I write blogs, and have portfolios in almost every platform (picked <a href="https://www.behance.net" target="_blank">Behance</a> as my favorite).
</p>
<p>Now even though this method forces you to be a little technical, I believe that its worth the price-value ratio (its 100% free). It is way less complicated than doing all this with a Hosting site (again, they are good services). Github provides the hosting for free, and a much faster getting started experience.</p>
<p>I have also created a basic template of a product website that you can easily edit. I hope that my work would serve you well and save you some time. I hope it make your life a little easier, at least with creating your site. :)</p>
</div>
<div class="col-md-5">
<img src="img/all-logos.jpg" class="img-responsive" />
</div>
</div>
</div>
</section>
<!-- process Section -->
<section id="process">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">How: <small>Step by step instructions to create your free website</small></h2>
<h3 class="section-subheading text-muted">I know how difficult that is. You are not sure how can this be, that someone would give you all this for free. Well, I just want to show you how to exploit all that is given for us, even if you are not a programmer. So, just follow these steps, and in less than an hour you should have a website up and running.</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-1">
<h4 class="service-heading">Step 1</h4>
</div>
<div class="col-md-5">
<h4 class="service-heading">Log in to your Github account</h4>
</div>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>if you dont have an account at <a href="https://github.com/" target="_blank">github</a>, get one. and then log in.</p>
</div>
<div class="col-md-7">
<img src="img/instructions/1.jpg" class="img-responsive" />
</div>
</div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-1">
<h4 class="service-heading">Step 2</h4>
</div>
<div class="col-md-5">
<h4 class="service-heading">Create a repository</h4>
</div>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p class="text-muted"><i>Side Note: in short, a repository is a very useful way of working on something that is constantly changing, either by youself or with a full team.</i></p>
<p>Press the <b>"New Repository"</b> button.</p>
</div>
<div class="col-md-7">
<a href="img/instructions/2.jpg"><img src="img/instructions/2.jpg" class="img-responsive" /></a>
</div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>Fill the details in the form. All details can be changed further down the road. The only important thing is to mark the repository as <b>Public</b>.</p>
</div>
<div class="col-md-7">
<a href="img/instructions/3.jpg"><img src="img/instructions/3.jpg" class="img-responsive" /></a>
</div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>This should be the end result, and the main page of the created repository.</p>
<p class="text-muted"><i>Side Note: For more info read article <a href="https://help.github.com/articles/creating-a-new-repository/" target="_blank">creating a new repository</a>.</i></p>
</div>
<div class="col-md-7">
<a href="img/instructions/4.jpg"><img src="img/instructions/4.jpg" class="img-responsive" /></a>
</div>
</div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-1">
<h4 class="service-heading">Step 3</h4>
</div>
<div class="col-md-5">
<h4 class="service-heading">Generate an automatic site</h4>
</div>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>Follow the first 3 steps in this guide: <a href="https://help.github.com/articles/creating-pages-with-the-automatic-generator/" target="_blank">getting started with site generator</a>.
The rest of them are too complicated for now... I finished it in a simpler manner.</p>
<p>In short: Go to <b>Settings</b>, then find <b>"Launch automatic page generator"</b>. Once you click the button, you'll find this form:</p>
</div>
<div class="col-md-7">
<a href="img/instructions/5.jpg"><img src="img/instructions/5.jpg" class="img-responsive" /></a>
</div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>Click next. Dont worry about all this, because we are going to replace all these really soon.</p>
<p>You should see something like this. Its the design template of your site. Again, we are about to replace it with something else.</p>
</div>
<div class="col-md-7">
<a href="img/instructions/6.jpg"><img src="img/instructions/6.jpg" class="img-responsive" /></a>
</div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>Go back to the main page of the repository. You should see something like this:</p>
<p class="text-muted"><i>Side Note: For more info read at <a href="https://pages.github.com/" target="_blank">Github Pages</a>. You can also watch a youtube video of another person who shows that <a href="https://www.youtube.com/watch?v=DcI6C93m0n8" target="_blank">process</a> live (watch from minute 2:00 to 4:30).</i></p>
<p><b>Good job, you have a website on air!</b> Github activates as your hosting service for the site and its content.</p>
<p>Now, in order to put your site's content into github, we need to use the help from another software.</p> </div>
<div class="col-md-7">
<a href="img/instructions/7.jpg"><img src="img/instructions/7.jpg" class="img-responsive" /></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
<div class="col-md-1">
<h4 class="service-heading">Step 4</h4>
</div>
<div class="col-md-5">
<h4 class="service-heading">Open your SourceTree desktop app</h4>
</div>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>SourceTree allows you to communicate with github's file system and its repositories. this is how we can upload files into github.</p>
<p>lets start by <a href="https://www.atlassian.com/software/sourcetree" target="_blank">downloading</a> and installing that software.</p>
<p>You will need to create an account at Atlassian (can connect using your Google account).</p>
<p>Then connect your Github account with your SourceTree app.</p>
</div>
<div class="col-md-7">
<a href="img/instructions/9.jpg"><img src="img/instructions/9.jpg" class="img-responsive" /></a>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="col-md-1">
<h4 class="service-heading">Step 5</h4>
</div>
<div class="col-md-5">
<h4 class="service-heading">Setup SourceTree with the new repository</h4>
</div>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>Please follow the instructions made by Susan Reed.</p>
<p>in short: select <b>Clone/New</b>, select the repository you just created, define a target directory on your computer, and click <b>Create</b>.</p>
<p>You now should be able to see all the files from the created site at your PC.</p>
</div>
<div class="col-md-7">
<iframe width="560" height="315" src="https://www.youtube.com/embed/w2XM_bHYj1c" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-12">
<hr>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p class="text-muted"><i>Side Note: every change you make to the files there, will be remembered. SourceTree will tell you about all the differences between the files on your PC and the ones that exist online. You can then decide what changes to keep and upload to the site (called "Push" or "Commit" at the SourceTree app).</i></p>
<p>Delete the content of that folder. Commit that change.</p>
<p><a href="https://github.com/shacharoz/easiest-website-ever/archive/gh-pages.zip" target="_blank">Download</a> the files of this site from its github, and unzip its content into the same folder. Commit that change as well.</p>
<p class="text-muted"><i>Side Note: if you already have files for your website, just put them in the folder instead.</i></p>
</div>
<div class="col-md-7">
<a href="img/instructions/8.jpg"><img src="img/instructions/8.jpg" class="img-responsive" /></a>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="col-md-1">
<h4 class="service-heading">Step 6</h4>
</div>
<div class="col-md-5">
<h4 class="service-heading">Test your new site</h4>
</div>
</div>
<div class="col-md-12">
<div class="col-md-5">
<p>After you have committed the site's files you can go to the link of the site and watch your creation live. The address should be something like: http://YOUR_USER_NAME.github.io/YOUR_REPOSITORY_NAME/</p>
<p class="text-muted"><i>Side Note: its important to say that this site is built upon a template called <a href="http://startbootstrap.com/template-overviews/agency/" target="_blank">Agency</a>, that is powered by <a href="http://startbootstrap.com/" target="_blank">Bootstrap framework</a>. It is a mobile friendly template (responsive). there are many more bootstrap templates from where this came from.</i></p>
<p>You should now start writing the content and design of the site. You got a lot of hard work now, so why dont you get to it? :)</p>
</div>
<div class="col-md-7">
<img src="img/instructions/10.jpg" class="img-responsive" />
</div>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="about" class="bg-darkest-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">About: <small>Who are we?</small></h2>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/shachar.png" class="img-responsive img-circle" alt="">
<h4>Shachar Oz</h4>
<p class="text-muted">Developer, Designer, UX</p>
<p class="text-muted"><a href="http://flux-experiences.com/people/shacharoz/" target="_blank">portfolio</a></p>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/liron.jpg" class="img-responsive img-circle" alt="">
<h4>Liron Levi Oz</h4>
<p class="text-muted">Product Manager</p>
</div>
</div>
<div class="col-lg-12">
<h3 class="section-subheading">Hi there, we are <a href="http://www.flux-experiences.com" target="_blank">FLUX</a> founders. In FLUX we design engaging learning experiences. But we also love to share back things we learned out to the world. Just because we know how many important questions are there to solve... Hope this helped you solving some of them.</h3>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="copyright">Copyright © Your Company</span>
<p>This site design is based on the <a href="http://startbootstrap.com/template-overviews/agency/" target="_blank">Agency</a> Bootstrap template.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
</body>
</html>