-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
127 lines (109 loc) · 8.55 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
<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="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" 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>
<link type="icon" href="./index_img/favicon.ico" rel="icon">
<style>
*{font-family: "Quicksand"}
* *{font-family: "Barlow"}
</style>
</head>
<body class="primary_inverted">
<div class="large12 pivot_container primary_blue top" style="position: relative; padding-bottom: 6px; height: 64px; padding-top: 12px;">
<button class="primary_blue large0 medium0" onclick="openside1();"><i class="ms-Icon ms-Icon--GlobalNavButton icon-small"></i></button>
<a class="pivot_button" style="font-size: 22px; font-family: 'Quicksand';" href="https://fluentdesignforweb.github.io/">Fluent Design</a>
<a class="pivot_button small0" style="font-family: 'Quicksand';" href="https://fluentdesignforweb.github.io/documentation/#/getstarted">Get Started</a>
<a class="pivot_button small0" style="font-family: 'Quicksand';" href="https://fluentdesignforweb.github.io/documentation/#/boilerplate">Boilerplate</a>
<a class="pivot_button small0" style="font-family: 'Quicksand';" href="https://fluentdesignforweb.github.io/documentation/#/styles">Styles</a>
<a class="pivot_button small0" style="font-family: 'Quicksand';" href="https://fluentdesignforweb.github.io/documentation/#/controls">Controls</a>
<br />
</div>
<div class="sidepanel_container" id="side1" style="display: none;">
<div class="sidepanel_content left">
<button class="primary_red left icon" onclick="closeside1();">X</button>
<br><br><br><br>
<a href="https://fluentdesignforweb.github.io/documentation/#/getstarted"><div class="panel_item">Get Started</div></a>
<a href="https://fluentdesignforweb.github.io/documentation/#/boilerplate"><div class="panel_item">Boilerplate</div></a>
<a href="https://fluentdesignforweb.github.io/documentation/#/styles"><div class="panel_item">Styles</div></a>
<a href="https://fluentdesignforweb.github.io/documentation/#/controls"><div class="panel_item">Controls</div></a>
<a href="https://fluentdesignforweb.github.io/documentation/#/iconpack"><div class="panel_item">Icons</div></a>
<span style="color: #1e1e1e; position: absolute; bottom: 10px;">© The Code Drop 2020 </span>
</div>
</div>
<main class="page_container">
<div class="column large6 medium12 small12">
<div style="margin-top: 30%;" class="offset-large2">
<h2>Fluent Design for Web</h2>
<p style="font-size: 20px; min-width: 300px; width: 85%; text-align: justify;">
Don't start from Scratch. <br /><br />
Fluent Design for Web is Open Source, Cross Platform, CSS Framework which is
easy to use and very flexible in nature. It helps dvelopers create environments
which are more accesible and engaging for users. <br /><br />
Go ahead, <a href="https://fluentdesignforweb.github.io/documentation/#/getstarted">get started</a> and make great user experiences.
</p>
<br />
</div>
</div>
<img src="./index_img/fluent_logo.png" class="column large6 medium12 small12" />
</div>
<br /><br /><br />
<hr style="background: linear-gradient(45deg, red, blue);" />
<br /><br /><br />
<img src="./index_img/natural.png" class="column large6 medium0 small0" />
<div class="column large6 medium12 small12">
<div style="padding-top: 30%; padding-bottom: 30%;" class="offset-large2">
<h3>Feels natural on every device</h3>
<p style="font-size: 20px; min-width: 300px; width: 65%; text-align: justify;">
Fluent Design for Web is made to provide rather native experiences in any device it is accessed on.
Developers can use different classes to make such experiences and responsiveness of Fluent Design
for Web means that it reshapes the UI Elements according to screen size of device it is accesed in.
</p>
</div>
</div>
<img src="./index_img/natural.png" class="column large0 medium12 small12" />
<br /><br /><br />
<hr style="background: linear-gradient(45deg, red, blue);" />
<br /><br /><br />
<div class="column large6 medium12 small12">
<div style="padding-top: 30%; padding-bottom: 30%;" class="offset-large2">
<h3>Build Websites, Webapps, and PWAs</h3>
<p style="font-size: 20px; min-width: 300px; width: 65%; text-align: justify;">
Fluent Design for Web can be easily integrated in any kind of project, wether it is a website for
a brand, an app for shopping or anything else. Best part is, Fluent Design for Web is mobile first,
customizable, and easy to combine with any other framework on top of it.
</p>
</div>
</div>
<img src="./index_img/apps.png" class="column large6 medium12 small12" />
<br /><br /><br />
<hr style="background: linear-gradient(45deg, red, blue);" />
<br /><br /><br />
<img src="./index_img/npm.png" class="column large6 medium0 small0" />
<div class="column large6 medium12 small12">
<div style="padding-top: 30%; padding-bottom: 30%;" class="offset-large2">
<h3>Packaged for Node</h3>
<p style="font-size: 20px; min-width: 300px; width: 65%; text-align: justify;">
Fluent Design for Web comes packaged with npm and can be used with any Front End Framework which
uses node and npm. It's easy to use, easier to import, and even easier to use. The package name is
fdweb. To know how to use it with npm, see the package on <a href="https://www.npmjs.com/package/fdweb">NPM</a>.
</p>
</div>
</div>
<img src="./index_img/npm.png" class="column large0 medium12 small12" />
</main>
<div class="column large12 medium12 small12 pivot_container primary_red" style="position: relative; top: 10px; padding: 0.25%;"><div class="column large6 medium6 small12"> Fork this project on <a href="https://github.com/fluentdesignforweb/fluentdesignforweb.github.io" class="pivot_button">GitHub</a><br> Have an Issue<a href="https://github.com/fluentdesignforweb/fluentdesignforweb.github.io/issues/new" class="pivot_button">Submit Here</a></div></div>
<script>
function opendoc(){
window.open("https://fluentdesignforweb.github.io/documentation", "_self", "replace");
}
</script>
</html>