forked from pikock/bootstrap-magic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·241 lines (204 loc) · 14.7 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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="fragment" content="!">
<link rel="stylesheet" href="app/css/bootstrap.css">
<link rel="stylesheet" href="app/css/app.css">
<title>Bootstrap Magic : Generate your own bootstrap theme quickly and easily</title>
<meta name="description" content="Simple and fast Twitter bootstrap themes generator made with AngularJS. Design your own bootstrap theme, like it ? Download less or css on the go." />
<link itemprop="SoftwareApplicationCategory" href="http://schema.org/SoftwareApplication"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37710723-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body data-ng-cloak>
<div class="protected">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" title="Bootstrap Magic written in AngularJS">Bootstrap Magic</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html" title="bootstrap themes generator presentation">Home</a></li>
<li ><a href="app/index.html" title="bootstrap themes generator">Editor</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Old Versions<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="3.0">Version Bootstrap 3.0</a></li>
<li><a href="2.3.2">Version Bootstrap 2.3.2</a></li>
</ul>
</li>
<li ><a href="http://www.pikock.com/en?utm_source=Bootstrap%20EN&utm_medium=Bootstrap%20Header%20EN&utm_campaign=Bootstrap" title="Create professional website without any technical skills">Create your website with Pikock</a></li>
</ul>
<ul class="nav navbar-nav navbar-right socialButtons">
<li>
<div class="fb-like" data-href="http://pikock.github.io/bootstrap-magic/" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" data-action="like"></div>
</li>
<li class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://pikock.github.io/bootstrap-magic/" data-text="Bootstrap Magic feat Bootstrap 3 : Awesome theme generator with live preview" data-lang="en" data-hashtags="bootstrap,angularjs">Tweeter</a>
</li>
<li><div class="g-plusone" data-size="medium" data-href="http://pikock.github.io/bootstrap-magic/"></div></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="protected" itemscope itemtype="http://schema.org/SoftwareApplication">
<div class="protectedIntroBody">
<section class="importantContainer">
<div class="container">
<section class="row">
<div class="col-md-12">
<div class="introHeader">
<h1><span itemprop="name">Bootstrap Magic</span><small>featuring Boostrap 3.1, made with AngularJS</small></h1>
<p class="lead"><span itemprop="description">Easily create your own <a href="http://getbootstrap.com/" title="Twitter Bootstrap themes generator">Twitter Bootstrap</a> theme.</span> Like it ? Save it !</p>
<p class="buttonsBlocks">
<a class="btn btn-magic btn-lg" href="app/index.html" title="try bootstrap themes generator angularjs">
Create your theme
</a>
<span class="github">
<a href="https://github.com/pikock/bootstrap-magic" title="angular js bootstrap themes generator"> » GitHub project</a>
</span>
<span class="github">
<a href="3.0" title="angular js bootstrap themes generator"> 3.0</a>
-
<a href="2.3.2" title="angular js bootstrap themes generator"> 2.3.2</a>
</span>
</p>
</div>
</div>
</section>
</div>
</section>
<div class="container">
<section class="row">
<div class="col-md-12">
<h2 class="centerTitle">What's great ? </h2>
<section class="row">
<div class="col-md-4">
<h4><span class="apico interface apico-sax"></span>Bootstrap 3.1</h4>
<p>New Twitter Bootstrap Framework included for more awesomeness.</p>
</div>
<div class="col-md-4">
<h4><span class="apico games apico-eye-open"></span>Contextual and live preview</h4>
<p>See instantly what you are changing on the content.</p>
</div>
<div class="col-md-4">
<h4><span class="apico interface apico-magic-wand"></span>Magic Typeahead </h4>
<p>Awesome typehead function included :<b> Find variables as you type.</b></p>
</div>
</section>
<section class="row">
<div class="col-md-4">
<h4><span class="apico games apico-cloud-upload"></span>Import your variables</h4>
<p>You already have set some variables. Import them and you can even custom your own new variables.</p>
</div>
<div class="col-md-4">
<h4><span class="apico games apico-brush"></span>Colorpicker</h4>
<p>Got the color that you love with <a href="http://www.eyecon.ro/bootstrap-colorpicker/" title="colorpicker bootstrap">Colorpicker.</a></p>
</div>
<div class="col-md-4">
<h4><span class="apico interface apico-text-tools"></span>Google Webfonts</h4>
<p>Add awesome webfonts from <a href="http://www.google.com/fonts#" title="Google Webfonts">Google Webfont</a>. They are all included in font magic typehead.</p>
</div>
</section>
<section class="row">
<div class="col-md-4">
<h4><span class="apico games apico-circle-plus"></span>Less included</h4>
<p>You like <a href="http://lesscss.org/" title="Less css">Less </a>? Bootstrap theme editor support lovely Less language with all the functions. Use all <b>the functions less that you love.</b></p>
</div>
<div class="col-md-4">
<h4><span class="apico media apico-doc-out"></span>Download</h4>
<p>Satisfy? Download your personalized CSS, minified or not and LESS variables.</p>
</div>
<div class="col-md-4">
<h4><span class="apico games apico-atoms"></span>AngularJS Project</h4>
<p><a href="http://angularjs.org/" title="angular js framework">Awesome framework</a> for an awesome project. Check out our main Project Pikock, all made with AngularJS and Rails : <a href="http://www.pikock.com/en" title="create your website easily"> Pikock.</a></p>
</div>
</section>
</div>
</section>
</div>
<div class="buttonsDiv">
<div class="container">
<p class="buttonsBlocks lead">
Create simply your own Twitter Bootstrap theme. Like it ? Save it !
<a class="btn btn-magic btn-lg" href="app/index.html" title="try bootstrap theme generator angularjs">
Create your theme now
</a>
</p>
</div>
</div>
<div class="container">
<section class="row">
<div class="col-md-12 blockquotes">
<h2 class="centerTitle">They talked about it.</h2>
<section class="row">
<div class="col-md-4">
<blockquote class="twitter-tweet"><p>Bootstrap Magic featuring Boostrap 3 <a href="http://t.co/lZFNYyKP0M">http://t.co/lZFNYyKP0M</a> (<a href="http://t.co/uYWmjLxyVP">http://t.co/uYWmjLxyVP</a>)</p>— Hacker News 50 (@newsyc50) <a href="https://twitter.com/newsyc50/statuses/374958983737389057">September 3, 2013</a></blockquote>
<blockquote class="twitter-tweet"><p>Bootstrap Magic : Generate your own bootstrap theme quickly and easily --> <a href="http://t.co/2Dn780h9IW">http://t.co/2Dn780h9IW</a></p>— Jeremy Morgan (@JeremyCMorgan) <a href="https://twitter.com/JeremyCMorgan/statuses/375227302575370240">September 4, 2013</a></blockquote>
<blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic – A Twitter Bootstrap themes generator <a href="http://t.co/sOTUKTM5" title="http://ow.ly/gV0T2">ow.ly/gV0T2</a></p>— Paul Andrew (@speckyboy) <a href="https://twitter.com/speckyboy/status/292210993117941762">Janvier 18, 2013</a></blockquote>
</div>
<div class="col-md-4">
<blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic – Personnalisez vos templates Twitter Bootstrap en quelques clics <a href="http://t.co/cj0vRiiJ" title="http://goo.gl/fb/Vp76B">goo.gl/fb/Vp76B</a> <a href="https://twitter.com/search/%23blog">#blog</a></p>— Korben (@Korben) <a href="https://twitter.com/Korben/status/291541713510621184" data-datetime="2013-01-16T13:45:35+00:00">Janvier 16, 2013</a></blockquote>
<blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic : Twitter bootstrap themes generator <a href="http://t.co/b98IA6Po" title="http://pikock.github.com/bootstrap-magic/index.html">pikock.github.com/bootstrap-magi…</a></p>— Daniel Stefanovic (@DaniStefanovic) <a href="https://twitter.com/DaniStefanovic/status/294008080335765504">Janvier 23, 2013</a></blockquote>
</div>
<div class="col-md-4">
<blockquote class="twitter-tweet"><p>Bootstrap Magic <a href="http://t.co/1EOz9Sd08V">http://t.co/1EOz9Sd08V</a> 일전에 소개드린 부트스트랩 테마 제너레이터가 버전 3을 지원하네요. 당연하지만^^</p>— Nolboo Kim (@n0lb00) <a href="https://twitter.com/n0lb00/statuses/375189391725330432">September 4, 2013</a></blockquote>
<blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic - another easy way to theme and set your Bootstrap-powered site apart. <a href="http://t.co/bLB6kvR1" title="http://pikock.github.com/bootstrap-magic/index.html">pikock.github.com/bootstrap-magi…</a></p>— Brian Ford (@briantford) <a href="https://twitter.com/briantford/status/291608969963782145" data-datetime="2013-01-16T18:12:50+00:00">Janvier 16, 2013</a></blockquote>
<blockquote class="twitter-tweet"><p>Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 <a href="http://t.co/R9JxUBeFps">http://t.co/R9JxUBeFps</a></p>— phpspot (@phpspot_kj) <a href="https://twitter.com/phpspot_kj/statuses/375410731711078401">September 5, 2013</a></blockquote>
</div>
</section>
</div>
</section>
</div>
</div>
</div>
<footer class="protected">
<div class="footer">
<div class="container">
<div class="col-md-12 ">
<p class="pull-left">Code licensed under <a href="http://opensource.org/licenses/MIT" title="MIT licence">MIT licence</a></p>
<div class="pull-left" xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/" about="http://subtlepatterns.com/inspiration-geometry/"><span property="dct:title">/ Subtle Patterns</span> (<a rel="cc:attributionURL" property="cc:attributionName" href="http://subtlepatterns.com">Subtle Patterns</a>) / <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a></div>
<p class="pull-right">Handmade by <span itemprop="author" itemscope itemtype="http://schema.org/Organization"><a itemprop="url" href="http://www.pikock.com/en?utm_source=Bootstrap%20EN&utm_medium=Bootstrap%20Footer%20EN&utm_campaign=Bootstrap" title="create your website easily"><span itemprop="name">Pikock<span></a> </span>x <a href="http://www.autreplanete.com/" title="web agency paris">Autre planète</a> in Paris.</p>
</div>
</div>
</div>
</footer>
<div id="fb-root"></div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="app/lib/jquery/jquery-1.8.3.min.js"></script>
<script src="twitter-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=239545502808545";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.___gcfg = {lang: 'fr'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</body>
</html>