forked from coderetreat/coderetreat.org
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
174 lines (166 loc) · 7.9 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
---
layout: base
audience: participants
---
<div class="jumbotron jumbotron-fluid py-0 my-0 py-md-5 border jumbotron-gol text-light">
<div id="gameContainer">
<div id="gameOverflowContainer">
<canvas id="gameCanvas"></canvas>
</div>
<div class="jumbotron-gol-controls">
<div class="controls">
<button title="Slow down animation" class="btn btn-link" id="jumbotron-gol-control-speed-slower">
<i class="fas fa-fast-backward"></i>
</button>
<button title="Reset animation speed" class="btn btn-link" id="jumbotron-gol-control-speed-reset">
<i class="fas fa-tachometer-alt"></i>
</button>
<strong><span id="jumbotron-gol-control-speed-factor" class="text-primary">1x</span></strong>
<button title="Speed up animation" class="btn btn-link" id="jumbotron-gol-control-speed-faster">
<i class="fas fa-fast-forward"></i>
</button>
<button title="Shuffle the board" class="btn btn-link" id="jumbotron-gol-control-shuffle">
<i class="fas fa-random"></i>
</button>
<button title="Share the current state" class="btn btn-link" id="jumbotron-gol-control-share">
<i class="fas fa-share"></i>
</button>
<button title="Pause the animation" class="btn btn-link" id="jumbotron-gol-control-pause">
<i class="fas fa-pause"></i>
<i class="fas fa-play"></i>
</button>
<button title="Go fullscreen" class="btn btn-link" id="jumbotron-gol-control-fullscreen">
<i class="fas fa-expand"></i>
<i class="fas fa-compress d-none"></i>
</button>
</div>
</div>
</div>
<div class="jumbotron-gol-what-is-this">
<a href="{% link the-workshop/index.md %}#what-is-game-of-life" class="text-dark bg-light small px-2 pt-1">What is
this?</a>
</div>
<div class="jumbotron-gol-content container-fluid my-5">
<div class="col-lg-6 offset-lg-3 px-lg-5 p-3 mt-5 my-3 my-lg-5 jumbotron-gol-content-wrapper">
<h1 class="text-center ">Coderetreat</h1>
<h2 class="text-center px-5">
A community event to practice professional software development
</h2>
<p class="text-center pt-3">
<a class="btn my-2 d-block d-md-inline-block btn-primary text-uppercase font-weight-bold" href="{% link the-workshop/index.md %}">Learn
more</a>
<a class="btn my-2 d-block d-md-inline-block btn-secondary text-uppercase font-weight-bold" href="{% link events/index.html %}">Find an event</a>
<a class="btn my-2 d-block d-md-inline-block btn-facilitators text-uppercase font-weight-bold" href="{% link facilitators/index.html %}">Host your own</a>
</p>
</div>
</div>
</div>
<div class="pt-md-5 py-3 d-none d-md-block">
<div class="container">
<p class="lead">
Coderetreats are free day-long, intensive practice events, focusing on the fundamentals of software development
and
design. By providing developers the opportunity to take part in focused practice, away from the pressures of
"getting things done", the coderetreat format has proven itself to be a highly effective means of learning and
nurturing software development skills.</p>
</p>
<p class="lead">All over the world, people are coming together in small communities of practices to learn, explore
and grow. Join us on the <strong>Global Day of Coderetreat on {{ site.globalday.start | date:"%b %d, %Y" }} - {{ site.globalday.end | date:"%b %d, %Y" }}</strong> or discover local communities around you!</p>
</div>
</div>
<div class="container py-3" id="upcoming-events">
</div>
<div class="container pt-3">
<div class="card-deck">
<div class="card">
<img src="{% link /assets/home-gdcr.jpg %}" class="card-img-top card-img-tinted"
alt="A photo of a hangout session with lots of coderetreat sessions going on at the same time in different places of the world" />
<div class="card-body">
<h5 class="card-title">Global Day of Coderetreat</h5>
<p class="card-text">
Join thousands of developers on {{ site.globalday.start | date:"%b %d" }}-{{ site.globalday.end | date:"%b %d, %Y" }} in the largest free
community workshop worldwide.
</p>
<a href="{% link events/index.html %}" class="btn btn-primary">Find an event in your area</a>
</div>
<div class="card-footer py-1">
<span class="small">Photo by <a
href="https://twitter.com/racingDeveloper/status/665529557961830400">@racingDeveloper</a></span>
</div>
</div>
<div class="card">
<img src="{% link /assets/home-what-is-a-coderetreat.jpg %}" class="card-img-top card-img-tinted"
alt="a poster of the rules of game of life, put up on a window in Berlin" />
<div class="card-body">
<h5 class="card-title">What is a coderetreat?</h5>
<p class="card-text">
A coderetreat is a day of deliberate practice, far away of the pressure of getting things
done. A space for you to try out Test-Driven-Development and other practices.
</p>
<a href="{% link the-workshop/index.md %}" class="btn btn-primary">Learn more</a>
</div>
<div class="card-footer py-1">
<span class="small">Photo by <a
href="https://twitter.com/martinklose/status/931791467642793984/photo/1">@martinKlose</a></span>
</div>
</div>
<div class="card">
<img src="{% link /assets/home-getting-started.jpg %}" class="card-img card-img-tinted"
alt="a laptop next to a notepad and a glass of water" />
<div class="card-body">
<h5 class="card-title">Getting started</h5>
<p class="card-text">
What do you need to prepare? How do you set up an IDE? We'll answer these and a lot of frequently asked
questions in our <i>Getting Started</i>-guide!
</p>
<a href="{% link getting-started/index.md %}" class="btn btn-primary">To the guide</a>
</div>
<div class="card-footer py-1">
<span class="small">Photo by <a
href="https://pixabay.com/de/photos/home-office-arbeitsplatz-b%C3%BCro-336373/">StartupStockPhotos</a></span>
</div>
</div>
</div>
</div>
<div class="bg-light my-5 py-5">
<div id="carousel-quotes" class="carousel slide" style="overflow:hidden" data-ride="carousel">
<div class="carousel-inner">
{% for quote in site.data.quotes %}
<div class="carousel-item px-5 {% if forloop.first %}active{% endif %}">
<div class="container">
<blockquote class="blockquote">
<p class="mb-0">{{ quote.text }}</p>
<footer class="blockquote-footer"><a href="{{ quote.url }}">{{ quote.author }}</a></footer>
</blockquote>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div>
<div class="container">
<h1 class="display-4 display-4-md"><a name="news">Latest news and articles</a></h1>
<div class="news">
{% for item in site.data.news %}
<div class="news-item card my-4">
<div class="card-body">
<h5 class="card-title"><a class="text-dark" href="{{ item.url }}">{{ item.title }}</a></h5>
<h6 class="card-subtitle text-muted">by {% if item.author.link %}<a
href="{{ item.author.link }}">{{ item.author.name }}</a>{% else %}{{ item.author.name }}{% endif %},
{{ item.year }}, {{ item.language }}
</h6>
<p class="card-text mt-4">
{{ item.teaser }}
</p>
<a href="{{ item.url }}" class="card-link">Read on</a>
</div>
</div>
{% endfor %}
</div>
<p>Got a coderetreat related article to share? File an issue or send us a Pull Request <a
href="https://github.com/coderetreat/coderetreat.org">on GitHub</a>!</p>
</div>
</div>
<script type="module" src="{{ "/js/gameOfLifeJumbotron.js" | relative_url }}"></script>
<script type="module" src="{{ "/js/upcoming-events.js" | relative_url }}"></script>