-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (112 loc) · 5.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/css/main.css">
<title>VIP Web Colors</title>
</head>
<body>
<header>
<nav class="container">
<h1 class="branding">VIPColors</h1>
<ul class="menu">
<li><a href="https://github.com/thevipinmishra/VIPColors" target="_blank">
GitHub</a></li>
</ul>
</nav>
</header>
<main class="colors">
<section class="flat__colors container">
<h3 class="section__title">Flat UI Colors</h3>
<span id="flat-count"></span>
<div class="colors__grid">
<div class="color" data-color='#34495e'></div>
<div class="color" data-color='#9b59b6'></div>
<div class="color" data-color='#2980b9'></div>
<div class="color" data-color='#2ecc71'></div>
<div class="color" data-color='#f1c40f'></div>
<div class="color" data-color='#044F67'></div>
<div class="color" data-color='#e67e22'></div>
<div class="color" data-color='#2d3436'></div>
<div class="color" data-color='#e84393'></div>
<div class="color" data-color='#674172'></div>
<div class="color" data-color='#55efc4'></div>
<div class="color" data-color='#30336b'></div>
<div class="color" data-color='#4834d4'></div>
<div class="color" data-color='#c56cf0'></div>
<div class="color" data-color='#7158e2'></div>
<div class="color" data-color='#ff4d4d'></div>
<div class="color" data-color='#4b4b4b'></div>
<div class="color" data-color='#2c2c54'></div>
<div class="color" data-color='#33d9b2'></div>
<div class="color" data-color='#4a5568'></div>
</div>
</section>
<section class="material__colors container">
<h3 class="section__title">Material Colors</h3>
<span id="material-count"></span>
<div class="colors__grid">
<div class="color" data-color='#e53935'></div>
<div class="color" data-color='#D81B60'></div>
<div class="color" data-color='#8E24AA'></div>
<div class="color" data-color='#5E35B1'></div>
<div class="color" data-color='#3949AB'></div>
<div class="color" data-color='#1E88E5'></div>
<div class="color" data-color='#039BE5'></div>
<div class="color" data-color='#00ACC1'></div>
<div class="color" data-color='#00897B'></div>
<div class="color" data-color='#43A047'></div>
<div class="color" data-color='#7CB342'></div>
<div class="color" data-color='#C0CA33'></div>
<div class="color" data-color='#FDD835'></div>
<div class="color" data-color='#FFB300'></div>
<div class="color" data-color='#FB8C00'></div>
<div class="color" data-color='#F4511E'></div>
<div class="color" data-color='#6D4C41'></div>
<div class="color" data-color='#757575'></div>
<div class="color" data-color='#546E7A'></div>
<div class="color" data-color='#607D8B'></div>
</div>
</section>
</main>
<div class="about">
<div class="about__inner container">
<div class="about__art">
<img src="./assets/colors.svg" alt="UI Colors">
</div>
<div class="about__content">
<h2>About VIPColors</h2>
<p>
<b>VIPColors</b> is a collection for elegant and great looking color that can be used in building
web layouts and apps. Colors are categorized in <b>Flat</b> and <b>Material</b> colors.
</p>
<p>More colors and features will be added to to the app time to time so that it can be more useful for
designers & developers!
</p>
<h3>Contribute</h3>
<p>Want to contribute? Its Open Source on <b>GitHub</b>. 😊</p>
</div>
</div>
</div>
<div class="contribute">
<a href="https://github.com/thevipinmishra/VIPColors" target="_blank" class="github">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.026,2c-5.509,0-9.974,4.465-9.974,9.974c0,4.406,2.857,8.145,6.821,9.465 c0.499,0.09,0.679-0.217,0.679-0.481c0-0.237-0.008-0.865-0.011-1.696c-2.775,0.602-3.361-1.338-3.361-1.338 c-0.452-1.152-1.107-1.459-1.107-1.459c-0.905-0.619,0.069-0.605,0.069-0.605c1.002,0.07,1.527,1.028,1.527,1.028 c0.89,1.524,2.336,1.084,2.902,0.829c0.091-0.645,0.351-1.085,0.635-1.334c-2.214-0.251-4.542-1.107-4.542-4.93 c0-1.087,0.389-1.979,1.024-2.675c-0.101-0.253-0.446-1.268,0.099-2.64c0,0,0.837-0.269,2.742,1.021 c0.798-0.221,1.649-0.332,2.496-0.336c0.849,0.004,1.701,0.115,2.496,0.336c1.906-1.291,2.742-1.021,2.742-1.021 c0.545,1.372,0.203,2.387,0.099,2.64c0.64,0.696,1.024,1.587,1.024,2.675c0,3.833-2.33,4.675-4.552,4.922 c0.355,0.308,0.675,0.916,0.675,1.846c0,1.334-0.012,2.41-0.012,2.737c0,0.267,0.178,0.577,0.687,0.479 C19.146,20.115,22,16.379,22,11.974C22,6.465,17.535,2,12.026,2z" />
</svg>
Contribute
</a>
</div>
<footer>
Made with 💖 for Devs.
</footer>
<!-- Copied Alert -->
<div class="alert">
<h2>Copied 😎</h2>
</div>
<!-- Script -->
<script src="src/js/clipboard.js"></script>
<script src="src/js/app.js"></script>
</body>
</html>