Skip to content

Commit 6a2b39e

Browse files
author
Siavash Ghorbani
committed
First
0 parents  commit 6a2b39e

13 files changed

+2672
-0
lines changed

‎css/bootstrap-responsive.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/bootstrap.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/cid.css

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
body {
2+
background-color: #000;
3+
background-image: url("../img/top-background.png");
4+
background-repeat: no-repeat;
5+
background-size: 100% auto;
6+
text-align: center;
7+
padding-top: 30px;
8+
-webkit-font-smoothing: antialiased;
9+
font-family: "open sans", helvetica, arial, sans-serif;
10+
}
11+
12+
h2, label {
13+
text-transform: uppercase;
14+
color: #555;
15+
font-weight: 700;
16+
font-size: 1em;
17+
margin: 0;
18+
}
19+
20+
ul {
21+
list-style-type: none;
22+
margin: 0;
23+
}
24+
25+
li, h3 {
26+
font-size: 2.5em;
27+
line-height: 1.7em;
28+
color: #ccc;
29+
font-weight: 300;
30+
margin: 0;
31+
}
32+
33+
.part {
34+
padding: 0px 10px 100px 10px;
35+
}
36+
37+
.sponsors img {
38+
margin: 1em 2em 0 2em;
39+
opacity: 0.8;
40+
-webkit-transition: all 0.15s ease-in-out;
41+
zoom: 0.5;
42+
}
43+
44+
.sponsors img:hover {
45+
opacity: 1.0;
46+
}
47+
48+
#logo {
49+
max-width: 35%;
50+
min-width: 280px;
51+
margin: 5% 0 5%;
52+
-moz-animation: fadein 2s 1s both; /* Firefox */
53+
-webkit-animation: fadein 2s 1s both; /* Safari and Chrome */
54+
-o-animation: fadein 2s 1s both; /* Opera */
55+
animation: fadein 2s 1s both;
56+
}
57+
58+
@-moz-keyframes fadein { /* Firefox */
59+
from {
60+
opacity:0;
61+
}
62+
to {
63+
opacity:1;
64+
}
65+
}
66+
67+
@-webkit-keyframes fadein { /* Safari and Chrome */
68+
from {
69+
opacity:0;
70+
}
71+
to {
72+
opacity:1;
73+
}
74+
}
75+
76+
@-o-keyframes fadein { /* Opera */
77+
from {
78+
opacity:0;
79+
}
80+
to {
81+
opacity: 1;
82+
}
83+
}
84+
85+
@keyframes fadein {
86+
from {
87+
opacity:0;
88+
}
89+
to {
90+
opacity:1;
91+
}
92+
}
93+
94+
.video-player {
95+
position: relative;
96+
max-width: 934px;
97+
margin: 0 auto;
98+
cursor: pointer;
99+
}
100+
101+
.video-player .video-player-play {
102+
position: absolute;
103+
top: 50%;
104+
left: 50%;
105+
width: 15%;
106+
height: 15%;
107+
max-width: 141px;
108+
max-height: 141px;
109+
margin: -3% 0 0 -3%;
110+
background: url('../img/play.png') 0 0 no-repeat;
111+
background-size: contain;
112+
opacity: 0.0;
113+
-webkit-transition: all 0.15s ease-in-out;
114+
}
115+
116+
.video-player .video-player-backdrop {
117+
background-color: #000;
118+
position: absolute;
119+
top: 0;
120+
right: 0;
121+
bottom: 0;
122+
left: 0;
123+
opacity: 0;
124+
-webkit-transition: all 0.15s ease-in-out;
125+
max-width: 700px;
126+
margin: 0 auto;
127+
}
128+
129+
.video-player img {
130+
width: 100%;
131+
max-width: 700px;
132+
-webkit-transition: all 0.15s ease-in-out;
133+
opacity: 0.9;
134+
}
135+
136+
.video-player:hover .video-player-play {
137+
opacity: 0.7;
138+
}
139+
.video-player:hover .video-player-backdrop {
140+
opacity: .7;
141+
}
142+
.video-player:hover .video-player-caption {
143+
opacity: 1;
144+
}
145+
146+
.video-player iframe {
147+
position: absolute;
148+
top: 0;
149+
left: 0;
150+
width: 100%;
151+
height: 100%;
152+
}
153+
154+
.video-player.playing, .video-player.disabled {
155+
cursor: default;
156+
}
157+
158+
.video-player.playing::after, .video-player.disabled::after {
159+
display: none;
160+
}
161+
162+
.share {
163+
position: fixed;
164+
top: 10px;
165+
left: 10px;
166+
z-index: 1000;
167+
}
168+
169+
.register {
170+
margin: 20px 0;
171+
font-size: 150%;
172+
}
173+
174+
.location {
175+
text-transform: none;
176+
color: white;
177+
}
178+
179+
.location a {
180+
color: white;
181+
text-decoration: underline;
182+
}
183+
184+
.location a:hover {
185+
color: white;
186+
text-decoration: underline;
187+
}
188+
189+
.register:hover {
190+
}
191+
192+
.register a {
193+
font-size: 75%;
194+
background: #57C88C;
195+
padding: 10px 30px;
196+
color: #fff;
197+
border-radius: 50px;
198+
text-decoration: none;
199+
}
200+
201+
.register a:hover {
202+
text-decoration: none;
203+
background-color: #37b87C;
204+
}
205+
206+
/****************************************************************************
207+
* Newsletter Subscribe Form
208+
***************************************************************************/
209+
210+
label {
211+
margin-bottom: 20px;
212+
}
213+
214+
#newsletter-subscribe input {
215+
background-color: #111;
216+
padding: 10px;
217+
color: #999;
218+
}
219+
220+
#newsletter-subscribe button {
221+
background-color: #111;
222+
color: #999;
223+
padding: 10px;
224+
margin-top: -11px;
225+
margin-left: 10px;
226+
display: inline-block;
227+
border: 1px solid #ccc;
228+
-webkit-border-radius: 4px;
229+
-moz-border-radius: 4px;
230+
border-radius: 4px;
231+
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
232+
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
233+
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
234+
-webkit-transition: border linear .2s,box-shadow linear .2s;
235+
-moz-transition: border linear .2s,box-shadow linear .2s;
236+
-o-transition: border linear .2s,box-shadow linear .2s;
237+
transition: border linear .2s,box-shadow linear .2s;
238+
}
239+
240+
#newsletter-subscribe button:hover,
241+
#newsletter-subscribe input:focus {
242+
border-color: #59cb8f;
243+
-webkit-box-shadow: 0 0 6px #73e8aa;
244+
-moz-box-shadow: 0 0 6px #73e8aa;
245+
box-shadow: 0 0 6px #73e8aa;
246+
}

