SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.7k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}6 7 8#home-layout .top-banner,.inner,body{position:relative}body{background:#f9f9f9;color:#525252;font:16px 'Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif;margin:0;z-index:1}a{border-bottom:1px dotted;color:#cd2b3a;text-decoration:none}a:active,a:focus,a:hover{border-bottom-style:solid;color:#7f000c}.inner{margin:0 auto;width:980px}.clear::after{clear:both;content:' ';display:block}.photo{background:#eaeaea;border:5px solid #eaeaea}a.photo:hover,a:hover .photo{border-color:#dadada}#header{background:#fff;border-bottom:1px solid #e0e0e0}#logo a,#navigation a{border-bottom-style:none}#header .inner{padding:8px 0 4px}#logo{float:left;margin-left:10px}#logo h3{font-family:Cambria,Georgia,'New Century Schoolbook','Century Schoolbook L','Times New Roman',serif;margin:0}#logo a{color:#333}#logo span{display:block;line-height:.8em}#logo span.title{font-size:2.3em}#logo span.description{font-size:1em;padding-left:5px}#navigation{height:28px;margin:0;padding:22px 5px 0 250px;text-align:right}#navigation li{display:inline;list-style:none;padding:0 25px}#navigation a{color:#000;display:inline-block;font-size:.9em;padding-bottom:2px;text-align:left;text-transform:uppercase}#navigation a.active,#navigation a:hover{border-bottom-style:solid;border-bottom-width:5px}#container{margin-top:20px;padding:0 0 20px}#home-layout .photo-holder{overflow:hidden;width:100%;z-index:1}#home-layout .photo-holder img{height:auto;margin:-15% 0;min-height:745px;width:100%}#home-layout .welcome{background:#eaeaea;bottom:5%;padding:10px 10px 10px 20px;position:absolute;right:0;width:35%;z-index:2}#home-layout .welcome h1{color:#000;font-size:1.6em;font-weight:400;margin:0;text-transform:uppercase}#home-layout .welcome p{font-size:1em;margin:.5em 0}#home-layout .welcome .action:after{content:' >'}#container .home-column{border:0 solid #e0e0e0;width:45%}#container .home-column h2{font-weight:400;margin:0;text-transform:uppercase}#container .home-column p{font-size:.8em;margin:0}#container .site-updates{float:left}#container .site-updates dl{padding:0}#container .site-updates dt{float:left;width:100px}#container .site-updates dd{margin-left:100px}#container .site-updates ul{list-style:none;margin:0 0 30px;padding:0}#container .site-updates li{margin-bottom:10px}#container .site-updates li a{border-bottom:0;color:#525252}#container .site-updates li a .comment-meta:before{clear:left;content:' ';display:block}#container .site-updates li a .comment-meta{font-size:.8em}#container .site-updates li a .comment-meta .link{border-bottom:1px dotted;color:#cd2b3a}#container .site-updates li a .comment-meta .link:hover{border-bottom-solid:solid;color:#7f000c}#container .log-updates{border-width:0 0 0 1px;margin-left:50%;padding-left:5%}#container .log-updates ul{list-style:none;padding:0}#container .log-updates li a{border-bottom:none;display:block;position:relative}#container .log-updates li a span{display:block}#container .log-updates li a img{border:3px solid #eaeaea}.introduction a,.sidebar .journal-list li a:hover{border-bottom-style:none}#container .log-updates li a:hover img{border-color:#dadada}#container .log-updates li a .log-content{bottom:10px;left:120px;position:absolute}#container .log-updates li a .log-content .title{font-size:1.2em;text-transform:uppercase}#container .log-updates li a .log-content .published{color:#525252;font-size:.8em}.introduction{background:#fff;margin-bottom:15px;padding:10px 15px}.introduction.grand{text-align:center}.introduction.callout .panel{float:left;width:63%}.introduction h1{color:#000;font-size:2em;font-weight:400;margin:0;text-transform:uppercase}.introduction.grand h1 .join{font-size:.8em;font-style:italic;text-transform:none}.introduction h2{font-size:1.1em;font-style:italic;font-weight:400;margin:.1em 0 .5em}.introduction a{color:#000}.introduction p{font-size:.9em;line-height:1.5em;margin:0}.introduction .meta{font-size:.9em;font-style:italic}.introduction .photo{margin-top:0;float:right;overflow:hidden;width:31%}.introduction .photo img{height:230px;margin:-50px 0;width:auto}.content{float:left;width:74%}.sidebar{margin:80px 0 0 76%}.sidebar h4{color:#bbb;font-weight:400;margin:20px 0 0;text-transform:uppercase}.sidebar ul{font-size:.9em;margin:0;padding:0}.sidebar li{list-style:none;margin:2px 0}.sidebar .journal-list li{margin-bottom:5px}.sidebar .journal-list span{display:inline-block}.sidebar .journal-list .title{margin-bottom:1px}.sidebar .journal-list a:hover .title{border-bottom:1px solid;margin-bottom:0}.sidebar .journal-list .date{display:block;font-style:italic;margin-left:10px}.sidebar dl{font-size:.8em;margin:0 0 10px;padding:0}.sidebar dt{color:#999;float:left;padding:1px 0;width:34%}.sidebar dd{margin-left:40%;padding:1px 0}.sidebar .rating{background:url(/image/stars.png) no-repeat;height:18px}.sidebar .rating span{display:none}.sidebar .rating.rate-0{background-position:0 -1px}.sidebar .rating.rate-1{background-position:0 -21px}.sidebar .rating.rate-2{background-position:0 -41px}.sidebar .rating.rate-3{background-position:0 -61px}.sidebar .rating.rate-4{background-position:0 -81px}.sidebar .rating.rate-5{background-position:0 -101px}.sidebar .rating.rate-6{background-position:0 -121px}.sidebar .rating.rate-7{background-position:0 -141px}.sidebar .rating.rate-8{background-position:0 -161px}.sidebar .rating.rate-9{background-position:0 -181px}.sidebar .rating.rate-10{background-position:0 -201px}.sidebar a{border-bottom-style:none;color:#777}.sidebar a:hover{border-bottom-style:solid}.sidebar dd a{border-bottom-style:dotted}.sidebar dd a:hover{border-bottom-style:solid}.sidebar .map{border:5px solid #eaeaea;display:block;margin:0 auto;width:98%}.sidebar .map:hover{border-color:#dadada}.sidebar .map img{display:block;height:auto;width:100%}.sidebar .count{color:#999;font-style:italic}.sidebar .distance{font-style:italic}.sidebar .count:before,.sidebar .distance:before{content:'('}.sidebar .count:after,.sidebar .distance:after{content:')'}.map-view,.map-view body{height:100%;position:relative;z-index:1}#legend,#map{position:absolute}.map-view #header{z-index:2}#map{bottom:0;height:auto;top:63px;width:100%}#map .waterfall-pane .title{font-family:'Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif}#map .waterfall-pane .title h2{font-size:18px}#map .waterfall-pane .title h4{font-size:13px}#legend{background:#fff;display:none;height:300px;left:100px;overflow-y:auto;top:100px;width:200px}.pagination{clear:both;font-size:.8em;padding:5px 10px;text-align:right}.pagination p{font-style:italic;margin:0}.pagination ul{margin:0;padding:2px 0}.pagination li{display:inline-block;margin:3px 1px}.pagination li a{border-bottom-style:none;color:#1d4472}.pagination li span{border:1px solid #ccc;display:inline-block;padding:1px 7px}.log-pane a,.waterfall-pane a{border-bottom-style:none}.pagination li a span{border-color:#1d4472;font-weight:700}.pagination li a:hover span,.pagination li.current span{background:#1d4472;border-color:#1d4472;color:#fff;font-weight:700}.waterfall-pane{height:265px;position:relative;width:350px}.waterfall-pane a{color:#727272;display:block}.waterfall-pane .photo img{display:block;height:auto;min-height:254px;width:100%}.waterfall-pane .title{background:#eaeaea;bottom:20px;padding:3px 7px;position:absolute;right:5px;width:73%}.log-pane a:hover .title,.waterfall-pane a:hover .title{background:#dadada}.waterfall-pane .title h2{color:#cd2b3a;font-size:1.1em;margin:0;text-transform:uppercase}.waterfall-pane a:hover .title h2{color:#7f000c}.waterfall-pane .title h4{font-size:.8em;font-weight:400;margin:0}#falls-listing .item{float:left;margin:4px 5px}#falls-listing .waterfall-pane{height:auto;width:48%}.log-pane .photo{border-bottom-style:solid;display:inline-block;float:left;width:200px}.log-pane .photo img{display:block;height:auto;min-height:150px;width:100%}.log-pane .title{margin-left:220px;padding:10px 5px}.log-pane .title h2{color:#cd2b3a;font-size:1.3em;margin:0;text-transform:uppercase}.log-pain a:hover .title h2{color:#7f000c}.log-pane .title h4{font-size:.8em;font-weight:400;margin:0}.log-pane .title h4 time{font-weight:700}#comments h3,#log .content h4,#waterfall .entry-content h3{color:#000;font-weight:400;text-transform:uppercase}.log-pane .title p{font-size:.8em}.log-pane ul.falls{font-size:.7em;padding:0}.log-pane ul.falls li{display:inline;font-style:italic;list-style:none;white-space:nowrap}.log-pane ul.falls li:after{content:','}#log .series ul:after,.log-pane ul.falls li:last-child:after{content:''}#journal-listing .item{margin-bottom:10px}#waterfall .entry-content{font-family:Optima,Segoe,'Segoe UI',Candara,Calibri,Arial,sans-serif;font-size:1.2em;margin:0 15px}#waterfall .entry-content h3{font-family:'Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif;font-size:1.4em;margin:1em 0 .5em}#waterfall .entry-content p{line-height:1.6em}#waterfall .waterfall-content{float:left}#waterfall .photo-container{margin:0 auto 1em;min-height:350px;width:95%}#waterfall .photo-container img{display:block;height:auto;width:100%}#log .series li,.album li,.album li a{display:inline-block}#log .entry-content{font-family:Optima,Segoe,'Segoe UI',Candara,Calibri,Arial,sans-serif;font-size:1.2em}#log .entry-content p{line-height:1.6em;margin:10px 0 20px}#log .photo-holder{background:#eaeaea;margin:0 auto 1em;padding:5px;width:90%}#imagelightbox-caption,#imagelightbox-overlay{background-color:#f9f9f9;bottom:0;left:0;right:0;position:fixed}#log .photo-holder img{height:auto;min-height:480px;width:100%}#log .photo-holder .photo-caption{font-size:.8em;font-style:italic;margin:0;text-align:center}#log .content h4{font-size:1.3em;margin-bottom:0}#log .series{font-size:.9em;margin-top:50px}#log .series ul{margin:0;padding:0;text-align:justify}#log .series li{list-style:none;margin:0}#log .series ul:after{display:inline-block;width:100%}#log .series li.previous{text-align:left}#log .series li.next{text-align:right}.album{margin:0 20px}.album ul{margin:10px 0 30px;padding:0;text-align:center}.album li{height:75px;list-style:none;margin:5px;text-align:center;width:100px}.album .photo{border-width:3px}.album li img{display:block;height:75px;margin:0 auto;width:auto}#imagelightbox{border:5px solid #eaeaea;cursor:pointer;position:fixed;z-index:5}#imagelightbox-overlay{background-color:rgba(249,249,249,.7);cursor:pointer;top:0;z-index:4}#imagelightbox-caption{border-top:1px solid #eaeaea;color:#000;font-family:'Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif;font-size:1.4em;padding:.5em 0;text-align:center;text-transform:uppercase;z-index:6}#imagelightbox-close{-webkit-border-radius:50%;-moz-border-radius:50%;background:#fff;border:1px solid #e0e0e0;border-radius:50%;color:#000;display:block;font-size:2em;line-height:.4em;padding:.4em .4em .5em;position:fixed;right:10px;top:10px;z-index:7}#comments{clear:both;padding-top:70px}#comments h3{font-size:1.4em;margin:0}#comments a{border-bottom-style:none}#comments .faux-link{background-color:#21759b;color:#fff;cursor:pointer;display:inline-block;padding:5px 7px}#comments .faux-link:active,#comments .faux-link:focus,#comments .faux-link:hover{background-color:#14485f}#comments li{clear:both;list-style:none;padding:10px 0 0}#comments .comment-listing{font-size:1em;margin:0;padding:0;word-wrap:break-word}#comments .comment-listing>li{margin:15px 0 25px}#comments li.reply{margin-left:7%}#comments .comment-meta{display:inline-block;float:left;margin-top:5px;min-height:43px;width:20%}#comments .comment-date{display:block;font-style:italic}#comments .comment-body{display:block;line-height:1.4em;margin:0 0 10px 25%}#comments .comment-body.pending{font-style:italic}#comments .comment-replies{border-left:1px solid #aaa;clear:both;margin:0}#comments .comment-hide,#comments .comment-new,#comments .comment-reply{display:block;text-align:right}#comments .comment-form{background:#f3f3f3;display:none;margin:10px 0 15px 25px;padding:10px 0}#comments .comment-form.active{display:block}#comments .comment-form ul{margin:0;padding:0}#comments .comment-form ul.errors{font-weight:700}#comments .comment-form li{margin:0 20px 15px;padding:0}#comments .comment-form li.catcher{display:none}#comments .comment-form li.text label{display:block;padding:2px 0 4px}#comments .comment-form li.text input{display:block;padding:3px 5px;width:50%}#comments .comment-form textarea{height:120px;padding:3px 5px;width:95%}#comments .comment-form input[type=submit]{background:#21759b;border:none;color:#fff;font-size:1.1em;padding:7px 15px;margin-right:7px}#comments .comment-form .mini,.bottom{font-size:.8em}#comments .comment-form input[type=reset]{margin-left:5px}#comments .comment-form input[type=submit]:active,#comments .comment-form input[type=submit]:focus,#comments .comment-form input[type=submit]:hover{background-color:#14485f}#footer,.bottom{background:#fff}#comments .comment-form .mini p{margin-top:0}#contact-form dl{padding:0}#contact-form dt{margin-top:20px;padding-left:10px}#contact-form dd{margin:0}.bottom{border-top:1px solid #e0e0e0;margin-top:40px;padding:20px 0 30px}#site-links{float:left;width:45%}#activity-feed{margin-left:55%}#activity-feed h4,#site-links h4{font-size:1.2em;font-weight:400;margin:0 0 10px;text-transform:uppercase}#activity-feed ul,#site-links ul{padding-left:20px}#site-links ul{font-size:1.2em}#activity-feed ul{padding-right:5px}#activity-feed li,#site-links li{margin-bottom:8px}#site-links a{border-bottom-style:none}#site-links a:hover{border-bottom-style:solid}#site-links a .title{border-bottom:1px dotted}#site-links a:hover .title{border-bottom-style:none}#site-links a .description{font-size:.9em;font-style:italic;padding-left:3px}#activity-feed .meta{display:block;font-style:italic;margin-right:10px;text-align:right}#activity-feed .read-more{float:right}#footer{font-size:.9em;padding:30px 0 50px}#footer #interior{text-align:center}#footer #interior p{margin:.5em 0}@media all and (min-width:1600px){#home-layout .top-banner{margin:0 auto;width:1600px}}@media all and (max-width:1000px){.inner{width:98%}#home-layout .photo-holder img{min-height:514px}#container .home-column,#home-layout .welcome{font-size:.9em}.introduction h1{font-size:1.6em}.content{width:80%}.sidebar{margin-left:82%}.sidebar dt{float:none;width:auto}.sidebar dd{margin:0 0 5px 10px}.waterfall-pane .photo img{min-height:185px}#waterfall .photo-container{min-height:380px}#log .photo-holder img{min-height:360px}}@media all and (max-width:700px){.inner{width:95%}#logo{float:none}#logo span.title{font-size:2em}#logo span.description{font-size:.8em}#navigation{height:auto;padding:10px 5px 0;text-align:left}#navigation li{margin-right:10px;padding:0 10px}#navigation a{padding-bottom:4px}#navigation a.active,#navigation a:hover{border-bottom-width:3px;padding-bottom:1px}#home-layout .welcome{bottom:0;padding:10px 5px 5px;position:relative;right:0;width:auto;z-index:1}#home-layout .welcome .action{float:right;margin-right:20px}#home-layout .welcome:after{clear:both;content:' ';display:block}.introduction.callout .photo,.log-pane ul.falls{display:none}#container .home-column{width:100%}#container .site-updates{float:none}#container .site-updates dt{width:80px}.content,.introduction.callout .panel{float:none;width:auto}#container .side-updates dd{margin-left:80px}#container .log-updates{border-width:1px 0 0;margin:20px 0 0;padding:10px 0 0}.introduction h1{font-size:1.6em}.introduction p{font-size:.8em}.sidebar{margin:20px 0 0}.sidebar dt{float:left;width:80px}.sidebar dd{margin:0 0 0 100px}.sidebar .map{margin:0;width:230px}#map{top:85px}.waterfall-pane .photo img{min-height:160px}#log .entry-content{font-size:1.1em}#imagelightbox-caption{font-size:1.2em}#site-links{float:none;width:auto}#activity-feed{margin:30px 0 0}}@media all and (max-width:600px){#home-layout .photo-holder img{min-height:0}.waterfall-pane .title h2{font-size:1em}.waterfall-pane .title h4{font-size:.7em}#falls-listing .waterfall-pane{width:47%}#waterfall .photo-container{min-height:320px}#log .photo-holder img{min-height:300px}}@media all and (max-width:500px){#logo,#navigation,.introduction h1,.introduction h2{text-align:center}#navigation li{display:inline-block;margin-right:0}.introduction p,.log-pane .title p{display:none}#home-layout .welcome{font-size:.8em}.introduction h1{font-size:1.4em}.introduction h2{font-size:1.1em}.waterfall-pane .title h2{font-size:1.1em}.waterfall-pane .title h4{font-size:.8em}#waterfall .photo-container{min-height:220px}#falls-listing .item{float:none;margin:4px auto}#falls-listing .waterfall-pane{width:90%}.log-pane .photo{width:42%}.log-pane .photo img{min-height:100px}.log-pane .title{float:right;margin-left:0;width:50%}#log .photo-holder img{min-height:200px}#comments .comment-listing{font-size:.9em}#comments .comment-replies{padding-left:10px}#comments .comment-meta{display:block;float:none;margin-top:0;width:auto}#content .meta li{margin-right:5px}#comments .comment-body{margin-left:0}#comments pre{font-size:1em}#comments .comment-form{margin-left:0;padding:5px 0 10px}#comments .comment-form li{margin:5px 10px 15px}#comments .comment-form li.text input,#comments .comment-form li.text textarea{font-size:1.1em}#comments .comment-form li.text input{width:95%}#imagelightbox-caption{font-size:1em}}@media all and (max-width:350px){#waterfall .photo-container,.log-pane .photo img{min-height:150px}.log-pane .photo,.log-pane .title{float:none;width:90%}#journal-listing .item{margin-bottom:20px}.sidebar dt{float:none;width:100%}.sidebar dd{margin:0 0 5px 10px}.sidebar .map{margin:0 auto;width:90%}.waterfall-pane .title h2{font-size:.9em}.waterfall-pane .title h4{font-size:.6em}.log-pane{text-align:center}.log-pane .title{text-align:left}#log .photo-holder img{min-height:170px}}9 </style>10 <meta charset="utf-8">11 <title>12 Upper Dead River Falls on Dead River | Waterfalls of the Keweenaw13 </title>14 <meta content="Downstream of the McClure Basin, between soaring cliff walls and surrounded by jagged banks, the Dead River makes a roaring cascade into a deep pool." name="description">15 <meta content="width=device-width" name="viewport">16 <meta content="Upper Dead River Falls" name="keywords">17 <meta content="m9ua4n8lp4FUYYa2UOh51UyZYfdivl-kRTtXKwaH0-s" name="google-site-verification">18 <meta content="AF1A4CEA30A7589590E9294C4B512607" name="msvalidate.01">19 </head>20 <body>21 <div class="clear" id="header">22 <div class="inner">23 <div id="logo">24 <h3>25 <a>26 <span class="title">27 Waterfalls28 </span>29 <span class="description">30 of the Keweenaw Area31 </span>32 </a>33 </h3>34 </div>35 <ul id="navigation">36 <li>37 <a>38 Falls39 </a>40 </li>41 <li>42 <a>43 Map44 </a>45 </li>46 <li>47 <a>48 Journal49 </a>50 </li>51 <li>52 <a>53 About54 </a>55 </li>56 </ul>57 </div>58 </div>59 <div class="inner">60 <div class="clear" id="container">61 <div class="hentry" id="waterfall">62 <div class="introduction grand clear">63 <h1 class="entry-title">64 <a>65 Upper Dead River Falls66 <span class="join">67 on68 </span>69 Dead River70 </a>71 </h1>72 <h2 class="entry-summary">73 rugged drop surrounded by soaring cliffs below McClure74 </h2>75 </div>76 <div class="content">77 <div class="photo photo-container">78 <img alt="Looking over the pond to the roaring falls" height="600" src="rick.jpg" width="800">79 </div>80 <div class="album clear">81 <ul>82 <li>83 <a class="photo" title="Looking over the pond to the roaring falls">84 <img alt="Looking over the pond to the roaring falls" height="75" src="rick.jpg" width="100">85 </a>86 </li>87 <li>88 <a class="photo" title="Stacked falls across the river">89 <img alt="Stacked falls across the river" height="75" src="rick.jpg" width="100">90 </a>91 </li>92 <li>93 <a class="photo" title="Steep southern bank">94 <img alt="Steep southern bank" height="75" src="rick.jpg" width="100">95 </a>96 </li>97 <li>98 <a class="photo" title="Snow around Dead River">99 <img alt="Snow around Dead River" height="75" src="rick.jpg" width="100">100 </a>101 </li>102 </ul>103 </div>104 <div class="entry-content">105 <div class="description">106 <p>107 The Dead River is surrounded by soaring rock cliffs downstream of McClure Basin. Below one of these cliffs, on a sharp twist of the river above a deep pool, the water drops over a wide, jagged set of drops that is set between jagged banks.108 </p>109 </div>110 <h3>111 Directions112 </h3>113 <div class="directions">114 <p>115 Take County Road 502 from US-41, a right turn about 2.5 miles west of Marquette, up to County Road 510. Stay on 510 for 2.5 miles before turning right on Neejee Road.116 </p>117 <p>118 The easiest route is to just head down the hill to the bottom of the dam (the top is fenced off, so don't head that way). Follow the Dead River downstream past119 <a target="_blank">120 McClure Dam Falls121 </a>122 to Upper Dead River Falls, about a fifteen minute walk. The waterfall is difficult to view, across a steeply walled pool, unless you can find a way to cross downstream.123 </p>124 </div>125 </div>126 <div id="comments">127 <h3>128 Comments (0)129 </h3>130 <ul class="comment-listing">131 <li id="comment-new">132 <span class="comment-new">133 <span class="faux-link" onclick="document.getElementById('comment-form-new').style.display = 'block'; return true;">134 Add a comment135 </span>136 </span>137 <div class="comment-form" id="comment-form-new">138 <form action="#comment-form-new" method="post">139 <ul>140 <li class="text">141 <label for="name-new">142 Name (required)143 </label>144 <input id="name-new" name="name" type="text" value>145 </li>146 <li class="text">147 <label for="email-new">148 Email (required, not displayed)149 </label>150 <input id="email-new" name="email" type="email" value>151 </li>152 <li class="text">153 <label for="website-new">154 Website155 </label>156 <input id="website-new" name="website" type="url" value>157 </li>158 <li class="catcher">159 <input name="catch" type="text" value>160 </li>161 </ul>162 </form>163 </div>164 </li>165 </ul>166 </div>167 </div>168 <div class="sidebar">169 <h4>170 Waterfall Details171 </h4>172 <dl>173 <dt>174 Name175 </dt>176 <dd>177 Upper Dead River Falls178 </dd>179 <dt>180 Rating181 </dt>182 <dd class="rating rate-7" title="3.5/5">183 <span>184 3.5/5185 </span>186 </dd>187 <dt>188 River System189 </dt>190 <dd>191 <a title="Dead River">192 Dead River193 </a>194 </dd>195 </dl>196 <dl>197 <dt>198 Height199 </dt>200 <dd>201 15'202 </dd>203 <dt>204 Width205 </dt>206 <dd>207 10'208 </dd>209 </dl>210 <div class="location-chunk">211 <dl>212 <dt>213 County214 </dt>215 <dd>216 <a title="Wild Mountains of Marquette">217 Marquette County218 </a>219 </dd>220 <dt>221 Closest Town222 </dt>223 <dd>224 Marquette225 </dd>226 <dt>227 Location228 </dt>229 <dd>230 46.55178, -87.51686231 </dd>232 <dt>233 Elevation234 </dt>235 <dd>236 1,109'237 </dd>238 </dl>239 <a class="map" title="View Upper Dead River Falls on a larger map">240 <img alt="Upper Dead River Falls Location" height="200" src="rick.jpg" width="230">241 </a>242 </div>243 <h4>244 Journal Entries245 </h4>246 <ul class="journal-list">247 <li>248 <a>249 <span class="title">250 Long Day in the Marquette Area251 </span>252 <span class="date">253 November 14, 2008254 </span>255 </a>256 </li>257 <li>258 <a>259 <span class="title">260 Wet Snow and Mud in Marquette County261 </span>262 <span class="date">263 April 8, 2009264 </span>265 </a>266 </li>267 </ul>268 <h4>269 Nearby Waterfalls270 </h4>271 <ul class="waterfall-list">272 <li>273 <a title="Holyoke Falls of Holyoke Creek">274 <span class="title">275 Holyoke Falls276 </span>277 <span class="distance">278 2.3 miles279 </span>280 </a>281 </li>282 <li>283 <a title="McClure Dam Falls of Dead River">284 <span class="title">285 McClure Dam Falls286 </span>287 <span class="distance">288 290 yards289 </span>290 </a>291 </li>292 <li>293 <a title="Trestle Falls of Dead River">294 <span class="title">295 Trestle Falls296 </span>297 <span class="distance">298 0.7 miles299 </span>300 </a>301 </li>302 <li>303 <a title="Upper Reany Falls of Reany Creek">304 <span class="title">305 Upper Reany Falls306 </span>307 <span class="distance">308 1.9 miles309 </span>310 </a>311 </li>312 </ul>313 </div>314 </div>315 </div>316 </div>317 <div class="bottom">318 <div class="inner">319 <div id="site-links">320 <h4>321 Some of my Sites322 </h4>323 <ul>324 <li>325 <a title="Jacob Emerick's Home">326 <span class="title">327 Home328 </span>329 <span class="description">330 the main site for Jacob Emerick331 </span>332 </a>333 </li>334 <li>335 <a title="Jacob's Blog about programming and hiking">336 <span class="title">337 Blog338 </span>339 <span class="description">340 posts on hiking, web development, and me341 </span>342 </a>343 </li>344 <li>345 <a title="Combination of Jacob's online activities">346 <span class="title">347 Lifestream348 </span>349 <span class="description">350 combination of online tomfoolery351 </span>352 </a>353 </li>354 <li>355 <a title="Hiking map of Jacob's wanderings">356 <span class="title">357 Map358 </span>359 <span class="description">360 summary of upper peninsula adventures361 </span>362 </a>363 </li>364 </ul>365 </div>366 <div id="activity-feed">367 <h4>368 Activity Stream369 </h4>370 <ul>371 <li>372 Read The Way of Kings (The Stormlight Archive, #1) by Brandon Sanderson.373 <span class="meta">374 <time class="dtstart" datetime="2023-10-08T00:00:00-07:00" title="October 8, 2023">375 last month376 </time>377 </span>378 </li>379 <li>380 Read A Court of Thorns and Roses eBook Bundle: A 5 Book Bundle by Sarah J. Maas.381 <span class="meta">382 <time class="dtstart" datetime="2023-10-07T00:00:00-07:00" title="October 7, 2023">383 last month384 </time>385 </span>386 </li>387 <li>388 Read Over and Under the Snow by Kate Messner.389 <span class="meta">390 <time class="dtstart" datetime="2023-10-07T00:00:00-07:00" title="October 7, 2023">391 last month392 </time>393 </span>394 </li>395 <li>396 Read The Priory of the Orange Tree (The Roots of Chaos, #1) by Samantha Shannon.397 <span class="meta">398 <time class="dtstart" datetime="2023-06-05T18:30:21-07:00" title="June 5, 2023">399 long ago400 </time>401 </span>402 </li>403 </ul>404 <a class="read-more">405 View more activities…406 </a>407 </div>408 </div>409 </div>410 <div id="footer">411 <div id="interior">412 <a id="back-to-top" title="Back to the Top of the Page">413 ↑ Back to top414 </a>415 <p>416 Powered by417 <a title="Site Information">418 jacobemerick.com419 </a>420 © 2023421 </p>422 </div>423 </div>424 </body>425</html>426