-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
120 lines (108 loc) · 6.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Code Badges - Progress badges for code learning platforms</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css">
<link rel="stylesheet" href="./dist/codebadges.min.css">
<link rel="stylesheet" href="./css/example.css">
<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico">
<meta name="description" content="Get progress badges for code learning platforms like FreeCodeCamp, use them on your site or blog. Built by codemzy.">
<!--Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="manifest" href="./img/manifest.json">
<link rel="mask-icon" href="./img/safari-pinned-tab.svg" color="#ec1b21">
<meta name="theme-color" content="#ec1b21">
</head>
<body>
<div class="jumbotron text-center">
<img id="cb-logo" src="./img/codebadges_logo.png" alt="codeBadges" />
<h1>codeBadges</h1>
<p>Hello developer... time to show off your progress and achievements!</p>
</div>
<div align="center">
<div class="code-badge freecodecamp"></div>
<div class="code-badge github"></div>
<div class="code-badge codeschool"></div>
<div class="code-badge codecademy"></div>
<div class="code-badge treehouse"></div>
<div class="code-badge codewars"></div>
</div>
<div id="share" class="jumbotron text-center">
<a class="btn btn-sm btn-default" href="https://github.com/codemzy/codebadges" target="_blank">View on GitHub</a>
<a class="btn btn-sm btn-default" href="https://twitter.com/intent/tweet?text=Get some snazzy code badges to show your achievements https://codemzy.github.io/codebadges (via @codemzy)" target="_blank" data-size="large" data-via="codemzy">Share on Twitter</a>
<a class="btn btn-sm btn-default" href="https://www.facebook.com/sharer/sharer.php?u=https%3A//codemzy.github.io/codebadges/" target="_blank">Share on Facebook</a>
</div>
<div class="container">
<h2>Get Started</h2>
<h4>CDN.</h4>
<pre>
<span class="comment"><!-- codeBadges minified CSS --></span>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codemzy/codebadges@1.0.4/dist/codebadges.min.css">
<span class="comment"><!-- codeBadges minified JavaScript --></span>
<script src="https://cdn.jsdelivr.net/gh/codemzy/codebadges@1.0.4/dist/codebadges.min.js"></script></pre>
<p><span class="label label-danger">Important:</span> codeBadges JS relies on jQuery JS, so you need to load jQuery JS before codeBadges JS.</p>
<h2>Usage</h2>
<h4>HTML.</h4>
<b>Add a single badge...</b>
<pre><div class="code-badge freecodecamp"></div></pre>
<b>Or a row of badges...</b>
<pre>
<div align="center">
<div class="code-badge freecodecamp"></div>
<div class="code-badge github"></div>
<div class="code-badge codeschool"></div>
<div class="code-badge codecademy"></div>
<div class="code-badge treehouse"></div>
<div class="code-badge codewars"></div>
</div></pre>
<h4>JavaScript.</h4>
<b>Now activate your badges with one line of js...</b>
<pre>codeBadges("codemzy").freecodecamp().github().codeschool().codecademy().treehouse("ryancarson").codewars();</pre>
<p>Activate codeBadges with your main username <code>codeBadges("username")</code> and then chain on the badges you have in your html.
Got a different username for some platforms? No worries, just pass that username in to the platform, e.g. <code>.github("differentName")</code>.</p>
<h2>Customising</h2>
<h4>Small badges.</h4>
<pre><div class="code-badge badge-small freecodecamp"></div></pre>
<p>Just add the class <code>badge-small</code> to your badges to make them smaller.</p>
<div align="center">
<div class="code-badge badge-small freecodecamp"></div>
<div class="code-badge badge-small github"></div>
<div class="code-badge badge-small codeschool"></div>
<div class="code-badge badge-small codecademy"></div>
<div class="code-badge badge-small treehouse"></div>
<div class="code-badge badge-small codewars"></div>
</div>
<h4>Custom colours.</h4>
<p>Got a strict colour scheme and want all your badges in pink? Who am I to judge?!</p>
<b>Add your own classes...</b>
<pre>
.code-badge.pink-badge .outer {
background-color: #DB0A5B;
}</pre>
<p>In your own css, just add a code badge class for <code>.pink-badge</code> like the example above.</p>
<b>Apply to your html...</b>
<pre><div class="code-badge freecodecamp pink-badge"></div></pre>
<div align="center">
<div class="code-badge freecodecamp pink-badge"></div>
</div>
<h2>Badges</h2>
<h4>Available.</h4>
<code>codecademy</code>, <code>codeschool</code>, <code>codewars</code>, <code>freecodecamp</code>, <code>github</code>, <code>treehouse</code>.
<h4>Requests.</h4>
<p>Want a new badge adding? Send a request <a href="https://github.com/codemzy/codebadges">via the issues</a> or submit a pull request.</p>
<p>Don't forget to include your username on the requested site so it can featured. The site must have public profiles so that the user info can be requested via an api or scraped from a public profile page.</p>
</div>
<!--Footer-->
<div id="footer" class="jumbotron text-center">
© 2018 built by <a href="https://codemzy.github.io/" target="_blank">codemzy</a>
</div>
<!--SCRIPTS-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="./dist/codebadges.min.js"></script>
<script src="./js/example.js"></script>
</body>
</html>