‎img/backdrop.png

412 KB
Loading

‎img/glyphicons-halflings-white.png

8.57 KB
Loading

‎img/glyphicons-halflings.png

12.5 KB
Loading

‎img/logo.png

23.8 KB
Loading

‎img/logo_tictail.png

3.24 KB
Loading

‎img/play.png

4.99 KB
Loading

‎img/top-background.png

930 KB
Loading

‎index.html

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>
6+
Code in the Dark - you thought you knew front-end
7+
</title>
8+
<meta name="description" content="Code in the Dark, you thought you knew front-end. Code in the Dark is a programming competition concept created by Tictail.">
9+
<meta name="author" content="Tictail">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<link rel="stylesheet" href="css/bootstrap.min.css" />
12+
<link rel="stylesheet" href="css/cid.css" />
13+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
14+
<link rel="shortcut icon" href="/favicon.ico">
15+
<script>
16+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
17+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
18+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
19+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
20+
21+
ga('create', 'UA-26369943-9', 'codeinthedark.com');
22+
ga('send', 'pageview');
23+
24+
</script>
25+
<!--[if lt IE 9]>
26+
<script src="//dmb7ixdwya1nh.cloudfront.net/media/js/html5shiv.js?31"></script>
27+
<![endif]-->
28+
</head>
29+
30+
<body>
31+
<div id="fb-root"></div>
32+
<script>(function(d, s, id) {
33+
var js, fjs = d.getElementsByTagName(s)[0];
34+
if (d.getElementById(id)) return;
35+
js = d.createElement(s); js.id = id;
36+
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
37+
fjs.parentNode.insertBefore(js, fjs);
38+
}(document, 'script', 'facebook-jssdk'));</script>
39+
40+
<div class="share">
41+
<div class="button" style="position: relative;">
42+
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://codeinthedark.com/" data-via="tictail">Tweet</a>
43+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
44+
</div>
45+
<div class="button">
46+
<div class="fb-like" data-href="http://codeinthedark.com/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
47+
</div>
48+
</div>
49+
50+
<div id="top-background"></div>
51+
<img id="logo" src="img/logo.png" alt="Code In the Dark - Logo">
52+
53+
<div class="part">
54+
<!-- Begin MailChimp Signup Form -->
55+
<form action="http://tictail.us5.list-manage.com/subscribe/post?u=60d42db48b2624c1363510b97&amp;id=9e1e3399f7" method="post" id="newsletter-subscribe" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
56+
<label for="mce-EMAIL">Keep me posted about upcoming events</label>
57+
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your email address" required>
58+
<button type="submit" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
59+
</form>
60+
<!--End mc_embed_signup-->
61+
</div>
62+
63+
<div class="part">
64+
<div id="video-container">
65+
<div class="video-player" data-url="//player.vimeo.com/video/63318482?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1">
66+
<img src="img/backdrop.png" alt="Code in the Dark">
67+
<div class="video-player-backdrop"></div>
68+
<div class="video-player-play"></div>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div class="part" style="color: #fff;">
74+
<h2>Community organized events</h2>
75+
<p>
76+
<a href="https://github.com/codeinthedark/codeinthedark.github.io">Pull request to add</a>
77+
</p>
78+
</div>
79+
80+
<div class="part">
81+
<h2>The rules</h2>
82+
<ul>
83+
<li>15 min</li>
84+
<li>HTML/CSS</li>
85+
<li>No previews</li>
86+
<li>One champion</li>
87+
</ul>
88+
</div>
89+
90+
<div class="part" style="color: #fff;">
91+
<h2>Previous official events</h2>
92+
<p>Stockholm &middot; March 2015</p>
93+
<p>New York &middot; October 2014</p>
94+
<p>Paris &middot; March 2014</p>
95+
<p>Stockholm &middot; December 2013</p>
96+
<p>Paris &middot; October 2013</p>
97+
<p>Stockholm &middot; February 2013</p>
98+
</div>
99+
100+
<div class="part" style="color: #fff;">
101+
<p>Questions? <a href="mailto:[email protected]">[email protected]</a></p>
102+
</div>
103+
104+
<div class="part">
105+
<h2>Proudly presented by</h2>
106+
<div class='sponsors'>
107+
<a href='https://tictail.com' target='_blank'><img src='img/logo_tictail.png' alt='Tictail logo'/></a>
108+
</div>
109+
</div>
110+
111+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
112+
<script src="/js/bootstrap.js"></script>
113+
<script src="/js/scripts.js"></script>
114+
</body>
115+
</html>

0 commit comments

Comments
 (0)