Skip to content

Commit d2abc93

Browse files
bootflatbootflat
committed
add color picker pages
1 parent b4bb7d9 commit d2abc93

15 files changed

Lines changed: 2432 additions & 8 deletions

‎README.markdown‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,12 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
7979
+ [Getting Started](http://bootflat.github.io/getting-started.html)
8080
+ [Documentation](http://bootflat.github.io/documentation.html)
8181
+ [Free PSD](http://bootflat.github.io/free-psd.html)
82+
+ [Flat UI Color Picker](http://bootflat.github.io/color-picker.html)
8283

8384
## Changelog:
8485

86+
2014/8/26 add `color picker`, you can make a flat design with it
87+
8588
2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`
8689

8790
2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper`

‎color-picker-blue.html‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Color Picker - Blue - Bootflat</title>
6+
<!-- Sets initial viewport load and disables zooming -->
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8+
<!-- SmartAddon.com Verification -->
9+
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10+
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11+
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12+
<link rel="shortcut icon" href="favicon_16.ico"/>
13+
<link rel="bookmark" href="favicon_16.ico"/>
14+
<!-- site css -->
15+
<link rel="stylesheet" href="css/site.min.css">
16+
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17+
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18+
<!--[if lt IE 9]>
19+
<script src="js/html5shiv.js"></script>
20+
<script src="js/respond.min.js"></script>
21+
<![endif]-->
22+
<script type="text/javascript" src="js/site.min.js"></script>
23+
</head>
24+
<body>
25+
<div class="docs-header">
26+
<!--nav-->
27+
<nav class="navbar navbar-default navbar-custom" role="navigation">
28+
<div class="container">
29+
<div class="navbar-header">
30+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31+
<span class="sr-only">Toggle navigation</span>
32+
<span class="icon-bar"></span>
33+
<span class="icon-bar"></span>
34+
<span class="icon-bar"></span>
35+
</button>
36+
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37+
</div>
38+
<div class="collapse navbar-collapse">
39+
<ul class="nav navbar-nav navbar-right">
40+
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41+
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
42+
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43+
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44+
</ul>
45+
</div>
46+
</div>
47+
</nav>
48+
<!--header-->
49+
<div class="topic">
50+
<div class="container">
51+
<div class="col-md-8">
52+
<h3>Color Picker</h3>
53+
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54+
</div>
55+
<div class="col-md-4">
56+
<div class="advertisement">
57+
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58+
</div>
59+
</div>
60+
</div>
61+
<div class="topic__infos">
62+
<div class="container color-picker-nav">
63+
<a href="color-picker.html">All</a>
64+
<a href="color-picker-red.html">Red</a>
65+
<a href="color-picker-pink.html">Pink</a>
66+
<a href="color-picker-purple.html">Purple</a>
67+
<a class="current" href="color-picker-blue.html">Blue</a>
68+
<a href="color-picker-green.html">Green</a>
69+
<a href="color-picker-yellow.html">Yellow</a>
70+
<a href="color-picker-gray.html">Gray</a>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
<!--documents-->
76+
<div class="color-wrap clearfix">
77+
<div class="color-picker">
78+
<div class="color-item" style="background-color:#4D8FAC;">
79+
<span class="color-name">Sky color</span><br>
80+
<span class="hex-number">#4D8FAC</span><br>
81+
</div>
82+
</div>
83+
<div class="color-picker">
84+
<div class="color-item" style="background-color:#5D8CAE;">
85+
<span class="color-name">Ultramarine color</span><br>
86+
<span class="hex-number">#5D8CAE</span><br>
87+
</div>
88+
</div>
89+
<div class="color-picker">
90+
<div class="color-item" style="background-color:#22A7F0;">
91+
<span class="color-name">PICTON BLUE</span><br>
92+
<span class="hex-number">#22A7F0</span><br>
93+
</div>
94+
</div>
95+
<div class="color-picker">
96+
<div class="color-item" style="background-color:#19B5FE;">
97+
<span class="color-name">DODGER BLUE</span><br>
98+
<span class="hex-number">#19B5FE</span><br>
99+
</div>
100+
</div>
101+
<div class="color-picker">
102+
<div class="color-item" style="background-color:#59ABE3;">
103+
<span class="color-name">PICTON BLUE</span><br>
104+
<span class="hex-number">#59ABE3</span><br>
105+
</div>
106+
</div>
107+
<div class="color-picker">
108+
<div class="color-item" style="background-color:#48929B;">
109+
<span class="color-name">Light blue color</span><br>
110+
<span class="hex-number">#48929B</span><br>
111+
</div>
112+
</div>
113+
114+
<div class="color-picker">
115+
<div class="color-item" style="background-color:#317589;">
116+
<span class="color-name">Thousand herb</span><br>
117+
<span class="hex-number">#317589</span><br>
118+
</div>
119+
</div>
120+
<div class="color-picker">
121+
<div class="color-item" style="background-color:#89C4F4;">
122+
<span class="color-name">JORDY BLUE</span><br>
123+
<span class="hex-number">#89C4F4</span><br>
124+
</div>
125+
</div>
126+
<div class="color-picker">
127+
<div class="color-item" style="background-color: #4B77BE;">
128+
<span class="color-name">STEEL BLUE</span><br>
129+
<span class="hex-number">#4B77BE</span><br>
130+
</div>
131+
</div>
132+
<div class="color-picker">
133+
<div class="color-item" style="background-color:#1F4788;">
134+
<span class="color-name">Lapis lazuli color</span><br>
135+
<span class="hex-number">#1F4788</span><br>
136+
</div>
137+
</div>
138+
<div class="color-picker">
139+
<div class="color-item" style="background-color:#003171;">
140+
<span class="color-name">Navy blue color</span><br>
141+
<span class="hex-number">#003171</span><br>
142+
</div>
143+
</div>
144+
145+
<div class="color-picker">
146+
<div class="color-item" style="background-color:#044F67;">
147+
<span class="color-name">Hanada</span><br>
148+
<span class="hex-number">#044F67</span><br>
149+
</div>
150+
</div>
151+
<div class="color-picker">
152+
<div class="color-item" style="background-color: #264348;">
153+
<span class="color-name">Indigo color</span><br>
154+
<span class="hex-number">#264348</span><br>
155+
</div>
156+
</div>
157+
</div>
158+
<!--footer-->
159+
<div class="site-footer">
160+
<div class="container">
161+
<div class="download">
162+
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
163+
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
164+
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
165+
<!-- SmartAddon BEGIN -->
166+
<script type="text/javascript">
167+
(function() {
168+
var s=document.createElement('script');s.type='text/javascript';s.async = true;
169+
s.src='http://s1'+'.smartaddon.com/share_addon.js';
170+
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
171+
})();
172+
</script>
173+
174+
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
175+
<!-- SmartAddon END -->
176+
</div>
177+
<hr class="dashed" />
178+
<div class="row">
179+
<div class="col-md-4">
180+
<h3>Get involved</h3>
181+
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
182+
</div>
183+
<div class="col-md-4">
184+
<h3>Contribute</h3>
185+
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
186+
</div>
187+
<div class="col-md-4">
188+
<h3>Found a bug?</h3>
189+
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
190+
</div>
191+
</div>
192+
<hr class="dashed" />
193+
<div class="row">
194+
<div class="col-md-6">
195+
<h3>Talk to us</h3>
196+
<ul>
197+
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
198+
<li>
199+
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
200+
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
201+
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
202+
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
203+
</li>
204+
</ul>
205+
</div>
206+
<div class="col-md-6">
207+
<!-- Begin MailChimp Signup Form -->
208+
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
209+
<div id="mc_embed_signup">
210+
<h3 style="margin-bottom: 15px;">Newsletter</h3>
211+
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
212+
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
213+
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
214+
</form>
215+
</div>
216+
<!--End mc_embed_signup-->
217+
</div>
218+
</div>
219+
<hr class="dashed" />
220+
<div class="copyright clearfix">
221+
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
222+
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
223+
</div>
224+
</div>
225+
</div>
226+
<script>
227+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
228+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
229+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
230+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
231+
232+
ga('create', 'UA-48721682-1', 'bootflat.github.io');
233+
ga('require', 'displayfeatures');
234+
ga('send', 'pageview');
235+
236+
</script>
237+
</body>
238+
</html>

0 commit comments

Comments
 (0)