-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (155 loc) · 14.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Brands.CSS Showcase</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lexian-droid/brands.css@latest/brands.min.css">
</head>
<body>
<div class="w3-container w3-amber">
<h1 class="w3-center">Brands.CSS Showcase</h1>
<p class="w3-center">
<a href="#about">About</a> |
<a href="#examples">Examples</a> |
<a href="#icons">Icons</a>
</p>
</div>
<div class="w3-container">
<h2>Brands available in BRANDS.CSS</h2>
<!-- Add each icon with their color -->
<div class="w3-center">
<div class="w3-quarter w3-padding w3-brand-android">
<i class="fa fa-android"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-discord">
Discord
</div>
<div class="w3-quarter w3-padding w3-brand-dribbble">
<i class="fa fa-dribbble"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-email">
<i class="fa fa-envelope"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-facebook">
<i class="fa fa-facebook"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-flickr">
<i class="fa fa-flickr"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-foursquare">
<i class="fa fa-foursquare"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-github">
<i class="fa fa-github"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-google">
<i class="fa fa-google"></i>
</div>
</div>
</div>
<div class="w3-container">
<h2>The colors allow for hovering as well!</h2>
<!-- Add each icon with their color -->
<p>
Instead of using the <code class="w3-codespan">w3-brand-brandName</code> class, use the <code
class="w3-codespan">w3-brand-hover-brandName</code> class to add a hover effect.
</p>
<div class="w3-center">
<div class="w3-quarter w3-padding w3-brand-hover-android">
<i class="fa fa-android"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-hover-discord">
Discord
</div>
<div class="w3-quarter w3-padding w3-brand-hover-dribbble">
<i class="fa fa-dribbble"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-hover-email">
<i class="fa fa-envelope"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-hover-facebook">
<i class="fa fa-facebook"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-hover-flickr">
<i class="fa fa-flickr"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-hover-foursquare">
<i class="fa fa-foursquare"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-hover-github">
<i class="fa fa-github"></i>
</div>
<div class="w3-quarter w3-padding w3-brand-hover-google">
<i class="fa fa-google"></i>
</div>
</div>
</div>
<div class="w3-container">
<h2>Here are some practical use scenarios</h2>
<div class="w3-row">
<h3>Example 1: The Wiki</h3>
<div class="w3-half">
<p class="w3-code cssHigh" style="width:100%;height:300px;overflow-y: scroll;">
<!DOCTYPE html><br /><head><br /> <title>Brands.CSS Showcase</title><br /> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><br /> <link rel="stylesheet" href="../brands.css"><br /></head><br /><div class="w3-card-4"><br /> <header class="w3-container w3-brand-facebook"><br /> <h1>Facebook</h1><br /> </header><br /> <div class="w3-container"><br /> <p>Facebook is a social networking service launched on February 4, 2004, operated and privately owned by Facebook, Inc. As of April 2016, Facebook was the most popular social networking site in the world, with more than 1.86 billion monthly active users.</p><br /> </div><br /> <footer class="w3-container w3-brand-hover-facebook"><br /> <h5>Find out more</h5><br /> </footer><br /></div>
</p>
</div>
<div class="w3-half">
<iframe src="./examples/documentary.html" style="width:100%;height:300px;"></iframe>
</div>
</div>
<div class="w3-row">
<h3>Example 2: Share buttons</h3>
<div class="w3-half">
<p class="w3-code cssHigh" style="width:100%;height:300px;overflow-y: scroll;">
<!DOCTYPE html><br /><head><br /> <title>Brands.CSS Showcase</title><br /> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><br /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><br /> <link rel="stylesheet" href="../brands.css"><br /></head><br /><body><br /> <header class="w3-container w3-border w3-center w3-pale-blue"><br /> <h1>My Website</h1><br /> </header><br /> <div class="w3-container"><br /> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, quos. Culpa doloremque, incidunt illum, excepturi magnam quidem illo recusandae, non distinctio explicabo mollitia. Expedita, ipsum. Doloribus autem soluta at et quia consectetur, sunt, sequi commodi velit harum, hic quos quo! Porro dolores assumenda sunt laborum, quia corrupti impedit cumque nobis.</p><br /> <p><br /> Like what you see? Please consider<br /> sharing my content with your friends and family.<br /> </p><br /> <div class="w3-bar"><br /> <a class="w3-bar-item w3-button w3-brand-facebook"><br /> <i class="fa fa-facebook"></i> Facebook<br /> </a><br /> <a class="w3-bar-item w3-button w3-brand-twitter"><br /> <i class="fa fa-twitter"></i> Twitter<br /> </a><br /> </div><br /> </div><br /></body>
</p>
</div>
<div class="w3-half">
<iframe src="./examples/share.html" style="width:100%;height:300px;"></iframe>
</div>
</div>
<div class="w3-row">
<h3>Example 3: Brand Representation</h3>
<div class="w3-half">
<p class="w3-code cssHigh" style="width:100%;height:300px;overflow-y: scroll;">
<!DOCTYPE html><br /><head><br /> <title>Brands.CSS Showcase</title><br /> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><br /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><br /> <link rel="stylesheet" href="../brands.css"><br /></head><br /><body><br /> <header class="w3-container w3-border w3-center w3-green"><br /> <h1>My Website</h1><br /> </header><br /> <div class="w3-container"><br /> <p>My website is Sponsored by:<br /> <span class="w3-padding w3-brand-reddit"><br /> Reddit<br /> </span><br /> </p><br /> </div><br /> <div class="w3-container"><br /> <p>Like my page on<br /> <span class="w3-padding w3-brand-facebook"><br /> Facebook<br /> </span><br /> </p><br /> </div><br /> <div class="w3-container"><br /> <p>Follow me on<br /> <span class="w3-padding w3-brand-twitter"><br /> Twitter<br /> </span><br /> </p><br /> </div><br /> <div class="w3-container"><br /> <p><br /> <b>NOTE:</b> This is a fictional scenario, and is not intended to imply that Reddit is sponsoring this website, github repository, or any LexianDEV branding, resources, of any kind, shape or form. We are NOT sponsored by any corporate organization, and this is purely for educational, and demonstration purposes only.<br /> </p><br /> </div><br /></body><br />
</p>
</div>
<div class="w3-half">
<iframe src="./examples/brand_rep.html" style="width:100%;height:300px;"></iframe>
</div>
</div>
</div>
<div class="w3-container">
<h2>About the Project</h2>
<p>
We have decided to make BRANDS.CSS completely open source and editable
by everybody. This means that you can contribute to the project by adding new brands, or editing existing
ones. We have also made it easy to add new brands.
<br>
<br>
The project is licensed under the MIT License, which means that you can use it in any project, commercial or
otherwise, without any restrictions.
<br>
<br>
It is also completely free to use, and we will never charge you for using it.
<br>
<br>
We also provide easy instructions on how to import your own brands, or create brands
for the repository. For more information, please visit the <a href="">The Github ReadMe</a>.
<br><br>
We appreciate the support and hope you enjoy using BRANDS.CSS!
</p>
</div>
<footer>
<p class="w3-center">
Made with <i class="fa fa-heart"></i> by <a href="https://lexian.dev">Lexian</a> | <a
href="https://github.com/Lexian-droid/brands.css"><i class="fa fa-github"></i> View on GitHub</a>
</p>
</footer>
</body>
</html>