-
Notifications
You must be signed in to change notification settings - Fork 3
/
index_temp.html
77 lines (77 loc) · 6 KB
/
index_temp.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
<html>
<head>
<title>Fluent Design For Web - Index</title>
<meta name="Description" content="Think for a moment that, what would happen if you combine the Metro UI, with Material Design, the result is Fluent Design also called Fabric UI. Fluent Design is the design which is used by Windows 10 and other UWP apps. But why should it be limited to UWP apps only, why can't we use the same for websites. That's why, we have come up with this project, where we aim to recreate the Fluent Design for web. We are still in development but you can download Fluent Design For Web from the button provided below, and learn how to use it in development using the given link.">
<meta name="Keywords" content="Fluent, Design, For, Web, Material, Metro, Fabric, UI, UX, Fluent UI, Fluent Design, Fabric Design, Fabric UI, Fluent Design For Web, Fluent for the web, For, The, Web">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Product+Sans" rel="stylesheet">
<link href="normalize.css" rel="stylesheet" type="text/css">
<link href="fluent.css" rel="stylesheet" type="text/css">
<link href="Icons/css/fluent-icons.css" rel="stylesheet" type="text/css">
<script src="fluent.js"></script>
</head>
<body>
<div class="column large9 pivot_container secondary_blue" style="position: fixed;">
<a class="pivot_button icon left" onclick="history.back();">
<i class="ms-Icon ms-Icon--Back" aria-hidden="true"></i>
</a>
<a class="pivot_button icon left" onclick="history.forward();">
<i class="ms-Icon ms-Icon--Forward" aria-hidden="true"></i>
</a>
<span class="small0 pivot_heading">Fluent Design For Web</span>
<a href="controls.html" class="pivot_button right">Controls</a>
<a href="styles.html" class="pivot_button right">Styles</a>
<a href="index.html" class="pivot_button right active">Home</a>
</div><br><br><br><br>
<div class="nav_container column large3 medium3 small0">
<h5>Fabric UI</h5>
<div class="navigation_container">
<span class="navigation_val"><i class="ms-Icon ms-Icon--Chevronright nav_disp"></i>Styles</span><input checked type="checkbox" class="navigation_button">
<div class="navigation_group">
<a href="typography.html"><li class="navigation_item">Typography</li></a>
<a href="elevation.html"><li class="navigation_item">Elevation</li></a>
<a href="colors.html"><li class="navigation_item">Colors</li></a>
<a href="grid.html"><li class="navigation_item">Grid Layout</li></a>
<a href="Icons/fluent-icons.html"><li class="navigation_item">Icon Pack</li></a>
</div>
</div><br><br>
<div class="navigation_container">
<span class="navigation_val"><i class="ms-Icon ms-Icon--Chevronright nav_disp"></i>Controls</span><input type="checkbox" class="navigation_button">
<div class="navigation_group">
<a href="inputs.html"><li class="navigation_item">Inputs</li></a>
<a href="utilities.html"><li class="navigation_item">Utilities</li></a>
<a href="surfaces.html"><li class="navigation_item">Surfaces</li></a>
<a href="listsandtables.html"><li class="navigation_item">List and Tables</li></a>
<a href="nav.html"><li class="navigation_item">Navigations</li></a>
<a href="progress.html"><li class="navigation_item">Progress</li></a>
</div>
</div>
</div>
<div class="page_container column large9 medium9 small12 right">
<div class="page_container">
<h2>Fluent Design For Web</h2>
<p>Think for a moment that, what would happen if you combine the Metro UI, with
Material Design, the result is Fluent Design also called Fabric UI.
</p>
<p>Fluent Design is the design which is used by Windows 10 and other UWP apps. But why should
it be limited to UWP apps only, why can't we use the same for websites. That's why, we have
come up with this project, where we aim to recreate the Fluent Design for web.
</p>
<p>We are still in development but you can download Fluent Design For Web from the button provided below,
and learn how to use it in development using the given link.
</p>
<a href="https://github.com/shivendrasaurav/Fluent-Design-For-Web/archive/master.zip"><span class="linkcon">Download Fluent Design For Web</span></a>
<h2>Get Started</h2>
<p class="column large6 medium6 small12">Design and build great looking websites and webapps that using Fluent Design for Web.
Here we will discuss all the different styling methods and how to implement them using
Fluent Design for Web. Click on links below to know more about styling your website.
</p>
<p class="column large6 medium6 small12 right">
<a href="styles.html" class="headlink"><i class="ms-Icon ms-Icon--Forward"></i> Styles</a><br><br>
<a href="controls.html" class="headlink"><i class="ms-Icon ms-Icon--Forward"></i> Controls</a>
</p>
</div>
</div>
<footer class="column large12 medium12 small12 primary_green">Fork The Project From <a href="https://github.com/shivendrasaurav/Fluent-Design-For-Web/">Github</a></footer>
</body>
</html>