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

Untitled

CSSDeck G+