forked from JohnEdChristensen/WebbCompare
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbasic.html
More file actions
148 lines (125 loc) · 7.6 KB
/
basic.html
File metadata and controls
148 lines (125 loc) · 7.6 KB
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
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Webb Compare</title>
</head>
<body>
<div class="main" style="margin-bottom: 200px;">
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" style="position:absolute; top:0;right:0; padding:1em;">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
<img class="logo" src="img/WebbCompareLogo.png">
<h1> <a href="Southern_Nebula.html">Compare with Zoom and Fullscreen (Works best on desktop)</a></h1>
<hr />
<h1> <a href="https://en.wikipedia.org/wiki/SMACS_J0723.3-7327">Galaxy Cluster SMACS 0723</a></h1>
<figure class="cd-image-container">
<img alt="Webb's first Deep Field" srcset="img/webb/deep_field_2800.jpg 2800w,
img/webb/deep_field_1400.jpg 1400w,
img/webb/deep_field_700.jpg 700w,
img/webb/deep_field_350.jpg 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/webb/deep_field.png">
<span class="cd-image-label" data-type="original">Webb</span>
<div class="cd-resize-img">
<!-- the resizable image on top -->
<img alt="Hubble's Deep Field" srcset="img/hubble/deep_field_2800.jpg 2800w,
img/hubble/deep_field_1400.jpg 1400w,
img/hubble/deep_field_700.jpg 700w,
img/hubble/deep_field_350.jpg 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/hubble/deep_field.png">
<span class="cd-image-label" data-type="modified">Hubble</span>
</div>
<span class="cd-handle"></span>
</figure> <!-- cd-image-container -->
<h1> <a href="https://en.wikipedia.org/wiki/NGC_3132">Southern Ring Nebula</a></h1>
<figure class="cd-image-container">
<img alt="Webb's Southern Ring Nebula" srcset="img/webb/southern_nebula_2800.jpg 2800w,
img/webb/southern_nebula_1400.jpg 1400w,
img/webb/southern_nebula_700.jpg 700w,
img/webb/southern_nebula_350.jpg 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/webb/southern_nebula.png">
<span class="cd-image-label" data-type="original">Webb</span>
<div class="cd-resize-img">
<!-- the resizable image on top -->
<img alt="Hubble's Southern Ring Nebula" srcset="img/hubble/southern_nebula_2800.jpg 2800w,
img/hubble/southern_nebula_1400.jpg 1400w,
img/hubble/southern_nebula_700.jpg 700w,
img/hubble/southern_nebula_350.jpg 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/hubble/southern_nebula.png">
<span class="cd-image-label" data-type="modified">Hubble</span>
</div>
<span class="cd-handle"></span>
</figure> <!-- cd-image-container -->
<h1> <a href="https://en.wikipedia.org/wiki/Stephan%27s_Quintet">Stephan's Quintet</a></h1>
<figure class="cd-image-container">
<img alt="Webb's Stephan's Quintet" srcset="img/webb/stephans_quintet_2800.jpg 2800w,
img/webb/stephans_quintet_1400.jpg 1400w,
img/webb/stephans_quintet_700.jpg 700w,
img/webb/stephans_quintet_350.jpg 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/webb/stephans_quintet.jpg">
<span class="cd-image-label" data-type="original">Webb</span>
<div class="cd-resize-img">
<!-- the resizable image on top -->
<img alt="Hubble's Stephan's Quintet" srcset="img/hubble/stephans_quintet_2800.jpg 2800w,
img/hubble/stephans_quintet_1400.jpg 1400w,
img/hubble/stephans_quintet_700.jpg 700w,
img/hubble/stephans_quintet_350.jpg 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/hubble/stephans_quintet.jpg">
<span class="cd-image-label" data-type="modified">Hubble</span>
</div>
<span class="cd-handle"></span>
</figure> <!-- cd-image-container -->
<h1> <a href="https://en.wikipedia.org/wiki/Carina_Nebula">Carina Nebula</a></h1>
<figure class="cd-image-container">
<img alt="Webb's Carina" srcset="img/webb/carina_2800.jpg 2800w,
img/webb/carina_1400.jpg 1400w,
img/webb/carina_700.jpg 700w,
img/webb/carina_350.jpg 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/webb/carina.jpg">
<!-- <img src="img/Stephan's_Quintet_Hubble_Rotated.jpg" alt="Hubble Image">-->
<span class="cd-image-label" data-type="original">Webb</span>
<div class="cd-resize-img">
<img alt="Hubble's Carina" srcset="img/hubble/carina_2800.png 2800w,
img/hubble/carina_1400.png 1400w,
img/hubble/carina_700.png 700w,
img/hubble/carina_350.png 350w" sizes="(max-width: 450px) 350px,
(max-width: 900px) 700px,
(max-width: 1700px) 1400px,
2800px" src="img/hubble/carina.png">
<span class="cd-image-label" data-type="modified">Hubble</span>
</div>
<span class="cd-handle"></span>
</figure> <!-- cd-image-container -->
<div style="position: fixed;bottom: 0;right: 0;padding:1em;">
<a href="https://github.com/JohnEdChristensen/WebbCompare/tree/gh-pages">
<i class="fa fa-github"></i></a>
</div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script> <!-- Resource jQuery -->
<script src="js/main.js"></script> <!-- Resource jQuery -->
</div>
</body>
</html>