forked from MicrosoftEdge/Demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
225 lines (217 loc) · 8.13 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D View demo</title>
<meta charset="utf-8" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../shared/img/logo.png"
/>
<link rel="stylesheet" href="../shared/css/shared.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="root">
<a href="#article" class="skip-link">Skip to main content</a>
<h1>Microsoft Edge DevTools 3D View tool demo</h1>
<div class="intro">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<p>
This is a demo of the 3D View tool in Microsoft
Edge DevTools.
<a
href="https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/3d-view/"
>Open the tool</a
>
now to explore the page in 3D.<br />
This page contains deeply nested DOM elements,
out-of-document elements, an unwanted scrollbar,
and composited layers, which are all interesting
things to explore with the 3D View tool.<br />
Read more about the demo page and the use cases it showcases <a href="https://github.com/MicrosoftEdge/Demos/tree/main/devtools-3d#readme">here</a>.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<img
src="delorean.png"
alt="A hand drawing of the delorean car in the Back to the Future movie"
/>
<main id="article">
<h2>Some text below!</h2>
<p>
You do? I have to tell you about the future. Yeah, I think maybe you
do. Doc. No, it was The Enchantment Under The Sea Dance. Our first
date. It was the night of that terrible thunderstorm, remember George?
Your father kissed me for the very first time on that dance floor. It
was then I realized I was going to spend the rest of my life with him.
</p>
<p>
No, bastards. After I fell off my toilet, I drew this. No wait, Doc,
the bruise, the bruise on your head, I know how that happened, you
told me the whole story. you were standing on your toilet and you were
hanging a clock, and you fell, and you hit your head on the sink, and
that's when you came up with the idea for the flux capacitor, which
makes time travel possible. Re-elect Mayor Goldie Wilson. Progress is
his middle name. That's good advice, Marty.
</p>
<p>
Yeah Mom, we know, you've told us this story a million times. You felt
sorry for him so you decided to go with him to The Fish Under The Sea
Dance. Yeah well, you shouldn't drink. Wait a minute, wait a minute,
Doc, are you telling me that you built a time machine out of a
delorean. Yoo. This Saturday night, mostly clear, with some scattered
clouds. Lows in the upper forties.
</p>
<h2>And more text!</h2>
<p>
Listen, I gotta go but I wanted to tell you that it's been
educational. Well, Marty, I'm almost eighteen-years-old, it's not like
I've never parked before. Now remember, according to my theory you
interfered with with your parent's first meeting. They don't meet,
they don't fall in love, they won't get married and they wont have
kids. That's why your older brother's disappeared from that
photograph. Your sister will follow and unless you repair the damages,
you will be next. Don't tell me. Uh, you want me to buy a subscription
to the Saturday Evening Post? What's that thing he's on?
</p>
<ul class="images">
<li id="slide-1">
<img
src="hoverboard.png"
alt="A hand drawing of the hoverboard in the Back to the Future movie"
/>
</li>
<li id="slide-2">
<img
src="flux.png"
alt="A hand drawing of the flux capacitor in the Back to the Future movie"
/>
</li>
<li id="slide-3">
<img
src="guitar.png"
alt="A hand drawing of the guitar used by the main character in the Back to the Future movie"
/>
</li>
<li id="slide-4">
<img
src="delorean.png"
alt="A hand drawing of the Delorean car in the Back to the Future movie"
/>
</li>
<li id="slide-5">
<img
src="shoe.png"
alt="A hand drawing of the future shoes the main character wears in the Back to the Future movie"
/>
</li>
</ul>
<ul class="images-nav">
<li>
<a href="#slide-1">1</a>
</li>
<li>
<a href="#slide-2">2</a>
</li>
<li>
<a href="#slide-3">3</a>
</li>
<li>
<a href="#slide-4">4</a>
</li>
<li>
<a href="#slide-5">5</a>
</li>
</ul>
<p>
Good evening, I'm Doctor Emmet Brown, I'm standing here on the parking
lot of- What was it, George, bird watching? Oh no, don't touch that.
That's some new specialized weather sensing equipment. Shut your
filthy mouth, I'm not that kind of girl. Here you go, lady. There's a
quarter.
</p>
<p>
Hey Marty, I'm not your answering service, but you're outside pouting
about the car, Jennifer Parker called you twice. Now which one was it,
Greg or Craig? My name's Lorraine, Lorraine Baines. Your, your right.
You're George McFly.
</p>
</main>
<footer>
<div id="section-nav" class="section-nav">
<div class="bottom">
<ul>
<li class="logo"><a href="#">Marty</a></li>
<li class="active"><a href="#">Emmet</a></li>
<li><a href="#">George</a></li>
<li><a href="#">Lorraine</a></li>
<li><a href="#">The Sea Dance</a></li>
<li></li>
</ul>
</div>
</div>
</footer>
</div>
<div class="easter">
<div style="width: 40px">
<div style="width: 10px; left: 30px">
<div style="width: 10px">
<div style="width: 40px; left: -30px">
<div style="width: 10px; left: 30px">
<div style="width: 10px">
<div style="width: 40px; left: -30px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 20px; left: 60px">
<div style="width: 10px; left: 10px">
<div style="width: 10px">
<div style="width: 10px">
<div style="width: 10px">
<div style="width: 10px">
<div style="width: 20px; left: -10px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 20px; left: 80px">
<div style="width: 20px; left: 10px">
<div style="width: 20px; left: 10px">
<div style="width: 10px; left: 10px">
<div style="width: 20px; left: -10px">
<div style="width: 20px; left: -10px">
<div style="width: 20px; left: -10px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>