-
Notifications
You must be signed in to change notification settings - Fork 0
/
carto.html
126 lines (98 loc) · 3.75 KB
/
carto.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>carto</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=KoHo:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet"
href="http://unpkg.com/[email protected]/dist/leaflet.css">
<script
src="http://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<style>
</style>
<body>
<h3>This page is under construction. </h3>
<header>
<div class="titletext">
<h2>Lydia Youngblood</h2>
</div>
<nav>
<ul>
<li><a href="carto.html">carto</a></li>
<li><a href="photo.html">photo</a></li>
<li><a href="bio.html">bio</a></li>
</ul>
</nav>
</header>
<main>
<div class="gallery">
<figure class="gallery__item gallery__item--1">
<a href="https://cartographymaster.eu/studentwork/kenans-climb-honoring-kenans-record-hike/"><img src="images/Kenan'sClimbForWebsite.png" class="gallery__img" alt="Image 1"
id="image1" onMouseOver="showText('Kenan’s Climb: Honoring Alexander Kenan’s record-breaking hike')" onMouseOut="hide();">
</a>
<div id="text"></div>
</figure>
<figure class="gallery__item gallery__item--2">
<img src="images/young_lee_ceballos_yang_Panorama.svg" class="gallery__img" alt="Image 2">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="images/Downtown Durham.png" class="gallery__img" alt="Image 3">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="images/Screenshot 2023-01-08 152407.jpg" class="gallery__img" alt="Image 4">
</figure>
<figure class="gallery__item gallery__item--5">
<a href="SportFit.html"><img src="images/sportfit.png" class="gallery__img" alt="Image 5"
id="image2" onMouseOver="showText2('SportFit App')" onMouseOut="hide2();">
</a>
<div id="text2"></div>
</figure>
<figure class="gallery__item gallery__item--6">
<a href="ClearlyNow.html"><img src="images/outsetcanyouseeclearly.png" class="gallery__img" alt="Image 6"
id="image3" onMouseOver="showText3('Can you see clearly now?')" onMouseOut="hide3();">
</a>
<div id="text3"></div>
</figure>
</div>
</main>
</body>
<script>
//https://cartographymaster.eu/studentwork/mp-group7/
// this scroll thing not working. Want to have it so when you scroll, there is a shadow appearing.
$(window).scroll(function(){
if (document.body.scrollTop === 0)
$(".header").css({"color":"#dc0d07"});
else
$(".header").css({"color":"#dc0d07"});
});
function showText(text){
document.getElementById("text").innerHTML=text;
}
function hide(){
document.getElementById("text").innerHTML="";
}
function showText2(text){
document.getElementById("text2").innerHTML=text;
}
function hide2(){
document.getElementById("text2").innerHTML="";
}
function showText3(text){
document.getElementById("text3").innerHTML=text;
}
function hide3(){
document.getElementById("text3").innerHTML="";
}
</script>
</html>