-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·111 lines (91 loc) · 4.33 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
<!DOCTYPE html>
<!--
Pure CSS-based implementation of a Management Console for an application.
Aims for simplicity.
Works on IE 8, and all modern browsers.
By 'program', below, is meant the html page and the associated css (in the css files linked and
any in-line) used for positioning the columns and master-detail panes of the Management
Console, and no other code.
Copyright (C) 2011 Christopher M. Balz
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="tlswe-mc">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!--[if gt IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9; IE=10" />
<![endif]-->
<!--
If IE 7, try Chrome Frame. For this code, the stable Chrome Frame
will work, and Google supplies code for loading that one.
-->
<!--[if lte IE 8]>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<![endif]-->
<title>Pure CSS Mananagement Console Demo</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/application.css" />
</head>
<body class="tlswe-mc">
<!-- Header -->
<div class="tlswe-mc-header">
<div class="tlswe-mc-identity"><img src="images/img_src_placeholder.png" class="tlswe-mc-logo" alt="Your Company Logo"/></div>
<div class="tlswe-mc-authentication">You are currently logged in as jethro <a href="#">logout</a></div>
</div>
<!-- Main Content -->
<!-- Here begin the three columns -->
<!-- This element is used to share the screen with the 'header' and 'footer'
via absolute positioning. Otherwise, we can't keep everything in the viewable area.
-->
<div class="tlswe-mc-main-content">
<!-- Left Column -->
<div class="tlswe-mc-left tlswe-mc-column" >
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
left left left left left left left left left left left left
</div>
<!-- Center Column -->
<div class="tlswe-mc-center tlswe-mc-column">
<!-- Master-Detail in the Center Column -->
<div class="tlswe-master-detail tlswe-master">
master master master master master master master master master
master master master master master master master master master
master master master master master master master master master
master master master master master master master master master
</div>
<div class="tlswe-master-detail tlswe-detail">
detail detail detail detail detail detail detail detail detail
detail detail detail detail detail detail detail detail detail
detail detail detail detail detail detail detail detail detail
detail detail detail detail detail detail detail detail detail
</div>
</div>
<!-- Right Column -->
<div class="tlswe-mc-right tlswe-mc-column">
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
right right right right right right right right right right
</div>
<!--[if IE 7]>
<div class="tlswe-mc-clearing-block-ie7"> </div>
<![endif]-->
</div>
<!-- Footer -->
<div class="tlswe-mc-footer">
<div class="tlswe-mc-footer-centerable">
Copyright 2011 Your Company Here - All Rights Reserved
</div>
</div>
</body>
</html>