forked from shivendrasaurav/Fluent-Design-For-Web
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
156 lines (142 loc) · 5.6 KB
/
index.html
File metadata and controls
156 lines (142 loc) · 5.6 KB
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
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Fluent Design for Web</title>
<meta name="description" content="Project description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="./v2/fluent-core.css">
<link rel="stylesheet" href="./v2/fluent-icons.css">
<meta name="theme-color" content="#fafafa">
<style>
.hero{
background: radial-gradient(circle at bottom left, #00a07a, transparent),
radial-gradient(circle at top right, #00ffea, transparent),
radial-gradient(circle at bottom, #00607a, transparent)
;
min-height: 74vh;
color: #fafafa;
width: 100%;
}
.hero h1{font-size: 8vh;}
footer{
background: radial-gradient(circle at top left, #faccca, transparent),
radial-gradient(circle at bottom right, #fafacc, transparent),
radial-gradient(circle at top, #faffaf, transparent)
;
color: #1e1e1e;
padding: 20px 0px;
}
.version{font-size: 1.6vh; padding: 4px 8px;}
.button_group{
width: 337px;
margin: auto;
}
.footerTitle{
font-size: 14px;
font-weight: bold;
color: inherit;
margin-bottom: 16px;
}
.footerLink{
color: inherit;
}
.footerLink a{
color: inherit;
font-size: 16px;
font-weight: 400;
display: block;
line-height: 1;
}
footer hr{border: none; height: 1px; background-color: #1e1e1e; margin: auto;}
</style>
<script>
function redirect(){
window.location.href = "https://fluentdesignforweb.github.io/v2/index.html";
}
</script>
</head>
<body onload="redirect();">
<div class="column lg-9 md-9 sm-9 hero">
<br/>
<div class="lg-7 md-9 sm-9 center">
<a href="https://fluentdesignforweb.github.io"><img src="./static/logo.png" style="width: 48px;" ></a>
<a target="blank" href="https://github.com/fluentdesignforweb/fluentdesignforweb.github.io/" class="pivot_button right">Star on GitHub</a>
</div>
<br/><br/><br/><br/>
<div class="column lg-6 md-9 sm-9 center">
<button class="primary_inverted center version">2.0.1</button>
<h1 class="ta_center">Fluent Design for Web</h1>
<h2 class="ta_center"> Native Experience on Web</h2>
<br/><br/>
<div class="button_group sm-0">
<a href="#bottom"><button class="frost_container primary_blue" onmouseover="frosting()">
<span class="frost">Choose your path</span>
</button></a>
<a href="https://www.npmjs.com/package/fdweb"><button class="frost_container secondary_blue" onmouseover="frosting()">
<span class="frost">View on NPM</span>
</button></a>
</div>
<div class="lg-0 md-0">
<a href="#bottom" class="frost_container primary_blue center ta_center" onmouseover="frosting()">
<span class="frost">Choose your path</span>
</a>
<br/>
<a href="https://www.npmjs.com/package/fdweb" class="frost_container secondary_blue center ta_center" onmouseover="frosting()">
<span class="frost">View on NPM</span>
</a>
</div>
</div>
<br/><br/><br/><br/>
</div>
<div class="column lg-9 md-9 sm-9 center">
<br/><br/>
<span id="bottom"></span>
<h1 class="ta_center">Select one of the major versions</h1>
<div class="column lg-4 md-4 sm-9">
<a href="./v1/index.html">
<img src="./static/blob-v1.png" alt="fdweb1"/>
<h2 class="ta_center">Legacy (For projects based on v1)</h2>
</a>
</div>
<div class="column lg-1 md-1 sm-0"></div>
<div class="column lg-4 md-4 sm-9">
<a href="./v2/index.html">
<img src="./static/blob-v2.png" alt="fdweb2"/>
<h2 class="ta_center">Current (For new/existing projects)</h2>
</a>
</div>
<br/><br/>
</div>
<footer>
<div class="column lg-3 md-3 sm-9">
<p class="ta_center footerTitle">Community</p>
<p class="ta_center footerLink">
<a href="./v2/coc.html">Code of Conduct</a>
<a href="./v2/oslic.html">Open Source - MIT</a>
<a target="blank" href="https://github.com/fluentdesignforweb/documentation_v2">Star on Github</a>
</p>
</div>
<div class="column lg-3 md-3 sm-9">
<p class="ta_center footerTitle">Important Links</p>
<p class="ta_center footerLink">
<a href="https://fluentdesignforweb.github.io/documentation/">Docs 1.0.x</a>
<a href="https://fluentdesignforweb.github.io/documentation_v2/">Docs 2.0.x</a>
<a href="https://fluentdesignforweb.github.io/documentation_v2/#/getstarted">Installation</a>
</p>
</div>
<div class="column lg-3 md-3 sm-9">
<p class="ta_center footerTitle">Featured Projects</p>
<p class="ta_center footerLink">
<a href="https://shivendrasaurav.github.io/corona-rakshak/">Corona Rakshak</a>
<a href="https://hisabkitabapp.herokuapp.com/">Hisab Kitab</a>
<a href="https://revahack.com/">REVA HACK 2021</a>
</p>
</div>
</footer>
<script src="https://fluentdesignforweb.github.io/v2/fluent-scripts.js" type="text/javascript"></script>
</body>
</html>