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 <title>5 Presidential Lakes Estates, NJ Sales Tax Rate6 </title>7 <meta content="The latest sales tax rate for Presidential Lakes Estates, NJ. This rate includes any state, county, city, and local sales taxes. 2020 rates included for use while preparing your income tax deduction." name="description">8 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">9 <meta content="width=device-width, minimum-scale=1.0, initial-scale=1.0" name="viewport">10 <style>11 @font-face {12 font-family: 'Enriqueta';13 font-style: normal;14 font-weight: 400;15 src: url(https://fonts.gstatic.com/s/enriqueta/v17/goksH6L7AUFrRvV44HVjTEqn.ttf) format('truetype');16}17 18 19 20html {21 color: #1c1c1c;22 font-family: 'Helvetica Neue', sans-serif;23}24 25html, body {26 margin: 0;27 padding: 0;28}29 30/* Desktop */31html {32 font-size: 16px;33 line-height: 24px;34}35 36@media (max-width: 767px) { /* mobile */37 html {38 font-size: 18px;39 line-height: 30px;40 }41}42 43@media print {44 body {45 margin: auto;46 padding: 1em;47 }48 .hidden-print {49 display: none !important;50 }51}52 53h1, h2 {54 font-family: 'Enriqueta', serif;55 font-weight: normal;56 margin: 0 0 24px;57}58 59h1 {60 font-size: 36px;61 line-height: 48px;62}63 64h2 {65 font-size: 24px;66 line-height: 32px;67}68 69p {70 margin: 0 0 24px;71}72 73a {74 color: #3F92C6;75 text-decoration: underline;76}77 78a:hover {79 color: #1c1c1c;80 text-decoration: underline;81}82 83hr { 84 display: block; 85 height: 1px;86 border: 0; 87 border-top: 1px solid #ccc;88 margin: 1em 0; 89 padding: 0; 90}91 92.pull-right {93 float: right;94}95 96.center { 97 text-align: center; 98}99 100.clickable {101 cursor: pointer;102}103 104.visible-inline-xs {105 display: none;106}107 108@media (max-width: 767px) {109 .hidden-xs {110 display: none !important;111 }112 .visible-inline-xs {113 display: inline;114 }115}116 117.break-after:after {118 content: '\000A';119 white-space: pre;120}121 122.container {123 max-width: 728px;124 margin: auto;125}126 127.nav {128 background: #3F92C6;129 color: white;130 padding: 12px;131}132 133.nav .logo {134 display: inline-block;135 vertical-align: middle;136 background-image: url(/sale-tax-logo-white.png);137 background-size: contain;138}139 140/* desktop */141.nav .logo {142 width: 183px;143 height: 48px;144}145 146@media (max-width: 767px) { /* mobile */147 .nav .logo {148 width: 122px;149 height: 32px;150 }151}152 153.nav a {154 color: white;155}156 157.nav a:hover {158 color: #E0E0E0;159}160 161.body {162 padding: 10px;163}164 165.rate-table {166 table-layout: fixed;167 border-collapse: collapse;168}169 170.rate-table th {171 background-color: #C1DBEC;172}173 174/* desktop */175.rate-table td, .rate-table th {176 height: 35px;177 padding: 0 1em 0 1em; 178}179 180@media (max-width: 767px) { /* mobile */181 .rate-table td, .rate-table th {182 height: 50px;183 padding: 0; 184 }185}186 187.rate-table tr:nth-child(odd) {188 background-color: #f0f0f0;189}190 191.rate-table .state {192 width: 300px;193}194 195.rate-table .city {196 width: 300px;197}198 199.rate-table .rate {200 width: 125px;201}202 203.footer {204 border-top: solid transparent 1px;205 padding: 12px;206 clear: both;207 text-align: center;208}209 210.disclaimer, .updated {211 color: #888;212 font-size: 80%;213 line-height: 1.5;214}215 216.links {217 font-weight: 200;218}219 220.links a {221 margin-left: 6px;222 margin-right: 6px;223}224 225/* desktop */226.search-box {227 width: 170px;228 height: 35px;229 line-height: 35px;230 text-align: right;231}232 233@media (max-width: 767px) { /* mobile */234 .search-box {235 width: auto;236 height: auto;237 line-height: 1;238 }239}240 241.search-box input[type="text"] {242 width: 90px;243}244 245@media (max-width: 767px) { /* mobile */246 .search-box input[type="text"] {247 width: 122px;248 }249}250 251.cse-search-box, .social-holder {252 display: inline-block;253 vertical-align: middle;254}255 256@media (max-width: 767px) { /* mobile */257 .cse-search-box input[type='text'] {258 font-size: 16px;259 height: 24px;260 }261}262 263.social-holder {264 padding-top: 9px;265}266 267.filter, .footer .links {268 line-height: 2;269}270 271.filter a {272 display: inline-block;273 text-align: center;274}275 276/* desktop */277.filter a {278 min-width: 15px;279}280 281@media (max-width: 767px) { /* mobile */282 .filter a {283 min-width: 18px;284 }285}286 287.zipCodes .extra {288 display: none;289}290 291.zipCodes-expanded .ellipsis, .zipCodes-expanded .more {292 display: none;293}294 295 296 297.breakdown-table {298 border-collapse: collapse;299 margin-bottom: 10px;300}301 302.breakdown-table th {303 color: #666;304}305 306.breakdown-table .rate {307 text-align: right;308}309 310.total > td {311 border-top: 1px solid #CCC;312 padding-top: 0.2em;313}314 315.local-rate-range-col {316 width: 145px;317}318 319.updated-col {320 width: 145px;321}322 323 324/* Calculator */325 326.calculator {327 display: inline-block;328 margin-bottom: 1em;329}330 331.calculator label, .calculator input {332 font-size: 1em;333}334 335 336.calculator input[type="submit"] {337 font-size: 1.1em;338}339 340/* Report page */341.longform > input, .longform > textarea { 342 display: block; 343 margin-bottom: 1em; 344 font-size: 16px;345} 346 347 348.longform > input[type="text"], .longform > textarea { 349 border: 1px solid #ccc;350}351 352.longform > label {353 font-weight: bold;354}355 356 357 358 359.top-ad, .bottom-ad { 360 width: 728px; height: 90px; 361}362 363.state-right-ad, .city-right-ad, .zip-right-ad, .table-right-ad {364 float: right;365 width: 300px;366 margin-left: 1em;367 margin-bottom: 1em;368}369 370.city-right-ad, .zip-right-ad, .table-right-ad {371 height: 250px;372}373 374.calculator-right-ad {375 display: inline-block !important;376 margin-bottom: 1.5em; 377 margin-left: 3em;378 width: 300px;379 height: 250px;380}381 382.table-right-ad {383 margin-bottom: 1.5em;384}385 386.city-right-ad, .zip-right-ad {387 margin-top: 1em;388}389 390@media (min-width: 767px) { /* desktop */391 .city-right-ad, .zip-right-ad, .calculator-right-ad {392 margin-right: 4em;393 }394}395 396@media (max-width: 480px) { /* mobile */397 .top-ad, .bottom-ad { 398 width: 300px; height: 250px; 399 /*width: 320px; height: 50px; */400 }401 402 .state-right-ad, .city-right-ad, .zip-right-ad, .table-right-ad, .calculator-right-ad {403 display: none !important;404 }405}406 </style>407 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">408 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">409 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">410 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">411 <meta content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">412 <meta content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">413 </head>414 <body>415 <div class="nav">416 <div class="container">417 <a class="logo">418 <!--img src="/sale-tax-logo-white-1x.png" width='122' height='32'-->419 </a>420 <span class="links hidden-xs">421 <a>422 NJ Rates423 </a>424 |425 <a>426 Calculator427 </a>428 |429 <a>430 Table431 </a>432 </span>433 <div class="search-box pull-right">434 <form action="" class="cse-search-box">435 <input name="cx" type="hidden" value="partner-pub-6702630163715074:[PHONE REDACTED]">436 <input name="ie" type="hidden" value="UTF-8">437 <input name="q" placeholder="Search" size="14" type="text">438 <input class="hidden-xs" name="sa" type="submit" value="Search">439 </form>440 </div>441 </div>442 </div>443 <div class="body container" style="height: auto !important;">444 <div itemscope itemtype="" style="height: auto !important;">445 <h1>446 <span itemprop="name">447 Presidential Lakes Estates448 </span>449 , NJ Sales Tax Rate450 </h1>451 <!-- B City Top Responsive -->452 <ins class="adsbygoogle top-ad" data-ad-client="ca-pub-6702630163715074" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display: block; height: 280px;">453 <div aria-label="Advertisement" id="aswift_0_host" style="border: none; height: 280px; width: 728px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: visible;" tabindex="0" title="Advertisement">454 </div>455 </ins>456 <p>457 The current 458total local sales tax rate in Presidential Lakes Estates, NJ 459is460 <a>461 6.625%462 </a>463 .464The December 2020 total local sales tax rate465was also466 <a>467 6.625%468 </a>469 .470 </p>471 <!-- B City Right Responsive -->472 <ins class="adsbygoogle city-right-ad" data-ad-client="ca-pub-6702630163715074" data-ad-format="rectangular" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display: block; width: 300px; height: 250px;">473 <div aria-label="Advertisement" id="aswift_1_host" style="border: none; height: 250px; width: 300px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;" tabindex="0" title="Advertisement">474 </div>475 </ins>476 <h2>477 Sales Tax Breakdown478 </h2>479 <cols>480 </cols>481 <table class="breakdown-table">482 <colgroup>483 <col width="170">484 <col width="90">485 </colgroup>486 <tbody>487 <tr>488 <th>489 District490 </th>491 <th>492 Rate493 </th>494 </tr>495 <tr>496 <td>497 <a>498 New Jersey State499 </a>500 </td>501 <td class="rate">502 6.625%503 </td>504 </tr>505 <tr>506 <td>507 <a>508 Burlington County509 </a>510 </td>511 <td class="rate">512 0.000%513 </td>514 </tr>515 <tr>516 <td>517 Presidential Lakes Estates518 </td>519 <td class="rate">520 0.000%521 </td>522 </tr>523 </tbody>524 </table>525 <p>526 </p>527 <h2>528 Presidential Lakes Estates Details529 </h2>530 Presidential Lakes Estates, NJ is in531 <a>532 Burlington County533 </a>534 .535 <p>536 </p>537 <!-- B City Bottom Responsive -->538 <ins class="adsbygoogle bottom-ad" data-ad-client="ca-pub-6702630163715074" data-ad-format="auto" data-ad-slot="[PHONE REDACTED]" data-adsbygoogle-status="done" style="display: block; height: 0px;">539 <div aria-label="Advertisement" id="aswift_2_host" style="border: none; height: 0px; width: 728px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: hidden; opacity: 0;" tabindex="0" title="Advertisement">540 </div>541 </ins>542 </div>543 </div>544 <div class="footer container">545 <p class="links">546 <a>547 US548 <span class="hidden-xs">549 Sales Tax550 </span>551 Rates552 </a>553 |554 <a>555 NJ Rates556 </a>557 |558 <a>559 <span class="hidden-xs">560 Sales Tax561 </span>562 Calculator563 </a>564 |565 <a>566 <span class="hidden-xs">567 Sales Tax568 </span>569 Table570 </a>571 </p>572 <p>573 </p>574 <p class="disclaimer">575 Sale-Tax.com strives to have the most accurate tax percentages available 576 but tax rates are subject to change at any time. Always consult your 577 local government tax offices for the latest official city, county, and578 state tax rates. 579 580 Help us make this site better by581 <a class="report">582 reporting errors583 </a>584 .585 </p>586 <p class="updated">587 Sale-Tax.com data last updated Thursday, April 1, 2021.588 589 Rates last changed: Monday, January 01 2018590 <br>591 Copyright © 2023 Sale-Tax.com592 </p>593 </div>594 <ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;">595 <div aria-label="Advertisement" id="aswift_3_host" style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;" tabindex="0" title="Advertisement">596 </div>597 </ins>598 </body>599</html>600