-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
105 lines (90 loc) · 4.12 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Code in the Dark - you thought you knew front-end
</title>
<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.">
<meta name="author" content="Tictail">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/cid.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="top-background"></div>
<img id="logo" src="img/logo.png" alt="Code In the Dark - Logo">
<div class="part">
<h2>The rules</h2>
<ul>
<li>15 min</li>
<li>HTML/CSS</li>
<li>No previews</li>
<li>One champion</li>
</ul>
</div>
<div class="part rules">
<h3>Details</h3>
<ol>
<li>Each contestant receives a link to a editor, which includes a screenshot of the page they should implement with HTML/CSS and any additional assets they might need.</li>
<li>No iframes, frameworks, snippets or other assets outside of the ones listed in the instructions are allowed. The site should be built from scratch during the competition.</li>
<li>The contestant should have the editor in full screen mode, and is never allowed to exit out of it or use any measurement tools.</li>
<li>Previews of the results are strictly forbidden until the time is over.</li>
<li>Once the 15 minute timer runs out each contestant presents their result to the audience, who then vote on their favorite to decide the winner.</li>
</ol>
</div>
<div class="rules">
<h3>Where & When</h3>
<div class="map"></div>
<p>Event is held at <strong>Work-Work</strong> at <strong>Tuesday, September 13th</strong> from 19:00 and is open for anyone, even if you don't want to compete. After all the audience is the jury and decides who goes home with an awesome price.</p>
</div>
<div class="part">
<div class="join-wrapper">
<a href="https://www.facebook.com/events/1655448911439416/" class="join">Join as audience</a>
</div>
<div class="join-wrapper">
<a href="https://www.meetup.com/BartJS/events/233440646/" class="join">Join as competitor</a>
</div>
<h2>
...and have a chance to win an awesome price
</h2>
</div>
<div class="part">
<p>Questions? <a href="mailto:bartjs.trh@gmail.com">bartjs.trh@gmail.com</a></p>
</div>
<div class="part">
<h2>Based on the original Code in the Dark event:</h2>
<p>
<a href="https://codeinthedark.com">https://codeinthedark.com</a>
</p>
</div>
<div class="part">
<h2>Community organized events</h2>
<p>
<a href="https://github.com/codeinthedark/codeinthedark.github.io">How to organize Code in the Dark</a>
</p>
</div>
<script type="text/javascript">
function initMap() {
var mapEl = document.querySelector('.map');
var myLatlng = new google.maps.LatLng(63.4328726,10.39329999);
var map = new google.maps.Map(mapEl, {
center: myLatlng,
scrollwheel: false,
zoom: 16,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: myLatlng,
title: "Work Work",
});
marker.setMap(map);
var styles = [{"stylers":[{"hue":"#ff1a00"},{"invert_lightness":true},{"saturation":-100},{"lightness":33},{"gamma":0.5}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#2D333C"}]}];
map.setOptions({styles: styles});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSaMK_hxVmge_1W_efyCqcj0b9nh7SCnI&callback=initMap"></script>
</body>
</html>