Ajax Loader
×

Untitled

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="UTF-8">
5
        <link rel="stylesheet" href="style.css"> <!-- External CSS sheet used -->
6
        <title> Catholic Professional Standards </title>
7
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <!-- Using Open Sans font -->
8
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
9
        <script type="text/javascript" src="hoverscroll.js" ></script>
10
    </head>
11
  
12
  
13
    <body>
14
  
15
    <div id="pageborder">
16
      
17
        <div id="content">
18
      
19
        <a href="index.html"><img id="logo" src="http://i.imgur.com/4wihyHd.png" alt="National Office For Professional Standards"></a> <!-- Logo -->
20
        
21
        <div class="nav_bar">
22
          
23
            <ul>
24
                <li><a id="nav_about" href= "#"><strong>About</strong></a></li>
25
                <li><a id="nav_ethos" href= "#"><Strong> Ethos </Strong></a></li>
26
                <li><a id="nav_path" href= "#"><strong> The path to healing </strong></a></li>    
27
                <li><a id="nav_cath" href= "#"><strong> NZ Catholic Church</strong></a></li>
28
                <li><a id="nav_priv" href= "#"><strong> Privacy Policy</strong></a></li>
29
                <li><a id="nav_contact" href= "#"><strong>Contact Us</strong></a></li>
30
        
31
            </ul>
32
      
33
        </div> <!-- End of nav_bar class -->
34
      
35
            </div>
36
          
37
    </div>
38
  
39
    </body>
40
</html>
 
CSS 
html, body {
1
html, body {
2
 
3
height:98%;
4
width:100%;
5
-webkit-tap-highlight-color: transparent;
6
-webkit-font-smoothing: antialiased;
7
background-color:#fff;
8
margin:0;
9
padding:0;
10
border: 0;
11
 
12
}
13
 
14
#pageborder {
15
 
16
background:  rgba(86, 86, 86, 0.06);
17
margin:2%;
18
height:100%%;
19
}
20
 
21
#logo {
22
 
23
width:20%;
24
height:30%;
25
margin: auto;
26
position: absolute;
27
top: -40%; left: -1%; bottom: 0; right: 0;
28
}
29
 
30
 
31
#pageborder ul {
32
 
33
    list-style: none;
34
text-decoration: none;
35
color: grey;
36
font-family: 'Open Sans';
37
}  
38
 
39
 
40
.nav_bar {
41
font-family: 'Open Sans';
42
font-size: 2.7vh;
43
height: 100%;
44
word-wrap: break-word;
45
position: relative;
46
overflow: hidden;
47
text-align: -webkit-center;
48
margin-right: 5.5vw;
49
z-index: 9999;
50
  
51
}
52
 
53
.nav_bar li:nth-child(6)  {
54
    padding-right: 20px;
55
  
56
}
57
 
58
 
59
.nav_bar ul {
60
list-style-type: none;
61
font-family: 'Open Sans', sans-serif;
62
text-transform: uppercase;
63
word-spacing: 15px;
64
text-decoration: none;
65
}
66
 
67
.nav_bar ul li { /* Property hacks for IE and Mozzila - makes nav bar horizontal */
68
 
69
display:-moz-inline-stack;
70
display:inline-block;
71
zoom:1;
72
*display:inline;
73
}
74
 
75
 /* This Is The Underline Hover Code */
76
 
77
.nav_bar ul li a:after {
78
    height: 2px;
79
content: '';
80
display: block;
81
    *display:inline;
82
background: rgb(82,82,82);
83
    opacity:0;
84
    width: 100%;
85
}
86
 
87
 
88
 
89
.nav_bar ul li a:after:hover {
90
background:#16A6B6;
91
}
92
 
93
.nav_bar ul li a:hover:after {
94
opacity: 1;
95
transition-duration: 0.6s;
96
 
97
}
98
 
99
 /* Underline Hover Code Finishes Here */
100
 
101
.nav_bar ul li a {
102
    text-decoration: none;
103
color: rgb(82, 82, 82);
104
padding-bottom: 5px;
105
}
106
 
