-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathside-site.html
executable file
·129 lines (112 loc) · 3.7 KB
/
side-site.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style1.css">
<style>
/* Media response */
@media screen and (min-width: 850px) {
#main{ margin-left:250px;}
#ham{ display: none;}
#close{ display: none;}
#title{display:none}
}
@media screen and (max-width: 850px) {
#main{margin-left:0}
.column1{width:100%}
.column2{width:100%}
#title{font-size:1.4em}
.tableText{font-size: 0.8em;}
}
@media screen and (min-width: 1200px) {
#main{padding-left:45px;padding-right:45px;}
}
</style>
</head>
<body>
<!-- ##### NAVIGATION ##### -->
<div id="mySidenav" class="sidenav">
<span><a href="side-intro.html"><b>Feng Shui </b>& Geomancy</a></span>
<a id="close" ahref="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a id="menu" href="side-intro.html" >INTRO</a>
<a href="side-qi.html" id="menu">THEORY</a>
<a id="submenu" href="side-qi.html">- Qi & Taoism</a>
<a id="submenu" href="side-yy.html">- Yin & Yang</a>
<a id="submenu" href="side-5ele.html">- 5 Elements</a>
<a id="submenu" href="side-8dir.html" class="active">- 8 Directions</a>
<a href="#" id="menu">PRACTICE</a>
<a id="submenu" href="#">- Siting/Landscape</a>
<a id="submenu" href="#">- interior</a>
<a id="submenu" href="#">- Spaces/Portents</a>
<a id="submenu" href="#">- Horoscope</a>
<a href="#" id="menu">Thoughts</a>
<a id="submenu" href="#">- Advanced</a>
<a id="submenu" href="#">- Personal Practice</a>
<a id="submenu" href="#">- Reading List</a>
<a href="#">@contact</a>
<br/>
</div>
<div id="main">
<!-- ###### TOP ^ UP BUTTON ###### -->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<span id="ham" style="font-size:2em;cursor:pointer" onclick="openNav()">☰</span><span id="title";><b>Feng Shui </b>& Geomancy</span>
<!-- ##### Sections ##### -->
<div class="row">
<h1>The 8 Directions</h1>
<h2>Environmental forms</h2>
<div>
<p style="text-align:left;">
The environment in which site is located and the
form of the site itself is important in a Feng Shui
assessment. The table below illustrates how the
form is read in relation to the 5 elements.</p>
</div>
<p style="text-align:center;">
<img alt="" src="imgs/env1.jpg"/>
</p>
</div>
<!-- ##### /end Sections ##### -->
</div>
<!-- ##### SCRIPTS ##### -->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<script>
function myFunction(x) {
if (x.matches) { // If media query matches
document.getElementById("mySidenav").style.width = "0";
} else {
document.getElementById("mySidenav").style.width = "250px";
}
}
var x = window.matchMedia("(max-width: 850px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
</script>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>