-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathlinks.html
122 lines (112 loc) · 4.73 KB
/
links.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mobiStyle - Text & Typography</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,300italic,500|Electrolize' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/grid.css" />
<link rel="stylesheet" href="css/mobi.css" />
</head>
<body>
<img id="mg-imgBG" src="img/Avenger-blur.png" />
<div id="mg-scanlineBG"></div>
<img id="mg-gridBG" src="img/new-dot.png" alt="" />
<div id="mg-dotBG"></div>
<section id="mg-wrapper">
<div class="mainContent">
<div class="mg-panel">
<h1>Links & Navigation</h1>
<h2>Links and buttons</h2>
<p><a href="#">This is a link</a></p>
<p>There are several types of buttons available, based on the various roles needed. If you want to use any of the shaped buttons, you will either need to use the minified mobiStyle, or include the svg and button libraries. For the animated effects, you will also need <a href="http://snapsvg.io/">Snap</a></p>
<p>To use the svg shapes, just include the class <code>mg-svg-button</code>.</p>
<div class="container">
<div class="third">
<button class="mg-svg-button mg-action">Action button</button>
</div>
<div class="third">
<button class="mg-svg-button mg-cancel">Cancel button</button>
</div>
<div class="third">
<button>Simple button</button>
</div>
</div>
<div class="container">
<div class="third">
<button class="mg-svg-button mg-nav">Nav back</button>
</div>
</div>
<hr />
<h2>Tabs</h2>
<p>Tabs typically reside outside of a panel, and thus float on their own. To utilize tabs, you will need to use the minified mobiStyle, or include the tabs library.</p>
</div>
<div class="mg-tab-group">
<ul class="mg-tab-list">
<li><a href="#" class="active" data-target="tab1">Tab 1</a></li>
<li><a href="#" data-target="tab2">Tab 2</a></li>
<li><a href="#" data-target="tab3">Tab 3</a></li>
</ul>
<div class="mg-panel">
<section class="mg-tab-content active" id="tab1">
<h2>Sidebar Title</h2>
<p>No, of course not. It was… uh… porno. Yeah, that's it. Kids have names? Good man. Nixon's pro-war and pro-family.</p>
</section>
<section class="mg-tab-content" id="tab2">
<h2>When Aliens Attack</h2>
<p>It's toe-tappingly tragic! Please, Don-Bot… look into your hard drive, and open your mercy file! There's no part of that sentence I didn't like!</p>
<ol>
<li>Wow, you got that off the Internet? In my day, the Internet was only used to download pornography.</li>
<li>Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife holding up? …To shreds, you say.</li>
</ol>
</section>
<section class="mg-tab-content" id="tab3">
<h2>The Late Philip J. Fry</h2>
<p>Who am I making this out to? For example, if you killed your grandfather, you'd cease to exist! I didn't ask for a completely reasonable excuse! I asked you to get busy! One hundred dollars. Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood! Now what?</p>
</section>
</div>
</div>
<div class="mg-panel">
<p>To create a tab group, use the following markup:</p>
<pre><code>
<div class="mg-tab-group">
<ul class="mg-tab-list">
<li><a href="#" class="active" data-target="tab1">Tab 1</a></li>
<li><a href="#" data-target="tab2">Tab 2</a></li>
...
</ul>
<div class="mg-panel">
<section class="mg-tab-content active" id="tab1">
<!-- tab content -->
</section>
<section class="mg-tab-content" id="tab2">
<!-- tab content -->
</section>
</div>
</div>
</code></pre>
</div>
</div>
<div class="mg-sidebar">
<div class="mg-panel">
<h3>Nav</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="text.html">Text & Typography</a></li>
<li class="active"><b>Links & Navigation</b></li>
<li><a href="media.html">Media</a></li>
<li><a href="lists.html">Lists & Tables</a></li>
<li><a href="forms.html">Forms & Input</a></li>
<li><a href="messages.html">Messages & Notifications</a></li>
</ul>
</div>
</div>
</section>
<div id="modalOverlay"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="scripts/min/jquery.mobiStyle-min.js"></script>
<script>
$(document).mobiStyle();
</script>
</body>
</html>