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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">2<html xmlns="">3 <head>4 <style>5 @charset "utf-8";6body {7 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */8 padding: 0;9 text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */10 color: #000000;11 background-color: #EFEFEF;12 font-family: Arial, Helvetica, sans-serif;13 font-size: 12px;14 background-image: url(../images/header-background.jpg);15 background-repeat: repeat-x;16 background-position: top;17 height: 100%;18}19h1, h2, h3, h4, h5, p {20 padding: 0px;21 margin: 0px;22 23}24h1 {25 margin-bottom: 10px;26 font-family: "Trebuchet MS", Arial, Verdana, sans-serif;27 font-size: 29px;28 font-weight: normal;29 color: #666666;30}31 32a {33 color: #FF9900;34 font-weight: bold;35}36a:hover {37 color: #666666;38}39 40img {41 border: none;42}43 44#container {45 width: 780px;46 margin: 0 auto;47 text-align: left; /* this overrides the text-align: center on the body element. */48}49#header {50 height: 122px;51 margin-bottom: 20px;52}53#logo {54 height: 70px;55 text-align: right;56 color: #999999;57 padding-top: 10px;58}59#logo a {60 color: #CCCCCC;61 text-decoration: none;62}63#logo a:hover {64 text-decoration: underline;65 color: #FFFFFF;66}67#logo p {68 margin-top: 0px;69 font-size: 10px;70 font-weight: bold;71 font-family: Verdana, Arial, Helvetica, sans-serif;72 margin-right: 10px;73}74 75#logo img {76 float: left;77}78.phone {79 font-size: 23px;80 font-weight: normal;81 font-family: Georgia, "Times New Roman", Times, serif;82 line-height: 40px;83}84 85 86#mainContent {87 padding-top: 13px;88 padding-right: 0px;89 padding-bottom: 0;90 padding-left: 0px;91 margin-top: 20px;92 background-image: url(../images/content-top.gif);93 background-repeat: no-repeat;94 background-position: center top;95 margin-bottom: 20px;96}97 98#mainContent p {99 line-height: 18px;100 padding-bottom: 20px;101}102#mainContent h1 {103 margin-bottom: 10px;104 font-family: "Trebuchet MS", Arial, Verdana, sans-serif;105 font-size: 29px;106 font-weight: normal;107 color: #666666;108}109#mainContent h2 {110 margin-bottom: 10px;111 font-family: Arial, Helvetica, sans-serif;112 font-size: 18px;113 font-weight: bold;114 color: #666666;115}116#mainContent h3 {117 font-size: 14px;118 color: #FF9900;119 padding-bottom: 10px;120}121 122 123#mainContent .contentbox {124 background-image: url(../images/content-fill.gif);125 background-repeat: repeat-y;126 background-position: center;127 padding-right: 15px;128 padding-left: 15px;129}130#mainContent .contentbtm {131 background-image: url(../images/content-bottom.gif);132 background-repeat: no-repeat;133 background-position: center top;134 height: 13px;135}136#mainContent blockquote {137 border-top-width: 2px;138 border-bottom-width: 2px;139 border-top-style: solid;140 border-bottom-style: solid;141 border-top-color: #E9E9E9;142 border-bottom-color: #E9E9E9;143 margin: 20px;144 padding-top: 0px;145 padding-right: 10px;146 padding-bottom: 0px;147 padding-left: 10px;148}149#sidebar {150 padding-left: 15px;151 border-left-width: 1px;152 border-left-style: solid;153 border-left-color: #E9E9E9;154 margin-top: 10px;155}156#sidebar form {157 margin-left: 10px;158}159#sidebar input {160 margin-bottom: 5px;161 background-image: url(../images/forminputbackground.jpg);162 background-repeat: repeat-x;163 background-position: top;164}165#sidebar #submit {166 background-color: #FFFFFF;167 background-image: url(../images/submitbutton.jpg);168 border: 1px solid #999999;169 background-repeat: repeat-x;170 background-position: center;171 font-family: Verdana, Arial, Helvetica, sans-serif;172 font-size: 13px;173 font-weight: bold;174}175 176ul {177 margin-left: 0px;178 padding-left: 10px;179 margin-top: 10px;180 list-style-type: none;181}182li {183 background-image: url(../images/listdot.gif);184 background-repeat: no-repeat;185 background-position: left top;186 padding-left: 12px;187 padding-bottom: 5px;188}189 190 191.arrow {192 background-image: url(../images/arrow.gif);193 background-repeat: no-repeat;194 background-position: left center;195 padding-left: 20px;196 font-family: Verdana, Arial, Helvetica, sans-serif;197 font-size: 10px;198 font-weight: bold;199 line-height: 15px;200}201#twocol {202 padding-top: 13px;203 padding-right: 0px;204 padding-bottom: 0px;205 padding-left: 0px;206 background-image: url(../images/content-top.gif);207 background-repeat: no-repeat;208 background-position: center top;209 margin-bottom: 20px;210}211#twocol p {212 font-size: 11px;213 color: #666666;214 padding-right: 10px;215 padding-bottom: 7px;216}217#twocol h3 {218 font-size: 14px;219 font-weight: normal;220 color: #999999;221 padding-bottom: 10px;222}223#twocol strong {224 color: #666666;225}226#twocol .contentbox {227 background-image: url(../images/2colfill.gif);228 background-repeat: repeat-y;229 background-position: center;230 padding-right: 0px;231 padding-left: 0px;232}233#twocol .contentbtm {234 background-image: url(../images/content-bottom.gif);235 background-repeat: no-repeat;236 background-position: center bottom;237 height: 13px;238}239#twocol .contentboxp {240 width: 358px;241 padding-left: 17px;242 font-size: 11px;243 color: #666666;244 padding-right: 5px;245}246#threecol {247 padding-top: 13px;248 padding-right: 0px;249 padding-bottom: 0px;250 padding-left: 0px;251 background-image: url(../images/content-top.gif);252 background-repeat: no-repeat;253 background-position: center top;254 margin-bottom: 20px;255}256 257#threecol p {258 font-size: 11px;259 color: #666666;260 padding-right: 10px;261 padding-bottom: 7px;262}263#threecol h3 {264 font-size: 14px;265 font-weight: normal;266 color: #999999;267 padding-bottom: 10px;268}269#threecol strong {270 color: #666666;271}272 273 274 275#threecol .contentbox {276 background-image: url(../images/3colfill.gif);277 background-repeat: repeat-y;278 background-position: center;279 padding-right: 0px;280 padding-left: 0px;281}282#threecol .contentbtm {283 background-image: url(../images/content-bottom.gif);284 background-repeat: no-repeat;285 background-position: center bottom;286 height: 13px;287}288#threecol .contentboxp {289 width: 228px;290 padding-left: 17px;291 font-size: 11px;292 color: #666666;293 padding-right: 5px;294}295/* End hide from IE-mac */296#fourcol {297 padding-top: 13px;298 padding-right: 0px;299 padding-bottom: 0;300 padding-left: 0px;301 background-image: url(../images/content-top.gif);302 background-repeat: no-repeat;303 background-position: center top;304 margin-bottom: 20px;305}306#fourcol p {307 font-size: 11px;308 color: #666666;309 padding-right: 10px;310 padding-bottom: 7px;311}312#fourcol h3 {313 font-size: 14px;314 font-weight: normal;315 color: #999999;316 padding-bottom: 10px;317}318#fourcol .contentbox {319 background-image: url(../images/4colfill.gif);320 background-repeat: repeat-y;321 background-position: center;322 padding-right: 0px;323 padding-left: 0px;324}325#fourcol .contentbtm {326 background-image: url(../images/content-bottom.gif);327 background-repeat: no-repeat;328 background-position: center bottom;329 height: 13px;330}331 332#fourcol .contentboxp {333 width: 165px;334 padding-left: 17px;335 font-size: 11px;336 color: #666666;337 padding-right: 5px;338}339.productwide {340 margin-right: 25px;341 margin-left: 25px;342 padding-bottom: 15px;343}344.productwide img {345 margin-right: 10px;346}347.productwide h3 {348 font-size: 16px;349 padding-bottom: 8px;350}351.productwide strong {352 color: #666666;353}354.productwide p {355 padding-top: 10px;356 padding-bottom: 10px;357}358.productwide td {359 border-bottom-width: 1px;360 border-bottom-style: solid;361 border-bottom-color: #CCCCCC;362}363.google728 {364 height: 90px;365 width: 728px;366 margin-top: 15px;367 margin-bottom: 15px;368 margin-left: 26px;369}370.google468 {371 height: 60px;372 width: 468px;373 margin-bottom: 15px;374 margin-left: 25px;375 margin-top: 0px;376}377 378 379 380 381 382 383 384 385 386 387 388 389 390#footer {391 height: 260px;392 margin-top: 20px;393 background-color: #333333;394 background-image: url(../images/footer-fill.jpg);395 background-repeat: repeat-x;396 background-position: top;397 clear: both;398}399#footer a {400 color: #999999;401 font-weight: bold;402}403#footer a:hover {404 color: #CCCCCC;405}406 407#footerwrap {408 width: 780px;409 margin-right: auto;410 margin-left: auto;411 text-align: center;412}413#footertop {414 background-image: url(../images/footer-top.jpg);415 background-repeat: no-repeat;416 background-position: center bottom;417 height: 28px;418 width: 780px;419}420 421#footercontent {422 color: #CCCCCC;423 text-align: left;424 padding-left: 20px;425 padding-top: 0px;426 background-color: #252525;427 font-size: 12px;428 margin-top: 0px;429}430#footercontent strong {431 display: block;432 padding-bottom: 5px;433 background-image: url(../images/dot.gif);434 background-repeat: repeat-x;435 background-position: bottom;436 padding-left: 8px;437}438#footercontent ul {439 margin-top: 10px;440 padding-left: 20px;441 margin-left: 0px;442}443#footercontent li {444 color: #999999;445}446#footerbtm {447 background-image: url(../images/footer-btm.gif);448 background-repeat: no-repeat;449 background-position: center top;450 height: 10px;451 width: 780px;452}453 454.copyright {455 font-family: Verdana, Arial, Helvetica, sans-serif;456 font-size: 10px;457 font-weight: bold;458 color: #999999;459 text-align: center;460 background-image: url(http://www.justdreamweaver.com/templates/link/spacer.gif);461 background-repeat: no-repeat;462}463#about {464 font-size: 9px;465 color: #666666;466 text-align: center;467 margin-top: 10px;468}469#about a {470 color: #666666;471}472 473 474 475 476 477 478 479 480.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */481 float: right;482 margin-left: 15px;483 margin-bottom: 5px;484}485.fltlft { /* this class can be used to float an element left in your page */486 float: left;487 margin-right: 12px;488 margin-bottom: 5px;489}490.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */491 clear:both;492 height:0;493 font-size: 1px;494 line-height: 0px;495}496.clearfix:after {497 content: ".";498 display: block;499 height: 0;500 clear: both;501 visibility: hidden;502}503 504.clearfix {display: inline-block;}505 506/* Hides from IE-mac \*/507* html .clearfix {height: 1%;}508.clearfix {display: block;}509#pagetitle {510 font-family: "Trebuchet MS", Arial, Verdana, sans-serif;511 font-size: 29px;512 font-weight: normal;513 color: #666666;514 padding-top: 8px;515 padding-right: 0px;516 padding-bottom: 0;517 padding-left: 120px;518 margin-top: 20px;519 background-image: url(../images/pagetitle.jpg);520 background-repeat: no-repeat;521 background-position: center bottom;522 margin-bottom: 20px;523 height: 51px;524 width: 660px;525}526 527 528 529@charset "utf-8";530/* CSS Document */531 532 533.jdmenu {534 font: bold 12px Arial;535 width: 100%;536 margin: 0;537 padding: 0;538 list-style: none;539 background-image: url(../images/menur_bg.jpg);540 background-repeat: repeat-x;541 background-position: center bottom;542}543 544.jdmenu li{545 float: left;546 display: inline;547 background-image: none;548 margin: 0px;549 padding: 0px;550}551 552.jdmenu li a{553 float: left;554 color: #000000;555 text-decoration: none;556 display: block;557 height: 42px;558 line-height: 42px;559 padding-right: 11px;560 padding-left: 11px;561 border-right-width: 1px;562 border-right-style: none;563 border-right-color: #666666;564}565 566.jdmenu li a:visited{567 color: #000000;568}569 570.jdmenu li a:hover, .jdmenu ul li .current{571 color: #FFFFFF !important;572 background-image: url(../images/indentbg2.jpg);573 background-repeat: repeat-x;574 background-position: center bottom;575}576 </style>577 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">578 <title>579 Battery Supply Co, APC Back-UPS BE350 Battery, BE350C RBC 35580 </title>581 <style type="text/css">582 .style1 {583 text-align: center;584}585.style2 {586 font-weight: bold;587}588.style3 {589 color: #CCCCCC;590}591.style4 {592 color: #000000;593}594.style5 {595 color: #FF0000;596}597 </style>598 </head>599 <body>600 <img border="0" height="1" src="rick.jpg" width="1">601 <div id="container">602 <div id="header">603 <div id="logo">604 <sub>605 <a>606 <img alt="Logo" height="57" src="rick.jpg" width="340">607 </a>608 </sub>609 <p class="style1">610 [PHONE REDACTED] |611 <a>612 C613 <span class="style3">614 ontact Us615 </span>616 </a>617 <img alt height="120" src="rick.jpg" style="float: right" width="137">618 </p>619 <div class="style1">620 </div>621 <p>622 </p>623 </div>624 <div id="navigation">625 <ul class="jdmenu">626 <li>627 <a>628 <b>629 Home630 </b>631 </a>632 </li>633 <li>634 <a>635 <b>636 Guarantee637 </b>638 </a>639 </li>640 <li>641 <a>642 <b>643 Privacy Policy644 </b>645 </a>646 </li>647 <li>648 <a>649 <b>650 Terms of Sale651 </b>652 </a>653 </li>654 </ul>655 </div>656 </div>657 <!-- InstanceBeginEditable name="Intro Image" -->658 <!-- InstanceEndEditable -->659 660 <div id="mainContent">661 <div class="contentbox">662 <table border="0" cellpadding="8" cellspacing="0" width="750">663 <tbody>664 <tr>665 <td valign="top" width="540">666 <!-- InstanceBeginEditable name="Main Content" -->667 <table border="0" height="58" id="table1" width="98%">668 <tbody>669 <tr>670 <td>671 <table border="0" cellpadding="0" cellspacing="0" id="table2" width="98%">672 <tbody>673 <tr>674 <td align="center" width="234">675 <img border="0" height="35" src="rick.jpg" width="164">676 </td>677 <td align="center" width="336">678 <img border="0" height="67" src="rick.jpg" width="100">679 </td>680 <td align="center" width="27">681 682 </td>683 </tr>684 <tr>685 <td height="5" width="234">686 </td>687 <td height="5" width="336">688 </td>689 <td height="5" width="27">690 </td>691 </tr>692 </tbody>693 </table>694 <p style="text-align: center">695 696 <font class="style2" face="Arial Black">697 Model:698 <font color="#CF1111">699 BE350C700 </font>701 RBC 35702 </font>703 <font face="Arial Black" size="2">704 COMPATIBLE705 </font>706 </p>707 <p style="text-align: center">708 <font color="#CF1111" face="Arial Black" size="2">709 Please look at the MODEL 710 711Number on your unit to make sure this is the712 </font>713 </p>714 <p style="text-align: center">715 <font color="#CF1111" face="Arial Black" size="2">716 RIGHT battery. Many people 717 718order the wrong battery on this model!!!719 </font>720 </p>721 <p style="text-align: center">722 <img border="0" height="130" src="rick.jpg" width="280">723 </p>724 <table border="0" cellpadding="0" cellspacing="0" id="table6" width="100%">725 <!-- <tr>726 727 <td><font size="2" face="Arial"><B>BAT-APC-SU1400</B></font></td>728 729 </tr>-->730 <tbody>731 </tbody>732 </table>733 <p>734 <font face="Arial" size="2">735 <br>736 Brand new replacement battery cartridge for a APC BE350C. Consist of (1)737 </font>738 <font face="arial, helvetica" size="2">739 12CE3740 </font>741 <font face="Arial" size="2">742 battery.743 <b>744 Ship weight for745 <font color="#cf1111">746 APC 747 748Back-UPS ES 350VA Battery749 </font>750 </b>751 :752 <font color="#CF1111">753 <b>754 3.17755 </b>756 </font>757 <b>758 <font color="#cf1111">759 lbs.760 </font>761 </b>762 </font>763 </p>764 <p>765 <font face="Arial" size="2">766 APC Back-UPS BE350 Battery is specifically designed for high rate UPS discharge applications, where high power output is required. All APC Back-UPS BE350 Batteries meet or exceed OEM manufacturer specifications. This APC Back-UPS BE350 Battery is professionally tested and packaged. Our APC Back-UPS BE350 Battery is a 767 768proven solution, backed by our extensive UPS replacement battery experience. If 769 770you have any questions on this APC Back-UPS BE350Battery, please feel free to contact us.771 </font>772 <br>773 <br>774 </p>775 <p class="style2">776 <strong>777 Specifications:778 </strong>779 </p>780 <ul class="style4">781 <li class="style6">782 2 Year Warranty783 </li>784 <li class="style6">785 Performance Guaranteed786 </li>787 <li class="style6">788 Brand New, Factory Fresh789 </li>790 <li class="style6">791 Must use your existing hardware to connect batteries792 </li>793 </ul>794 <p class="style3">795 <span style="font-family: Arial;">796 <span style="color: #ff0000;">797 <strong>798 Buy With Confidence799 </strong>800 </span>801 <br>802 <span class="style4">803 This Battery is professionally tested and packaged. The Battery is a 804 proven solution, backed by our extensive UPS replacement battery experience.805 </span>806 </span>807 </p>808 <p>809 <span class="style2">810 <span style="color: #ff0000;">811 <strong>812 Need help? Speak with a Battery Specialist813 </strong>814 </span>815 <br>816 Call us at:817 <strong>818 [PHONE REDACTED]819 </strong>820 or email us at:821 <a>822 <strong>823 [EMAIL REDACTED]824 </strong>825 </a>826 </span>827 </p>828 </td>829 </tr>830 </tbody>831 </table>832 <p>833 </p>834 </td>835 <td valign="top" width="200">836 <!-- InstanceBeginEditable name="Sidebar Content" -->837 <div id="sidebar">838 <ul>839 <li>840 <strong>841 <a>842 <span class="style4">843 APC UPS Batteries844 </span>845 </a>846 </strong>847 </li>848 <li>849 <strong>850 <a>851 <span class="style4">852 APC UPS Units853 </span>854 </a>855 </strong>856 </li>857 <li>858 <strong>859 <a>860 <span class="style4">861 Belkin UPS Batteries862 </span>863 </a>864 </strong>865 </li>866 <li>867 <strong>868 <a>869 <span class="style4">870 CSB Batteries871 </span>872 </a>873 </strong>874 </li>875 </ul>876 <p align="center">877 <img alt="Call Us Now [PHONE REDACTED]" height="302" src="rick.jpg" width="180">878 </p>879 <center>880 <h4 class="style14">881 Contact Us Via Email882 </h4>883 </center>884 <div align="center">885 <form action="send_form_email.php" method="post" name="contactform">886 <table align="center" style="width: 100px">887 <tbody>888 </tbody>889 </table>890 </form>891 </div>892 <!-- InstanceEndEditable -->893 </div>894 </td>895 </tr>896 </tbody>897 </table>898 </div>899 <div class="contentbtm">900 </div>901 <!-- end #mainContent -->902 </div>903 <!-- InstanceBeginEditable name="Product Info" -->904 <!-- InstanceEndEditable -->905 <!-- end #container -->906 </div>907 <div id="footer">908 <div id="footerwrap">909 <div id="footertop">910 </div>911 <div id="footercontent">912 <table border="0" cellpadding="5" cellspacing="0" width="740">913 <tbody>914 <tr>915 <td valign="top" width="175">916 <p>917 <strong>918 UPS Battery Replacement919 </strong>920 </p>921 <ul>922 <li>923 <a>924 A925 <span class="style2">926 PC UPS Battery927 </span>928 </a>929 </li>930 <li>931 <a>932 Belkin UPS Battery933 </a>934 </li>935 <li>936 <a>937 C938 <span class="style2">939 SB Batteries940 </span>941 </a>942 </li>943 <li>944 <a>945 D946 <span class="style2">947 eltec Batteries948 </span>949 </a>950 </li>951 </ul>952 </td>953 <td valign="top" width="175">954 <p>955 <strong>956 UPS Refurbished Units957 </strong>958 </p>959 <ul>960 <li>961 <a>962 A963 <span class="style2">964 PC UPS Units965 </span>966 </a>967 </li>968 </ul>969 </td>970 <td valign="top" width="175">971 <p>972 <strong>973 Our Quality Guarantee974 </strong>975 </p>976 <ul>977 <li>978 2 - Year Warranty979 </li>980 <li>981 90 Days for Units982 </li>983 <li>984 Pre-Tested Batteries985 </li>986 <li>987 No Old/Reused Batteries988 </li>989 </ul>990 </td>991 <td valign="top" width="175">992 <p>993 <strong>994 Customer Service995 </strong>996 </p>997 <ul>998 <li>999 <a>1000 Contact via Email1001 </a>1002 </li>1003 <li>1004 <a>1005 Return a Shipment1006 </a>1007 </li>1008 <li>1009 <a>1010 D1011 <span class="style2">1012 amaged Shipment1013 </span>1014 </a>1015 </li>1016 </ul>1017 </td>1018 </tr>1019 <tr>1020 <td colspan="4" valign="top">1021 <p class="copyright">1022 Copyright © 2013 BatterySupplyCo.com All Rights Reserved. 1023 <a>1024 Privacy Policy1025 </a>1026 |1027 <a>1028 Terms of Sale1029 </a>1030 </p>1031 </td>1032 </tr>1033 </tbody>1034 </table>1035 </div>1036 <div id="footerbtm">1037 </div>1038 </div>1039 </div>1040 </body>1041 <!-- InstanceEnd -->1042</html>1043