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 lang="en-US">3 <head>4 <style>5 /* fonts */6 7 @font-face 8 {9 font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal;10 src: url('fonts/fa-brands-400.woff2') format('woff2'), url('fonts/fa-brands-400.woff') format('woff');11 }12 .fab { font-family: 'Font Awesome 5 Brands'; }13 @font-face 14 {15 font-family: 'Font Awesome 5 Pro'; font-style: normal; font-weight: 900;16 src: url('fonts/fa-solid-900.woff2') format('woff2'), url('fonts/fa-solid-900.woff') format('woff');17 }18 .fa, .fas { font-family: 'Font Awesome 5 Pro'; font-weight: 900; }19 20 /* resets */21 22 * 23 { 24 box-sizing: border-box; border: none; outline: none; text-rendering: optimizeLegibility;25 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; 26 }27 html { height: 100%; -webkit-text-size-adjust: 100%; }28 body { margin: 0px; padding: 0px; color: #000000; background-color: #FFFFFF; }29 *:before, *:after { box-sizing: inherit; }30 .cf:before, .cf:after { content: " "; display: table; }31 .cf:after { clear: both; }32 table { border: 0; padding: 0; border-spacing: 0px; border-collapse: collapse; } 33 tr { text-align: left; }34 table.schedule tr:first-child td { border-top: 1px solid #CCCCCC; }35 table.schedule td { padding: 9px 15px 9px 0px; border-bottom: 1px solid #CCCCCC; }36 table.schedule td:first-child { white-space: nowrap; }37 table.schedule td:last-child { padding-right: 0px; }38 tr { vertical-align: top; }39 body.modal-open { overflow: hidden; position: fixed; } /* stop scroll when modal open */40 sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }41 sub { top: 0.4em; }42 43 /* fixed aspect ratio */44 45 .aspect::before { content: ''; padding-top: 100%; float: left; }46 .aspect::after { content: ''; display: block; clear: both; }47 48 /* type */49 50 body, input, textarea, select { font: 300 16px/23px 'Montserrat', sans-serif; }51 b { font-weight: 700; }52 p, h2, h3, h4, h5 { margin: 20px 0px; padding: 0px; }53 h2 { font: 700 32px/32px 'Montserrat', sans-serif; }54 h3 { font: 700 26px/30px 'Montserrat', sans-serif; }55 h4 { font: 500 20px/24px 'Montserrat', sans-serif; }56 h5 { font: 700 16px/20px 'Roboto Condensed', sans-serif; color: #E32C22; text-transform: uppercase; letter-spacing: 1px; }57 .date { font: 700 16px/20px 'Roboto Condensed', sans-serif; color: #000000; }58 .location { font: 500 13px/18px 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 1px; }59 dd { padding: 0px; margin: 20px 0px 20px 40px; }60 small, .small { font-size: 85%; line-height: 100%; }61 .placeholder { padding-bottom: 400px; }62 ul.loose li { margin-bottom: 10px; }63 64 /* links */65 66 a { color: #00B0B5; text-decoration: none; }67 a:hover { color: #E32C22; }68 .btn, a.btn, a.btn:visited 69 {70 color: #00B0B5; background-color: transparent; border: 1px solid #00B0B5; padding: 4px 10px 3px 10px;71 font: 700 16px/16px 'Roboto Condensed', sans-serif; cursor: pointer;72 text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;73 }74 .btn:hover, a.btn:hover { color: #FFFFFF; background-color: #E32C22; border-color: #E32C22; }75 76 /* badge */77 78 #pmd { display: block; position: fixed; top: 0px; left: 0px; width: 260px; padding: 38px 50px; background-color: #FFFFFF; }79 #pmd .badge 80 { 81 display: block; width: 100%; height: 0; padding-top: 100%; 82 background: transparent url('images/pmd-cpa.svg') top center no-repeat; background-size: contain;83 }84 85 /* images */86 87 img { border: 0px; }88 img.photo, img.right { width: 100%; height: auto; }89 img.right { float: right; width: 33%; max-width: 500px; margin: 0px 0px 30px 30px; }90 img.logo { height: 75px; width: auto; display: inline-block; margin: 0px 40px 0px 0px; }91 .footer img.logo { height: 70px; margin-bottom: 20px; }92 .footer img.logo.westphal { height: 80px; margin-bottom: 10px; }93 .footer a:hover img.logo { opacity: 0.8; }94 img.hero { width: 100%; height: auto; display: block; margin: 0px 0px 30px 0px; }95 96 /* menu */97 98 #nav 99 { 100 position: fixed; top: 0px; right: 0px; left: 260px; display: flex; z-index: 100;101 justify-content: space-between; align-items: center;102 background-color: #00B0B5; padding: 0px 12px; font: 700 18px/18px 'Roboto Condensed', sans-serif; 103 }104 #nav a { color: #FFFFFF; display: inline-block; padding: 10px 8px; }105 #nav a:hover { color: #000000; }106 #nav ul { list-style-type: none; margin: 0px; padding: 0px; }107 #nav ul li { display: inline-block; text-transform: lowercase; }108 #nav ul li .fab { font-weight: normal; }109 110 /* main menu */111 112 #nav ul.menu > li > ul 113 { 114 position: absolute; display: none; list-style-type: none; margin: 0px; padding: 8px 0px 8px 0px;115 z-index: 12; background-color: #007649; float: none;116 }117 #nav ul.menu > li:hover > ul { display: block; -webkit-animation: slidein 0.1s ease-in 1; }118 #nav ul.menu > li > ul > li { float: none; margin: 0px; padding: 0px; display: block; } 119 #nav ul.menu > li > ul > li > a 120 { 121 display: block; padding: 3px 15px 3px 10px; font-size: 90%; line-height: 100%; 122 text-transform: lowercase;123 } 124 #nav ul.menu > li > ul > li > a:hover { color: rgba(255,255,255,0.7); }125 @-webkit-keyframes slidein { 0% { margin-top: -10px; opacity: 0; } 100% { margin-top: 0px; opacity: 1; } }126 127 /* mobile nav modal */128 129 #modal 130 { 131 position: fixed; top: 0px; right: 0px; left: 0px; height: 100%; z-index: 200; display: none; 132 color: #FFFFFF; background-color: #00B0B5; 133 }134 #modal ul.menu 135 { 136 font-size: 5vh; line-height: 3vh; margin: 0px; padding: 0px 0px 0px 28px; list-style-type: none; 137 text-transform: lowercase; 138 }139 #modal ul.menu ul { display: none; }140 #modal .closemodal { text-align: right; font-size: 24px; cursor: pointer; }141 #modal a, #modal .closemodal { color: #FFFFFF; display: block; padding: 12px; }142 #modal a:hover, #modal .closemodal:hover { color: #000000; }143 144 /* content areas */145 146 .content { margin: 120px 50px 50px 260px; }147 .footer { color: #CCCCCC; background-color: #000000; padding: 30px 50px; font-size: 90%; }148 .footer.prefix { padding-bottom: 0px; margin-bottom: 0px; }149 .content a, .footer a { font-weight: 500; }150 151 /* columns */152 153 .columnar { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; margin-right: -50px; }154 .columnar > div { margin: 0px 50px 30px 0px; }155 156 /* tiles */157 158 .tiles { display: flex; flex-wrap: wrap; align-items: stretch; align-content: flex-start; }159 .tile 160 { 161 width: 24%; position: relative; background-color: #EFEFEF; margin: 0 1% 1vh 0; 162 background-position: center center; background-repeat: no-repeat; background-size: cover;163 }164 .tile::before { content: ''; padding-top: 100%; float: left; }165 .tile::after { content: ''; display: block; clear: both; }166 .tile .caption 167 { 168 position: absolute; bottom: 0px; left: 0px; padding: 4px 8px; color: #FFFFFF; background-color: rgba(0,0,0,0.6); 169 display: inline-block;170 }171 .tile:hover .caption { background-color: #E32C22; }172 173 /* video */174 175 .video-container { overflow: hidden; height: 0; padding-bottom: 56.25%; position: relative; margin-bottom: 30px; }176 .video-container iframe { position:absolute; left: 0; top: 0; height: 100%; width: 100%; }177 178 /* home page variants */179 180 body.home #nav { left: 0px; padding-left: 90px; }181 body.home #csv-cpa { width: 100%; height: auto; }182 body.home .footer { padding-left: 100px; }183 .zone { display: flex; justify-content: space-between; align-items: stretch; width: 100%; }184 .zone .primary { width: 50%; padding: 100px; }185 .zone .secondary { width: 50%; min-height: 100vh; }186 #zone-welcome .primary { align-self: center; }187 #zone-welcome .primary p { margin-left: 4.44%; margin-top: 40px; font-size: 110%; line-height: 125%; }188 #zone-welcome .secondary { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; }189 #zone-welcome .secondary .poster 190 { 191 background: #BCE2D7 url('images/zone1.jpg') center center no-repeat; background-size: cover; 192 flex-basis: 98%; flex-shrink: 1;193 }194 @media screen and (orientation:portrait) { #zone-welcome .secondary .poster { background-position: right center; } }195 #zone-welcome .secondary .linkage196 {197 display: flex; justify-content: space-between; align-items: stretch; flex-shrink: 1;198 } 199 #zone-welcome .secondary .linkage a:first-child { background: #EA308F url('images/link-enticed.jpg') center center no-repeat; background-size: 0px 0px; }200 #zone-welcome .secondary .linkage a:last-child { background: #F47E2D url('images/link-engaged.jpg') center center no-repeat; background-size: 0px 0px; }201 #zone-welcome .secondary .linkage a { flex-basis: 50%; padding: 30px; color: #FFFFFF; }202 #zone-welcome .secondary .linkage a:hover { background-size: cover; }203 #zone-welcome .secondary .linkage a .label { font-size: 2.5vw; line-height: 2.5vw; }204 #zone-welcome .secondary .linkage a .date { margin: 10px 0px; }205 #zone-welcome .secondary .linkage a .control { text-align: right; padding-bottom: 30px; font-size: 18px; line-height: 18px; }206 #zone-welcome .secondary .linkage a:hover .control { color: #000000; }207 208 #zone-fringe 209 { 210 background: #000000 url('images/zone2.jpg') left top no-repeat; background-size: cover; background-attachment: fixed; 211 }212 #zone-fringe .primary { color: #FFFFFF; background-color: rgba(0,0,0,0.65); }213 #zone-fringe .primary h5 { color: #EA308F; }214 #zone-barnes 215 { 216 background: #FFFFFF url('images/zone3a.jpg') right center no-repeat; background-size: cover; background-attachment: fixed; 217 }218 #zone-barnes .primary { background-color: rgba(255,255,255,0.85); }219 #zone-barnes .primary h5 { color: #f47e2d; }220 #zone-barnes .primary .photo { max-width: 500px; margin: 0px 0px 30px 0px; }221 222 /* scroll-to-top control */223 224 a#totop225 { 226 position: fixed; width: 100px; height: 100px; bottom: 0px; left: 50%; margin-left: -50px; margin-bottom: -55px; 227 z-index: 25; text-align: center; color: #FFFFFF; background-color: #00B0B5; border-radius: 50px; display: none; 228 font-size: 34px; line-height: 48px; z-index: 150;229 }230 a#totop:hover { color: #FFFFFF; background-color: #E32C22; }231 232 /* large desktop */233 234 @media screen and (min-width: 1800px)235 {236 body, input, textarea, select { font-size: 125%; line-height: 150%; }237 #zone-welcome .primary p { font-size: 150%; line-height: 150%; }238 .date, h5 { font-size: 22px; line-height: 28px; }239 h2 { font-size: 40px; line-height: 40px; }240 h4 { font-size: 26px; line-height: 32px; }241 }242 243 /* standard desktop + tablet landscape */244 245 @media screen and (max-width: 1200px)246 {247 body.home #nav { padding-left: 50px; }248 body.home .footer { padding-left: 60px; }249 .zone .primary { padding: 80px 60px 60px 60px; }250 }251 252 /* tablet portrait (avg 768) */253 254 @media screen and (max-width: 990px)255 {256 #nav { left: 90px; justify-content: flex-end; }257 #nav .menu { display: none; }258 .content { margin-left: 90px; margin-right: 25px; }259 #pmd { width: 90px; padding: 40px 35px; }260 #pmd .badge { padding-top: 350%; background-image: url('images/pmd.svg'); }261 #zone-welcome .secondary .linkage a { padding: 20px; }262 #zone-welcome .secondary .linkage a .control { padding-bottom: 20px; }263 .footer { padding: 30px 35px; }264 .tile { width: 32%; }265 }266 267 /* mobile only */268 269 @media screen and (min-width: 991px) 270 { 271 #nav ul li.mobileonly { display: none; } 272 }273 274 /* home layout switch */275 276 @media screen and (max-width: 750px)277 { 278 #zone-welcome .primary p { color: #000000; font-size: 100%; line-height: 125%; }279 #zone-welcome .secondary .linkage a .label { font-weight: 500; }280 #zone-fringe .secondary, #zone-barnes .secondary { display: none; }281 #zone-fringe .primary, #zone-barnes .primary { width: 100%; }282 .footer, body.home .footer { padding-bottom: 60px; }283 .footer.prefix, body.home .footer.prefix { padding-bottom: 0px; }284 }285 286 /* phone (avg 360) */287 288 @media screen and (max-width: 600px)289 {290 #nav { left: 40px; }291 .content { margin-left: 40px; margin-top: 80px; }292 #pmd { width: 40px; height: 29px; padding: 0px; }293 #pmd .badge { background-position: center 6px; background-size: auto 29px; padding: 0px; width: 100%; height: 60px; }294 h2 { font-size: 24px; line-height: 24px; }295 .footer, body.home .footer { padding-left: 40px; }296 297 img.photo, img.right { width: 50%; height: auto; }298 img.right { float: none; max-width: 50%; margin: 0px 0px 20px 0px; }299 300 .tile { width: 48%; margin: 0% 2% 2% 0%; }301 302 .zone .primary { padding: 60px 40px 40px 40px; }303 #zone-welcome { flex-wrap: wrap; }304 #zone-welcome .primary { padding-top: 80px; }305 #zone-welcome .primary, #zone-welcome .secondary { width: 100%; }306 #zone-welcome .secondary { background-color: #EFEFEF; }307 #zone-welcome .secondary .linkage a .label { font-size: 4vw; line-height: 4vw; font-weight: 700; }308 #zone-barnes .primary .photo { width: 100%; max-width: 100%; }309 } 310 311 /* print */312 313 @media print314 {315 #nav, #pmd, .footer .logo, a#totop { display: none; }316 .footer, body.home .footer 317 { 318 color: #999999; background-color: #FFFFFF; margin: 30px 0px 0px 0px; padding: 20px 0px 0px 0px; border-top: 1px solid #CCCCCC;319 }320 .content { margin: 0px; }321 a#totop { color: transparent; background-color: transparent; width: 1; height: 1; overflow: hidden; }322 }323 </style>324 <meta charset="utf-8">325 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">326 <meta content="width=device-width, initial-scale=1" name="viewport">327 <title>328 Philadelphia Museum of Dance – Schedule329 </title>330 </head>331 <body class="schedule">332 <a id="top" name="#top">333 </a>334 <div id="nav">335 <ul class="menu">336 <li>337 <a>338 Schedule339 </a>340 </li>341 <li>342 <a>343 The Artists344 </a>345 <ul>346 <li>347 <a>348 Boris Charmatz349 </a>350 </li>351 <li>352 <a>353 Valerie Amiss354 </a>355 </li>356 <li>357 <a>358 Rebecca Arends359 </a>360 </li>361 <li>362 <a>363 Lori Belilove &364 <nobr>365 Isadora Duncan366 </nobr>367 </a>368 </li>369 </ul>370 </li>371 <li>372 <a>373 The Curators374 </a>375 <ul>376 <li>377 <a>378 Boris Charmatz379 </a>380 </li>381 <li>382 <a>383 Dr. Miriam Giguere384 </a>385 </li>386 <li>387 <a>388 Lois Welk389 </a>390 </li>391 <li>392 <a>393 Simon Dove394 </a>395 </li>396 </ul>397 </li>398 <li>399 <a>400 Press401 </a>402 </li>403 </ul>404 <ul class="social">405 <li>406 <a class="fab" target="_blank" title="instagram">407 <i class="fab fa-instagram">408 </i>409 </a>410 </li>411 <li>412 <a class="fab" target="_blank" title="facebook">413 <i class="fab fa-facebook-f">414 </i>415 </a>416 </li>417 <li>418 <a class="fab" target="_blank" title="twitter">419 <i class="fab fa-twitter">420 </i>421 </a>422 </li>423 <li>424 <a class="fas" target="_blank" title="mailing list">425 <i class="fas fa-envelope">426 </i>427 </a>428 </li>429 </ul>430 </div>431 <a id="pmd">432 <div class="badge">433 </div>434 </a>435 <div class="content">436 <h2>437 Schedule438 </h2>439 <br>440 <h3>441 <i>442 manger443 </i>444 by Boris Charmatz445 </h3>446 <h5>447 September 22-23, 2018 · 8–9 PM448 </h5>449 <p>450 FringeArts451 <br>452 140 N Columbus Blvd (at Race St)453 <br>454 Philadelphia, PA 19106455 </p>456 <br>457 <h3>458 Philadelphia Museum of Dance459 </h3>460 <h5>461 October 6, 2018 · 3–9 PM462 </h5>463 <p>464 Barnes Foundation465 <br>466 2025 Benjamin Franklin Parkway467 <br>468 Philadelphia, PA 19130469 <br>470 [PHONE REDACTED]471 </p>472 <p>473 FREE EVENT · Just walk up. Stop by for an hour or stay for all six.474 </p>475 <h4>476 Schedule477 </h4>478 <table class="schedule">479 <tbody>480 <tr>481 <td class="date">482 3–4 pm483 </td>484 <td>485 <b>486 <a>487 Public warm-up led by Boris Charmatz and Romain Bigé488 </a>489 </b>490 <br>491 <span class="location">492 West Terrace, Main Floor493 </span>494 <br>495 Join In—the audience is invited to participate496 </td>497 </tr>498 <tr>499 <td class="date">500 4–4:30 pm501 </td>502 <td>503 <b>504 <a>505 A medley of choreographed and freestyle pieces by It’s Showtime NYC!506 </a>507 </b>508 <br>509 <span class="location">510 West Terrace, Main Floor511 </span>512 </td>513 </tr>514 <tr>515 <td>516 </td>517 <td>518 <b>519 <a>520 STAGED? (2016) _521 <i>522 undressed523 </i>524 by Maria Hassabi525 </a>526 </b>527 <br>528 <span class="location">529 Main Entrance, outside530 </span>531 </td>532 </tr>533 <tr>534 <td class="date">535 4:30–4:45 pm536 </td>537 <td>538 <b>539 <a>540 <i>541 1973,542 </i>543 a collective dance proposed by Boris Charmatz, 544 performed by local college students545 </a>546 </b>547 <br>548 <span class="location">549 Annenberg Court, Main Floor550 </span>551 </td>552 </tr>553 </tbody>554 </table>555 <h4>556 Rain or Shine557 </h4>558 <p>559 Philadelphia Museum of Dance will take place rain or shine. Outside performance locations for the Solo Forest 560 may be inside if it rains.561 </p>562 <h4>563 Times to Remember564 </h4>565 <p>566 <span class="date">567 5 pm568 </span>569 · Barnes collection and parking lot close570 <br>571 <span class="date">572 9 pm573 </span>574 · Event ends and building closes575 </p>576 </div>577 <div class="footer">578 <a target="_blank">579 <img class="logo" src="rick.jpg">580 </a>581 <a target="_blank">582 <img class="logo westphal" src="rick.jpg">583 </a>584 <a target="_blank">585 <img class="logo" src="rick.jpg">586 </a>587 <a target="_blank">588 <img class="logo" src="rick.jpg">589 </a>590 <br>591 Support for Philadelphia Museum of Dance has been provided to Westphal College of Media Arts & Design by592 <a target="_blank">593 The Pew Center for Arts & Heritage594 </a>595 . Philadelphia Museum of Dance 596 is produced in partnership with the Barnes Foundation. Performances of597 <i>598 manger599 </i>600 are presented in partnership 601 with FringeArts.602 <br>603 <br>604 Copyright © 2023,605 <a target="_blank">606 Westphal College of Media Arts & Design607 </a>608 ,609 <nobr>610 <a target="_blank">611 Drexel University612 </a>613 .614 </nobr>615 <nobr>616 All rights reserved.617 </nobr>618 <br>619 Contact: 620 <a>621 <i class="fas fa-mobile-alt">622 </i>623 [PHONE REDACTED]624 </a>625 626 <nobr>627 <a>628 <i class="fas fa-envelope">629 </i>630 [EMAIL REDACTED]631 </a>632 </nobr>633 <br>634 Website developed by635 <a target="_blank">636 Zero Defect Design637 </a>638 .639 </div>640 <!-- Start of DoubleClick Floodlight Tag: Please do not remove -->641 <noscript>642 </noscript>643 <!-- End of DoubleClick Floodlight Tag: Please do not remove -->644 <div id="modal">645 <div class="closemodal">646 <i class="fas fa-times-circle">647 </i>648 </div>649 <ul class="menu">650 <li>651 <a>652 home653 </a>654 </li>655 <li>656 <a>657 Schedule658 </a>659 </li>660 <li>661 <a>662 The Artists663 </a>664 <ul>665 <li>666 <a>667 Boris Charmatz668 </a>669 </li>670 <li>671 <a>672 Valerie Amiss673 </a>674 </li>675 <li>676 <a>677 Rebecca Arends678 </a>679 </li>680 <li>681 <a>682 Lori Belilove &683 <nobr>684 Isadora Duncan685 </nobr>686 </a>687 </li>688 </ul>689 </li>690 <li>691 <a>692 The Curators693 </a>694 <ul>695 <li>696 <a>697 Boris Charmatz698 </a>699 </li>700 <li>701 <a>702 Dr. Miriam Giguere703 </a>704 </li>705 <li>706 <a>707 Lois Welk708 </a>709 </li>710 <li>711 <a>712 Simon Dove713 </a>714 </li>715 </ul>716 </li>717 </ul>718 </div>719 <a id="totop">720 <i class="fas fa-arrow-up">721 </i>722 </a>723 </body>724</html>725