Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <!--
- New Perspectives on HTML and XHTML
- Tutorial 4
- Case Problem 3
- Longs Peak Online Map
- Author: David Fien
- Date: 6/25/2010
- Filename: longs.htm
- Supporting files: image.jpg - image9.jpg, lpmap.jpg
- -->
- <title>Longs Peak Online Map</title>
- <style type="text/css">
- body {font-family: sans-serif; margin: 20px; margin-bottom: 150px}
- h2 {margin-top: 0px}
- img {border-width: 0px; display: block}
- #summary {width: 600px; margin-bottom: 20px}
- a {text-decoration: none}
- #online_map {width: 600px; height:294; border: 1px solid rgb(0, 0, 0); background-image: url(lpmap.jpg); position: relative; top: 0; left: 0}
- .notes a {width: 20px; height: 20px; overflow: hidden; background_color: blue; font_color: white; z_index: 1}
- .notes p {font-size: 8pt; margin:5px}
- .notes span {color: yellow}
- </style>
- </head>
- <body>
- <div id="summary">
- <h2>Longs Peak Online Trail Map</h2>
- <p>
- At 14,255 feet, Longs Peak towers above all other summits in Rocky Mountain
- National Park. The summer is the only season in which the peak can be climbed
- by a non-technical route. Early mornings break calm, clouds build in the
- afternoon sky, often exploding in storms of brief, heavy rain, thunder and
- dangerous lightning. Begin your hike early, way before dawn, to be back below
- timberline before the weather turns for the worse.
- </p>
- <p>
- The Keyhole Route, Longs Peak's only non-technical hiking pathway, is a 16
- mile round trip with an elevation gain of 4,850 feet. Though non-technical,
- the Keyhole Route is still challenging and is not recommended for those who
- are afraid of heights or exposed ledges. Hikers should be properly outfitted
- with clothing, food and water. Use caution when ascending or descending steep
- areas. Don't be afraid to back down when bad weather threatens.
- </p>
- <p id="instruction">
- Move your mouse pointer over the numbered landmarks in the map to preview the hike.
- </p>
- </div>
- <div id="online_map">
- <div class="notes" id="point0">
- <a href="longs.html" type="text/css">
- <img src="image0.jpg" alt="" />
- <p>
- <span>3:30 a.m.</span> Start from the Longs Peak Ranger Station,
- nine miles south of Estes Park. Be sure to pack food, extra water,
- sunblock, and warm clothes, gloves, and caps.
- </p>
- </a>
- </div>
- <div class="notes" id="point1">
- <a href="longs.html">
- <img src="image1.jpg" alt="" />
- <p>
- <span>5:30 a.m.</span> Stop at Mills Moraine for a view of the
- sunrise.
- </p>
- </a>
- </div>
- <div class="notes" id="point2">
- <a href="longs.html">
- <img src="image2.jpg" alt="" />
- <p>
- <span>7:30 a.m.</span> Time for break at Granite Pass.
- </p>
- <a>
- </div>
- <div class="notes" id="point3">
- <a href="longs.html">
- <img src="image3.jpg" alt="" />
- <p>
- <span>8:30 a.m.</span> Climb through the Boulder Field on the
- way to the Keyhole.
- </p>
- </a>
- </div>
- <div class="notes" id="point4">
- <a href="longs.html">
- <img src="image4.jpg" alt="" />
- <p>
- <span>9:00 a.m.</span> Stop at the
- Agnes Vaille shelter for a well-deserved breakfast.
- </p>
- </a>
- </div>
- <div class="notes" id="point5">
- <a href="longs.html">
- <img src="image5.jpg" alt="" />
- <p>
- <span>9:30 a.m.</span> It's time to go through
- the Keyhole. Be prepared for heavy winds.
- </p>
- </a>
- </div>
- <div class="notes" id="point6">
- <a href="longs.html">
- <img src="image6.jpg" alt="" />
- <p>
- <span>10:00 a.m.</span> Follow the painted targets along the Ledges.
- </p>
- </a>
- </div>
- <div class="notes" id="point7">
- <a href="longs.html">
- <img src="image7.jpg" alt="" />
- <p>
- <span>11:00 a.m.</span> Take special care when crossing the Narrows.
- </p>
- </a>
- </div>
- <div class="notes" id="point8">
- <a href="longs.html">
- <img src="image8.jpg" alt="" />
- <p>
- <span>11:15 a.m.</span> You're almost there! Climb the Homestretch
- to reach the summit.
- </p>
- </a>
- </div>
- <div class="notes" id="point9">
- <a href="longs.html">
- <img src="image9.jpg" alt="" />
- <p>
- <span>11:45 a.m.</span> Congratulations, you've reached the top!
- Time for lunch and a few photos.
- </p>
- </a>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement