-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
92 lines (85 loc) · 7.2 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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Selectors.io</title>
<meta property="og:site_name" content="Selectors.io">
<meta property="og:title" content="Selectors.io">
<meta property="og:type" content="website">
<meta property="og:description" content="A nifty website designed to answer the age-old question of 'What does this CSS selector do?'. Paste in your CSS selector and selectors.io will deconstruct it and tell you exactly what it does!">
<meta property="og:url" content="https://selectors.io">
<meta property="og:image" content="https://selectors.io/assets/icon.png">
<meta name="description" content="A nifty website designed to answer the age-old question of 'What does this CSS selector do?'. Paste in your CSS selector and selectors.io will deconstruct it and tell you exactly what it does!">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="image_src" href="dist/assets/icon.png">
<link rel="icon" type="image/png" href="dist/assets/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/css/core.css">
<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>
<script src="dist/scripts/external/selectors-html.min.js"></script>
<script src="dist/scripts/core.min.js"></script>
<script type="text/babel" src="dist/scripts/ui.js"></script>
</head>
<body>
<header id="logo">
<a href="/">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="pull-left">
<img src="dist/assets/icon.png" height="64" width="64" />
</div>
<h1>
Selectors.io
</h1>
<p>
Answering the age-old question of ‘What does this CSS selector do?’
</p>
</div>
</div>
</div>
</a>
</header>
<section id="main-container">
<div class="container">
<div class="row">
<div class="col-lg-12">
<section id="splash-area">
<!--googleoff: index-->
<div class="alert alert-warning">
<p><strong>Loading...</strong></p>
<p>If this is taking a long time, <a href="/">click here</a> to reload the page.</p>
</div>
<!--googleon: index-->
<div class="row" id="splash" data-reactid=".0.1"><div class="col-md-12" data-reactid=".0.1.0"><article id="start-here" data-reactid=".0.1.0.0"><span class="text-success" data-reactid=".0.1.0.0.0"><p class="arrows lead text-center" data-reactid=".0.1.0.0.0.0"><i class="fa fa-arrow-up" data-reactid=".0.1.0.0.0.0.0"></i><i class="fa fa-arrow-up" data-reactid=".0.1.0.0.0.0.1"></i><i class="fa fa-arrow-up" data-reactid=".0.1.0.0.0.0.2"></i></p><p class="lead text-center" data-reactid=".0.1.0.0.0.1">Start by typing or pasting in any CSS selector you like into the above text input field</p></span></article><hr data-reactid=".0.1.0.1"><article id="welcome" data-reactid=".0.1.0.2"><h2 data-reactid=".0.1.0.2.0">Welcome</h2><p data-reactid=".0.1.0.2.1"><strong data-reactid=".0.1.0.2.1.0">Selectors.io</strong><span data-reactid=".0.1.0.2.1.1"> has only recently been launched and is still in a very beta-esque state.</span></p><p data-reactid=".0.1.0.2.2"><span data-reactid=".0.1.0.2.2.0">It's open-sourced on </span><i class="fa fa-github" data-reactid=".0.1.0.2.2.1"></i><span data-reactid=".0.1.0.2.2.2"> GitHub at </span><a href="https://github.com/selectors/selectors.io" data-reactid=".0.1.0.2.2.3">github.com/selectors/selectors.io</a><span data-reactid=".0.1.0.2.2.4">.</span><br data-reactid=".0.1.0.2.2.5"><span data-reactid=".0.1.0.2.2.6">If you find any bugs, feel free to report them at </span><i class="fa fa-bug" data-reactid=".0.1.0.2.2.7"></i><span data-reactid=".0.1.0.2.2.8"> </span><a href="https://github.com/selectors/selectors.io/issues" data-reactid=".0.1.0.2.2.9">github.com/selectors/selectors.io/issues</a><span data-reactid=".0.1.0.2.2.a">.</span></p></article><h4 data-reactid=".0.1.0.3">Examples</h4><p data-reactid=".0.1.0.4"><span data-reactid=".0.1.0.4.0">If you're lost for inspiration, you can click on any of the below examples to give Selectors.io a try!</span><br data-reactid=".0.1.0.4.1"><span class="text-muted" data-reactid=".0.1.0.4.2"><span data-reactid=".0.1.0.4.2.0">Note that you can get back to this list at any point by clicking the </span><i class="fa fa-undo" data-reactid=".0.1.0.4.2.1"></i><span data-reactid=".0.1.0.4.2.2"> button.</span></span></p><blockquote data-reactid=".0.1.0.5"><p data-reactid=".0.1.0.5.$1"><strong data-reactid=".0.1.0.5.$1.0"><a class="selector" data-reactid=".0.1.0.5.$1.0.0">.list-group-item > .badge + .badge</a></strong><small data-reactid=".0.1.0.5.$1.1">Bootstrap</small></p><p data-reactid=".0.1.0.5.$2"><strong data-reactid=".0.1.0.5.$2.0"><a class="selector" data-reactid=".0.1.0.5.$2.0.0">a[href^="http:"]</a></strong><small data-reactid=".0.1.0.5.$2.1"><a href="http://stackoverflow.com/q/3859101/1317805">This</a> Stack Overflow question</small></p><p data-reactid=".0.1.0.5.$3"><strong data-reactid=".0.1.0.5.$3.0"><a class="selector" data-reactid=".0.1.0.5.$3.0.0">ns|*</a></strong><small data-reactid=".0.1.0.5.$3.1">The Selectors Level 3 W3C Recommendation</small></p><p data-reactid=".0.1.0.5.$0"><strong data-reactid=".0.1.0.5.$0.0"><a class="selector" data-reactid=".0.1.0.5.$0.0.0">audio:not([controls])</a></strong><small data-reactid=".0.1.0.5.$0.1">Normalize.css</small></p></blockquote></div></div>
</section>
<main role="main" id="main-area"></main>
</div>
</div>
</div>
</section>
<footer id="foot">
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-xs-12">
<p>
<strong><a href="https://selectors.io">Selectors.io</a></strong> is maintained by <i class="fa fa-stack-overflow"></i> <a href="http://stackoverflow.com/users/1317805/james-donnelly">James Donnelly</a> (<a href="https://twitter.com/inb4">@inb4</a>) and is open-sourced at <i class="fa fa-github"></i> <a href="https://github.com/selectors/selectors.io">github.com/selectors/selectors.io</a>
<br>
Found a bug? Have a suggestion? Make it known at <i class="fa fa-bug"></i> <a href="https://github.com/selectors/selectors.io/issues">github.com/selectors/selectors.io/issues</a>
</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</body>
</html>