-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
83 lines (82 loc) · 3.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LCARS</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:500" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors.css">
</head>
<body>
<div id="header">
<div id="endcap_left_header">
<svg class="lc235703">
<use xlink:href="svg/sprites.svg#lcars-svg-endcap_left" height="30" width="45"></use>
</svg>
</div>
<div id="block_header" class="blocktext_black">
</div>
<div id="headline_header">hmt3design.com</div>
<div id="endcap_right_header">
<svg class="lc235703">
<use xlink:href="svg/sprites.svg#lcars-svg-endcap_right" height="30" width="45"></use>
</svg>
</div>
</div>
<br>
<div id="main">
<div id="main_top">
<div id="elbow_left_top_main">
<svg class="lc236907">
<use xlink:href="svg/sprites.svg#lcars-svg-elbow_left_top" height="90" width="300"></use>
</svg>
</div>
<div id="block_main">
</div>
<div id="headline_main">Main menu</div>
<div id="endcap_right_main">
<svg class="lc236907">
<use xlink:href="svg/sprites.svg#lcars-svg-endcap_right" height="30" width="45"></use>
</svg>
</div>
</div>
<div id="main_center">
<div id="main_buttons">
<div id="main_button_column">
<button class="button01">031306</button>
<button class="button01">gndn</button>
<button class="button01">062207</button>
</div>
<div id="main_button_block">
</div>
</div>
<div id="main_text" class="text">
<h1>LCARS CSS Grid</h1>
<p>Based on the Star Trek: The Next Generation LCARS (Library Catalog and Retrieval System) computer
interface created by Michael Okuda. I also got the specifications from LCARS47.com for the shape
specifications and color palettes, modifying the dimensions to be a bit more rounded.</p>
<p>This design makes use of CSS Grid and SVG to recreate the designs in an HMTL document. The odd shapes
(endcaps, elbows, etc.) are created as SVGs using Adobe Illustrator. The responsive layout and design is
possible through the flexibility of CSS Grid. Resizing the window will show that the horizontal and
vertical block elements resize to fit the space. </p>
<p>There is still some work to be done on device sizing, and eventually I hope to make a WordPress template
out of it, But for now, this will do.</p>
</div>
</div>
<div id="main_bottom">
<div id="elbow_left_bottom_main">
<svg class="lc236907">
<use xlink:href="svg/sprites.svg#lcars-svg-elbow_left_bottom" height="90" width="300"></use>
</svg>
</div>
<div id="block_main_bottom">
</div>
<div id="endcap_right_main_bottom">
<svg class="lc236907">
<use xlink:href="svg/sprites.svg#lcars-svg-endcap_right" height="30" width="45"></use>
</svg>
</div>
</div>
</div>
</body>
</html>