-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
164 lines (161 loc) · 8.04 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Product Sans</title>
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#4054B2">
<meta name="description" content="Easily deploy Product Sans into your website, app or even your computer!">
<meta name="keywords" content="ProductSans,Product Sans,product sans,productsans,google font,gfont,google font framework">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="api/font.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-red.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
<header class="demo-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Product Sans</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
</div>
</div>
</header>
<div class="demo-ribbon"></div>
<main class="demo-main mdl-layout__content">
<div class="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<div class="demo-crumbs mdl-color-text--grey-500">
sethusenthil.github.io > Product Sans
</div>
<h3>What is <Product-Sans>Product Sans</Product-Sans>? </h3>
<br> <br>
<p>
Product Sans is the font developed for <ProductSans>google_logo</ProductSans> branding purposes. It is used in the logo itself, and many other products.
</p>
<p>
The new Google logo and identity system was developed to respond and grow with the changing needs of our users. It is a system that takes into account scale, interaction, and legibility, giving users a consistent and beautiful experience of the Google brand, wherever they encounter it.
<p>
To fully execute the brand system, we took the design a step further, by creating a custom, geometric sans serif called Product Sans. Simple, humble, and approachable, Product Sans was created from scratch to pair seamlessly with our logo in a variety of contexts and product lockups without overshadowing it. Additionally, it complements the new identity by introducing a primary branding typeface that is different in style and character from other interface text elements used in Material Design. With its careful weaving of form and function, it is an appropriate and essential component to the Google brand system. </p>
</p>
<h3>Try it Out!</h3>
<form>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input gfont" type="text" id="changi" autocomplete="off">
<label class="mdl-textfield__label gfont">Type Something</label>
</div>
</form>
<p class="sizcon">Font Size Control:</p>
<input class="mdl-slider mdl-js-slider" type="range"
min="1" max="100" value="25" tabindex="0" id="fontsizze">
<h3><ps>Product Sans</ps> Webfont</h3>
<p>
If you are a web developer, most likely you are already in love with this font. Well good news for you! You can use this font in your next project!
</p>
<p>
<div onclick="copyToClipboard('#p1')">
<div id="snackbar">Copied to clipboard</div>
<xmp id="p1" onclick="myFunction()">
<link rel="stylesheet" type="text/css" href="https://sethusenthil.com/Product-Sans/api/font.css">
</xmp>
</div>
<p>
Before you use this font, please read the <a href="https://fonts.google.com/license/productsans">license</a>
</p>
<p>
You can refer the font in many different methods, choose the one thats comfortable for you.
<br>
<center><table>
<tr>
<th>Class</th>
<th>Id</th>
<th>Element</th>
</tr>
<tr>
<td><xmp>.Product-Sans</xmp></td>
<td><xmp>#Product-Sans</xmp></td>
<td><xmp><Product-Sans></Product-Sans></xmp></td>
</tr>
<tr>
<td><xmp>.ProductSans</xmp></td>
<td><xmp>#ProductSans</xmp></td>
<td><xmp><ProductSans></ProductSans></xmp></td>
</tr>
<tr>
<td><xmp>.gfont</xmp></td>
<td><xmp>#gfont</xmp></td>
<td><xmp><gfont></gfont></xmp></td>
</tr>
<tr>
<td><xmp>.ps</xmp></td>
<td><xmp>#ps</xmp></td>
<td><xmp><ps></ps></xmp></td>
</tr>
</table></center>
</p>
<h3><ps>Product Sans</ps> Downloadable Font</h3>
<p>
Not a web developer? Or just want it on your device? You may install them in any format you like! (Woff2 format is not compatible for Mac Os users).
<br><br>But before you install any of the following, please read the <a href="https://fonts.google.com/license/productsans">license</a>.
</p>
<p>
<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" onclick="window.open('Downloads/Product Sans TTF.zip')" style="cursor:pointer">
<i class="material-icons">file_download</i> Download in ttf (.zip)
</button>
<br>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" onclick="window.open('Downloads/Product Sans woff2.zip')" style="cursor:pointer">
<i class="material-icons">file_download</i> Download in woff2 (.zip)
</button>
</p>
<h3>Syntax Specials</h3>
<p>
It's not over yet! There are specials characters you can enter, to create special icons and shapes!
<br>
<center><table>
<tr>
<th><ps>google_logo</ps></th>
<th><ps>google_G</ps></th>
</tr>
<tr>
<td onclick="copyToClipboard('#p2')"><xmp class="nosans" id="p2" onclick="myFunction()">google_logo</xmp></td>
<td onclick="copyToClipboard('#p3')"><xmp class="nosans" id="p3" onclick="myFunction()">google_G</xmp></td>
</tr>
</table></center>
</p>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("snackbar")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
<footer class="mdl-mini-footer">
<center class="gfont">© 2018 Copyright: <a href="SethuSenthil.github.io">Sethu Senthil</center>
</footer>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
<script src="index.js"></script>
</body>
</html>