forked from ehkoo/semantic-ui-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (161 loc) · 8.45 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
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Semantic UI examples</title>
<meta name="description" content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700,300&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.13.0/css/semantic.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<main class="ui page grid">
<div class="row">
<div class="column">
<h1 class="ui red header">Semantic UI examples</h1>
<p>The goal of this project is to provide example pages built in Semantic UI, in a similiar way to Twitter Bootstrap 3. Most of them are directly converted from Twitter Bootstrap 3's counterpart.</p>
</div>
</div>
<div class="row">
<div class="column">
<h2 class="ui red header">Using the framework</h2>
<div class="ui items">
<div class="item">
<div class="image">
<a href="./starter" class="ui link image">
<img src="./images/starter.png" alt="Starter">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./starter">Starter template</a></div>
<p class="description">Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
</div>
</div> <!-- Starter -->
<div class="item">
<div class="image">
<a href="./theme" class="ui link image">
<img src="./images/theme.png" alt="Theme">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./theme">Theme</a></div>
<p class="description">Load the optional Semantic-UI theme for a visually enhanced experience.</p>
</div>
</div> <!-- Theme -->
<div class="item">
<div class="image">
<a href="./grid" class="ui link image">
<img src="./images/grid.png" alt="Grid">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./grid">Grid</a></div>
<p class="description">Demonstrate how to use grid in Semantic UI with different viewports</p>
</div>
</div> <!-- Grid -->
<div class="item">
<div class="image">
<a href="./jumbotron" class="ui link image">
<img src="./images/jumbotron.png" alt="Jumbotron">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./jumbotron">Jumbotron</a></div>
<p class="description">Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
</div> <!-- Jumbotron -->
<div class="item">
<div class="image">
<a href="./jumbotron-narrow" class="ui link image">
<img src="./images/jumbotron-narrow.png" alt="Narrow jumbotron">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./jumbotron-narrow">Narrow jumbotron</a></div>
<p class="description">Build a more custom page by narrowing the default container and jumbotron.</p>
</div>
</div> <!-- Jumbotron narrow-->
</div>
</div>
</div> <!--Using the framework-->
<div class="row">
<div class="column">
<h2 class="ui red header">Navbars in action</h2>
<div class="ui items">
<div class="item">
<div class="image">
<a href="./navbar" class="ui link image">
<img src="./images/navbar.png" alt="Navbar">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./navbar">Navbar</a></div>
<p class="description">Super basic template that includes the navbar along with some additional content.</p>
</div>
</div> <!-- Navbar -->
<div class="item">
<div class="image">
<a href="./navbar-static-top" class="ui link image">
<img src="./images/navbar-static-top.png" alt="Static top navbar">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./navbar-static-top">Static top navbar</a></div>
<p class="description">Super basic template with a static top navbar along with some additional content.</p>
</div>
</div> <!-- Navbar static top-->
<div class="item">
<div class="image">
<a href="./navbar-fixed-top" class="ui link image">
<img src="./images/navbar-static-top.png" alt="Fixed navbar">
</a>
<div class="like ui corner label">
<i class="like icon"></i>
</div>
</div>
<div class="content">
<div class="name"><a href="./navbar-fixed-top">Fixed navbar</a></div>
<p class="description">Super basic template with a fixed top navbar along with some additional content.</p>
</div>
</div> <!-- Navbar fixed top-->
</div>
</div>
</div>
</main>
<!-- GA start -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40224454-1', 'ehkoo.github.io');
ga('send', 'pageview');
</script>
<!-- GA end -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.13.0/javascript/semantic.min.js"></script>
</body>
</html>