-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (136 loc) · 6.44 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- link to stylesheet for CSS -->
<link rel="icon" href="images///leaf_b.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"><!-- link to social icon library -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css//main.css">
<style type="text/css">
/* this image would not load through main.css during local testing*/
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images///Office_View.png");
}
</style>
<title>Home</title>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="">
</script>
<!-- Navigation bar, top of page -->
<div class="topnav">
<a id="logo"><img src="images///leaf_b.png" alt="leaf stand in text" title="leaf stand in Logo" style="width:29px;height:29px;margin-top:45%;"></a>
<div class="topnav-right">
<a href="index.html">
<button class="fa-solid fa-house" ></button>
</a>
<a href="projects.html">
<button class="fa-solid fa-code" ></button>
</a>
<a href="map_portfolio.html"> <button class="fa-solid fa-map-location-dot"></button></a>
<a>
<a>
<button class="fa-solid fa-moon-o" onclick="myFunction()"></button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</a>
</div>
</div>
<!-- Navigation bar, bottom of bar -->
<!-- top of hero image, built in 2% margin top and bottom-->
<div class="hero-image">
<div class="hero-text" >
<h1 style="font-size:50px">Web maps that
<br>
conquer mountains.</h1>
<p>
<br>
From interactive to memorable,
<br>
your clients expect a
<br>
phenominal experience.</p>
<br>
<br>
<p>Here's how I can help.
<br>
<br>
<br>
</p>
<a href="projects.html">
<button>Featured</button>
</a>
</div>
</div>
<!-- bottom of hero image, built in 2% margin top and bottom-->
<!-- top of nothing yet but fluid container for highligh of skills and links, built in 2% margin top and bottom-->
<div class="container-fluid" >
<br>
<p> </p>
<br>
</div>
<!-- bottom of nothing, -->
<!-- top of location contact, built in 2% margin top and bottom-->
<div class="container-fluid" style="text-align: center;" >
<div class="justify-content-center align-items-center">
<div class="col-sm-6">
<h1>Currently working remote from:
<br>
<br>
</h1>
<p>Beautiful British Columbia!
<br>
<br>
Situated under the majestic Hudson Bay Mountain, bordered by natural beauty in every direction.
<br>
<b>Smithers, BC</b> is more than just a marker on a leaflet map!
<br>
<br>
Respectfully working on unceded Wetsuweten Territory.
<br>
<br>
</p><p style='font-size:8px'>Image Credit: James Burton, Hudson Bay Mountain, Smithers BC, 2022. DJI Mini 2.
</p>
</div>
<div class="col-sm-6">
<div id="map"></div>
<script>
const map = L.map('map', {
center: [54.7824, -127.1686],
zoom: 10
}); L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 20}).addTo(map);
const marker1 = L.marker([54.7824, -127.1686]).addTo(map);
</script>
</div>
</div>
</div>
<!-- top of location contact, built in 2% margin top and bottom-->
<div class="container-fluid" >
<br>
<p> </p>
<br>
</div>
<!-- top of footer-->
<div class="footer">
<a href="https://ca.linkedin.com/in/jms-brtn" class="fa-brands fa-linkedin-square" style="font-size:48px;color:#FFFFFF"></a>
<a href="https://github.com/James-Burton" class="fa-brands fa-github" style="font-size:48px;color:#FFFFFF"></a>
<p class="copyright">ⓒ James Burton 2022</p>
</div>
<!-- bottom of footer-->
</body>
</html>