107
 
108
 
109
.nav_bar ul li, .nav_bar ul li li {
110
    margin-right:25px;
111
    word-spacing: 1px;
112
}
113
 
114
#content {
115
 
116
height:100%;
117
position: relative;
118
 
119
}
120
 
121
#nav_about {
122
 
123
position: absolute;
124
right:28%;
125
top:16.7%;
126
-webkit-transition: all 0.5s ease-in-out;
127
    -moz-transition: all 0.5s ease-in-out;
128
    -o-transition: all 0.5s ease-in-out;
129
    transition: all 0.5s ease-in-out;
130
 
131
}
132
 
133
#nav_about:hover {
134
 
135
right:30%;
136
 
137
}
138
 
139
#nav_ethos {
140
 
141
position: absolute;
142
right:61.5%;
143
top:16.7%;
144
-webkit-transition: all 0.5s ease-in-out;
145
    -moz-transition: all 0.5s ease-in-out;
146
    -o-transition: all 0.5s ease-in-out;
147
    transition: all 0.5s ease-in-out;
148
}
149
 
150
#nav_ethos:hover {
151
right: 59.5%;
152
}
153
 
154
#nav_path {
155
 
156
position: absolute;
157
right:48.4%;
158
top:62%;  
159
-webkit-transform: rotate(-63deg);
160
-moz-transform: rotate(-63deg);
161
-ms-transform: rotate(-63deg);
162
-o-transform: rotate(-63deg);
163
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2.5);
164
-webkit-transition: all 0.5s ease-in-out;
165
    -moz-transition: all 0.5s ease-in-out;
166
    -o-transition: all 0.5s ease-in-out;
167
    transition: all 0.5s ease-in-out;
168
}
169
 
170
#nav_path:hover {
171
    padding-top:2px;
172
    top:59%;
173
    right:47.8%;
174
  
175
}
176
 
177
#nav_cath {
178
position: absolute;
179
right:30.5%;
180
top:62%;
181
-webkit-transform: rotate(63deg);
182
-moz-transform: rotate(63deg);
183
-ms-transform: rotate(63deg);
184
-o-transform: rotate(63deg);
185
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-2.5);
186
-webkit-transition: all 0.5s ease-in-out;
187
    -moz-transition: all 0.5s ease-in-out;
188
    -o-transition: all 0.5s ease-in-out;
189
    transition: all 0.5s ease-in-out;
190
}
191
 
192
#nav_cath:hover {
193
    padding-top:2px;
194
    right:31.05%;
195
    top:59%;
196
 
197
}
198
 
199
 
200
#nav_priv {
201
 
202
position: absolute;
203
right:61%;
204
top:37%;
205
-webkit-transform: rotate(-23deg);
206
-moz-transform: rotate(-23deg);
207
-ms-transform: rotate(-23deg);
208
-o-transform: rotate(-23deg);
209
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.1);
210
-webkit-transition: all 0.5s ease-in-out;
211
    -moz-transition: all 0.5s ease-in-out;
212
    -o-transition: all 0.5s ease-in-out;
213
    transition: all 0.5s ease-in-out;
214
}
215
 
216
 
217
#nav_priv:hover {
218
    padding-top:2px;
219
    top:35.1%;
220
    right:59%;
221
 
222
}
223
 
224
#nav_contact {
225
 
226
position: absolute;
227
right:24.6%;
228
top:37%;
229
-webkit-transform: rotate(23deg);
230
-moz-transform: rotate(23deg);
231
-ms-transform: rotate(23deg);
232
-o-transform: rotate(23deg);
233
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1.1);
234
-webkit-transition: all 0.5s ease-in-out;
235
    -moz-transition: all 0.5s ease-in-out;
236
    -o-transition: all 0.5s ease-in-out;
237
    transition: all 0.5s ease-in-out;
238
  
239
}
240
 
241
#nav_contact:hover {
242
    padding-top:2px;
243
    top:35.5%;
244
    right:26.6%;
245
 
246
}
247
 
 

Untitled

CSSDeck G+