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.8k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 /*6 7*/8 9/* --- CUSTOM RESET --- */10/* using h5bp.com/css by HTML5 Boilerplate and Normalize.css by Nicolas Gallagher and Jonathan Neal */11article, aside, details, figcaption, figure, 12footer, header, hgroup, menu, nav, section {display: block; overflow:hidden;}13audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }14audio:not([controls]) { display: none; }15html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }16body { margin: 0; font-size: 12px; line-height: 1.5; }17body, button, input, select, textarea { font-family: Arial, sans-serif; color: #666666; }18::-moz-selection { background: #ed202e; color: #fff; text-shadow: none; }19::selection { background: #ed202e; color: #fff; text-shadow: none; } 20/* LINKS */21a { color: #ed202e; cursor: pointer; }22a:hover { color: #ed202e; 23transition: color 0.2s linear;-moz-transition: color 0.2s linear;-webkit-transition: color 0.2s linear;-o-transition: color 0.2s linear; } 24a:visited { color: ;}25*:hover, *:focus, *:active { outline: 0; outline: none; }26/* TYPO */27abbr[title] { border-bottom: 1px dotted; }28dfn { font-style: italic; }29hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }30p {margin:0 0 1em;}31pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }32q { quotes: none; }33q:before, q:after { content: ""; content: none; }34blockquote { margin: 0 20px 20px 0; padding: 5px 5px 5px 15px; border-left: 1px solid #DDD; font-style: italic; color: #999; }35b, strong, .strong { font-weight: bold; }36small, .small { font-size: 85%; }37address{font-style: normal;}38/* LIST */39dd { margin: 0 0 0 40px; }40ul, ol, menu { list-style: none; list-style-image: none; margin: 0; padding: 0; }41/* EMBEDDED CONTENT */42img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }43svg:not(:root) { overflow: hidden; }44figure { margin: 0; }45/* FORM */46form { margin: 0; }47fieldset { border: 0; margin: 0; padding: 0; }48label { cursor: pointer; }49legend { border: 0; *margin-left: -7px; padding: 0; }50button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }51button, input { line-height: normal; *overflow: visible; }52table button, table input { *overflow: auto; }53button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }54input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }55input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }56input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }57button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }58textarea { overflow: auto; vertical-align: top; resize: vertical; }59/* TABLE */60table { border-collapse: collapse; border-spacing: 0; }61td { vertical-align: top; }62/* --- END NORMALIZE --- */63 64/* ----65STYLES66 67---- */68h1, h2, h3, h4, h5, h6 { margin: 0 0 1em }69h1 { font-size: 50px; letter-spacing: -0.075em; text-transform: uppercase; line-height: 0.9; color: #555; margin: 0 0 30px; font-weight: normal; }70h2 { font-size: 30px; margin: 0 0 20px; letter-spacing: -0.05em; color: #555; line-height: 1; }71h3 { font-size: 21px }72h4 { font-size: 18px }73h5 { font-size: 14px; text-transform: uppercase; margin: 0; color: #555; }74h6 { font-size: 12px; margin-bottom: 2px; }75body { width: 100%; min-width: 988px; overflow: hidden; }76.center { margin-left: auto; margin-right: auto; display: block; clear: both; overflow: hidden; padding: 0 5px; width: 1020px; }77.column7 { width: 52.4662577%; overflow: hidden; float: right; display: block; height: 100%; }78.column6 { width: 52.4662577%; overflow: hidden; float: right; display: block; height: 100%; }79.column5 { width: 11.6993865%; overflow: hidden; float: left; display: block; height: 100%; }80.column4 { width: 22.6993865%; overflow: hidden; float: left; display: block; height: 100%; }81.column3 { width: 41.2883436%; overflow: hidden; float: left; display: block; height: 100%; }82.column2 { width: 48.4662577%; float: left; display: block; height: 100%; }83.columnthird { width: 74.2331288%; min-width: 750px; overflow: hidden; float: left; display: block; height: 100%;}84.mleft { margin-left: 3.06748466% }85.mright { margin-right: 3.06748466% }86.mright2 { margin-right: 0.06748466% }87.column4in { width: 30.5785124%; overflow: hidden; float: left; display: block; height: 100%; }88.column3in { width: 42.1487603%; overflow: hidden; float: left; display: block; height: 100%; }89.column2in { width: 65.2892562%; overflow: hidden; float: left; display: block; height: 100%; }90.mbottom { margin-bottom: 30px }91.mr { margin-right: 10px }92.mb { margin-bottom: 10px }93.fright, .fleft { display: block; overflow: hidden; }94.fright { float: right }95.fleft { float: left }96/* HEADER */97header#navtop { margin-bottom: 10px; background: url(../img/stripes.png) no-repeat 253px 0; }98.logo { margin: 40px 0 }99header nav { margin-top: 60px }100 header nav ul { float: left; overflow: hidden; padding: 0 30px 0 20px; border-left: 1px solid #ddd; line-height: 24px; }101nav a, menu a { text-decoration: none; color: #666; }102.navactive { color: #ed202e }103/**/104.part { margin-bottom: 20px }105.title { border-top: 1px solid #999; padding-top: 10px; color: #555; margin-bottom: 10px; }106/**/107.arrow { padding-right: 15px; background: url(../img/arrow.png) no-repeat right center; text-decoration: none; }108.arrow:hover { background: url(../img/arrowhover.png) no-repeat right center; color: #ed202e; }109.more { color: #999; font-style: italic; }110/* SLIDER */111#slides { position: relative; z-index: 1; }112.slides_container { width: 800px; height: 290px; display: none; }113 .slides_container .slide { width: 850px; height: 290px; display: block; }114.slide figure { overflow: hidden; height: 100%; }115.slide img { max-width: 100%; height: auto; width: auto; display: block; }116.slide figcaption { position: absolute; background: white; height: auto; min-height: 45px; width: 190px; padding: 5px; top: 30px; right: 0; }117 .slide figcaption div { text-align: right; display: block; border-right: 1px solid #DDD; padding: 3px 20px 0 0; margin: auto 50px auto 0; }118 .slide figcaption div p { margin: 0 }119.prev { position: absolute; top: 55px; right: -475px; width: 20px; height: 10px; z-index: 10; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; text-align: left; direction: ltr; }120.next { position: absolute; top: 55px; right: -500px; width: 20px; height: 10px; z-index: 10; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; text-align: left; direction: ltr; }121/*---------*/122.services { border-top: 1px solid #DDD; padding-top: 10px; }123 .services p { margin: 0 }124.number { color: #999 }125.sepmini { display: block; height: 1px; width: 10px; background: #DDD; margin: 10px 0; overflow: hidden; border: 0; }126/* FOOTER */127footer h7 {font-size: 10px; }128footer.part { padding-top: 20px; border-top: 1px solid #999; color: #555; margin-bottom: 80px; }129footer nav ul { float: right; overflow: hidden; }130footer a {text-decoration: none;color: #666;}131footer li { float: left; margin-right: 10px; padding-right: 10px; border-right: 1px solid #DDD; font-size: 11px; }132footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }133.up .ir { display: block; background: url(../img/up.png) no-repeat center; width: 25px; height: 18px; text-align: center; margin: 0 auto; }134/*---------*/135.part ul{136 margin-bottom: 10px;137 font-size: 12px;138}139.about .content img { max-width: 100%; width: auto; height: auto; }140.detail { margin-top: 40px; padding-top: 20px; border-top: 1px solid #DDD; }141.servicess .detail:first-child { margin-top: 0 }142/* WORKS */143.work { width: 222px; overflow: hidden; float: left; display: block; height: 100%; margin-right: 30px; border-top: 1px solid #DDD; padding-top: 10px; }144 .work { position: relative }145 .work > a { display: block; width: 222px; height: 137px; overflow: hidden; }146 .work img { max-width: 100%; height: auto; width: auto; }147 .work .zoom { display: block; position: absolute; top: 10px; left: 0; background: url(../img/zoom.png) no-repeat center; width: 222px; height: 137px; }148 .works figcaption, .work figcaption { margin-top: 10px; padding: 0 5px; white-space: nowrap; }149 .works figcaption a, .work figcaption a { margin: 0 0 2px; color: #555; font-weight: bold; }150 .works figcaption p, .work figcaption p { margin: 0; }151.main .work:last-child { margin-right: 0 }152.works .content .work:nth-child(3n) { margin-right: 0 }153.works .content .work { margin-bottom: 40px; position: relative; }154.works menu a { cursor: pointer }155.buttonactive { font-weight: bold; color: #777 }156/* Work SINGLE */157.singlework figure {margin-bottom: 30px;}158.singlework figure figcaption {159 text-align: center}160.singlework img {161 max-width: 100%;162 height: auto;163 width: auto;164 display: block;165 margin-top: 0;166 margin-right: 0;167 margin-bottom: 0;168 margin-left: 0;169}170 171 172/*toggle*/173.toggle-view li { margin-bottom: 10px; position: relative; cursor: pointer; overflow: hidden; }174.toggle { padding: 7px 8px 7px 30px; margin: 0; border: 1px solid #ddd; text-shadow: 0 1px 0 #fff; background: #F3F3F3; background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); }175.toggle:hover { border-color: #BBB }176.tactive { color: #333; border-color: #CCC; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }177.t { display: none; padding: 10px; }178/*tabs*/179.tab_wrap { width: 306px }180.tabs { float: left; height: 30px; }181 .tabs li { float: left; margin: 0 5px 0 0; padding: 0; line-height: 30px; overflow: hidden; position: relative; background: #EAEAEA; }182 .tabs li a { text-decoration: none; color: #666; display: block; padding: 0 20px; }183 .tabs li a:hover { background: #FFF }184 .tabs li.active { background: #f5F5F5 }185.tab_container { overflow: hidden; clear: both; float: left; width: 100%; }186.tab_content { padding: 10px }187#tab2, #tab3 { display: none }188/*---------*/189.warning { display: block; line-height: 30px; background: #F3F3F3; border: 1px solid #DDD; text-align: center; padding: 10px; margin: 20px 5px; }190/* FORM */191form { margin-top: 30px }192 form label, .contact_ie9 label { display: block; margin-bottom: 10px; font-weight: bold; }193 form ul li, .contact_ie9 li { margin-bottom: 30px }194 form input, form textarea, .contact_ie9 input, .contact_ie9 textarea { width: 60%; height: 25px; line-height: 25px; padding: 5px; border: 1px solid #DDD; color: #999; }195 form input, .contact_ie9 input { padding-right: 20px }196 form textarea, .contact_ie9 textarea { height: 200px; width: 97%; }197 form button#submit, .contact_ie9 #submit { line-height: 18px }198/*html5/css3*/199input:required:valid { background: url(../img/valid.png) no-repeat 98% center }200input:invalid, textarea:invalid { }201input:focus, textarea:focus { outline: none; border: 1px solid #BBB; }202/* validate.js */203label.error { color: #D84A38; margin: 10px 0 0 5px; font-weight: normal; font-style: italic; }204.map { width: 222px; height: auto; overflow: hidden; }205 .map img { max-width: 100%; height: auto; width: auto; }206/*BUTTONS*/207.button { color: #666; font-weight: bold; text-decoration: none; line-height: 30px; padding: 7px 12px; margin: 0 5px 5px 0; text-shadow: 0 1px 0 #fff; border: solid 1px #dcdcdc; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; background: #F3F3F3; /* Old browsers */ background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* W3C */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }208.button:focus { color: #333; border-color: #BBB; }209.button:hover { color: #333; border-color: #BBB; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset,0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset,0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 1px 2px rgba(0, 0, 0, 0.2); }210.button:active { color: #000; background: #F5F5F5; border-color: #444; }211 212/* --- END STYLE --- */213/* ---------------------------------------- */214.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }215.ir br { display: none; }216.hidden { display: none !important; visibility: hidden; }217.clearfix:before, .clearfix:after { content: ""; display: table; }218.clearfix:after { clear: both; }219.clearfix { zoom: 1; }220 221/* Media Query & Print styles!222-------------------------------------------------------------------------------*/223/* Style adjustments for viewports 768px and over go here */224@media only screen and (max-width: 768px) { 225 body { min-width: 760px; font-size: 0.7em; }226 .center { width: 750px }227 h1 { font-size: 38px }228 h2 { font-size: 24px }229 h3 { font-size: 18px }230 h4 { font-size: 14px }231 h5 { font-size: 12px }232 h6 { font-size: 11px }233 .slides_container { width: 363px; height: 225px; }234 .slides_container .slide { width: 363px; height: 225px; }235 .work { width: 170px; margin-right: 23px; }236 .work > a { width: 170px; height: 105px; }237 .work .zoom { width: 170px; height: 105px; }238 .columnthird { min-width: 556px; }239 .map { width: 170px }240 footer li { margin-right: 5px; padding-right: 5px; font-size: 10px; }241 footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }242}243/* --- Smartphones and small Tablet PCs --- */244@media screen and (max-width:620px) { 245 body { min-width: 610px; font-size: 12px; }246 .center { width: 600px }247 .column2 { width: 100% }248 .columnthird { width: 100% }249 header nav ul:last-child { padding-right: 10px }250 #slides { margin-top: 40px }251 .slides_container { width: 600px; height: 370px; }252 .slides_container .slide { width: 600px; height: 370px; }253 .main .work, .works .work { width: 285px; margin-right: 0; }254 .main .work { margin-right: 0!important }255 .work > a { width: 285px; height: 175px; }256 .work .zoom { width: 285px; height: 175px; }257 aside.column4 { float: none; width: 100%; }258 aside menu { display: none }259 .works .work:nth-child(odd) { margin-right: 30px!important }260 .main .work:nth-child(even) { margin-right: 30px!important }261 .contact .content { border-top: 1px solid #DDD; padding-top: 20px; } 262 .map { display: none }263 footer li { border-right: none; line-height: 2; float: none; margin: 1px; padding: 1px; }264 footer nav li { text-align: right }265 footer li:last-child { margin-right: inherit; padding-right: inherit; }266}267/* target the iPhone4 retina display */268@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 269 body { min-width: 480px; font-size: 12px; }270 .center { width: 470px }271 .columnthird { width: 100% }272 header#navtop { background-position: 23px 0 }273 header nav ul:last-child { padding-right: 0 }274 #slides { margin-top: 40px }275 .slides_container { width: 470px; /**/height: 290px; }276 .slides_container .slide { width: 470px; /**/height: 290px; }277 .main .work, .works .work { width: 220px; margin-right: 0; }278 .main .work { margin-right: 0!important }279 .work > a { width: 220px; height: 130px; }280 .work .zoom { width: 220px; height: 130px; }281 .column3in { width: 50% }282 .column4in { width: 40% }283 .column2in { width: 56% }284}285/* Style adjustments for viewports 480px and over go here */286@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 287 body { min-width: 480px; font-size: 12px; }288 .center { width: 470px }289 .columnthird { width: 100% }290 header#navtop { background-position: 23px 0 }291 header nav ul:last-child { padding-right: 0 }292 #slides { margin-top: 40px }293 .slides_container { width: 470px; /**/height: 290px; }294 .slides_container .slide { width: 470px; /**/height: 290px; }295 .main .work, .works .work { width: 220px; margin-right: 0; }296 .main .work { margin-right: 0!important }297 .work > a { width: 220px; height: 130px; }298 .work .zoom { width: 220px; height: 130px; }299 .column3in { width: 50% }300 .column4in { width: 40% }301 .column2in { width: 56% }302}303@media print { 304 * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }305 pre, blockquote { page-break-inside: avoid }306 thead { display: table-header-group }307 tr, img { page-break-inside: avoid }308 img { max-width: 100% !important }309 p, h2, h3 { orphans: 3; widows: 3; }310 h2, h3 { page-break-after: avoid }311}312 </style>313 <meta charset="utf-8">314 <title>315 OLBN // Contact316 </title>317 <!-- Uncomment if you don't use the .htaccess -->318 <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -->319 <meta content="OLBN" name="description">320 <meta content="OLBN" name="author">321 <meta content="width=device-width" name="viewport">322 <!--[if lt IE 9]>323 324 <![endif]-->325 </head>326 <body>327 <header class="center clearfix" id="navtop">328 <a class="logo fleft">329 <img src="rick.jpg">330 </a>331 <nav class="fright">332 <ul>333 <li>334 <a>335 Home336 </a>337 </li>338 </ul>339 <ul>340 <li>341 <a>342 Firm343 </a>344 </li>345 </ul>346 <ul>347 <li>348 <a>349 Capabilities350 </a>351 </li>352 </ul>353 <ul>354 <li>355 <a>356 Projects357 </a>358 </li>359 </ul>360 <ul>361 <li>362 <a class="navactive">363 Contact364 </a>365 </li>366 </ul>367 </nav>368 </header>369 <div class="contact center part clearfix">370 <header class="title">371 <p class="fleft">372 </p>373 </header>374 <aside class="column4 mright">375 <p class="mbottom">376 We would love to talk with you and answer any questions you may have.377 </p>378 <address class="mbottom">379 <span class="strong">380 DC Office381 </span>382 <br>383 600 Jefferson Plaza384 <br>385 Suite 205386 <br>387 Rockville, Maryland 20852388 </address>389 <p class="mbottom">390 t: [PHONE REDACTED]391 <br>392 f: [PHONE REDACTED]393 </p>394 <ul>395 <li>396 General Information397 </li>398 <li>399 <a>400 [EMAIL REDACTED]401 </a>402 </li>403 <br>404 <li>405 Marketing Inquiries406 </li>407 <li>408 <a>409 [EMAIL REDACTED]410 </a>411 </li>412 <br>413 </ul>414 <p>415 </p>416 <!--div class="map mbottom"><a ><img src="rick.jpg" alt="map" ></a></div-->417 <p>418 <span class="strong">419 Business Hours:420 </span>421 <br>422 Monday thru Friday423 <br>424 8am to 5pm425 </p>426 </aside>427 <section class="columnthird content">428 <h2>429 Drop us a message430 </h2>431 <table>432 <tbody>433 <tr>434 <td width="485">435 <p class="more">436 </p>437 <form action="contact.php" class="contact_form" id="contact_form" method="post" name="contact_form" novalidate="novalidate">438 <ul class="contact_ie9">439 <li>440 <label for="name">441 Your name442 </label>443 <input class="required" id="name" name="name" required type="text">444 </li>445 <li>446 <label for="email">447 Email:448 </label>449 <input class="required email" id="email" name="email" required type="email">450 </li>451 <li>452 <label for="message">453 Message:454 </label>455 <textarea class="required" cols="40" id="message2" name="message2" required rows="6"></textarea>456 </li>457 <li>458 <button class="button fright" id="submit" type="submit">459 Send it460 </button>461 </li>462 </ul>463 </form>464 <p>465 </p>466 </td>467 <td align="right" width="245">468 <br>469 <br>470 <br>471 <a target="_blank">472 <img height="200" src="rick.jpg" width="225">473 </a>474 <br>475 <br>476 </td>477 </tr>478 </tbody>479 </table>480 </section>481 </div>482 <footer class="center part clearfix">483 <nav class="column6 mleft">484 <p align="right">485 <font size="-2px">486 Copyright © 2017 OLBN. All rights reserved.487 </font>488 </p>489 </nav>490 </footer>491 <!--[if (gte IE 6)&(lte IE 8)]>492 493<![endif]-->494 <!-- Prompt IE 6 users to install Chrome Frame. -->495 <!--[if lt IE 7 ]>496 497 498<![endif]-->499 </body>500</html>501