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 </style>6 <title>7 SD CONSTRUCTION SPECIALISTS, INC. / Diaz Samuel8 </title>9 <meta content="width=device-width, initial-scale=1.0" name="viewport">10 <meta content="SD CONSTRUCTION SPECIALISTS, INC. From TAMPA Reviews. Registered Agent is Samuel Diaz. ⚡Admin Dissolution For Annual Report⚡" name="description">11 <style type="text/css">12 html, body {13 height: 100%;14 }15 16 body {17 color: #111;18 padding: 0;19 margin: 0;20 font-family: 'Segoe UI',Helvetica Neue,Helvetica,Arial,sans-serif;21 font-size: 14px;22 line-height: 1.428571429;23 color: #333;24 background-color: #fff;25 }26 27 *, *:before, *:after {28 -webkit-box-sizing: border-box;29 -moz-box-sizing: border-box;30 box-sizing: border-box;31 }32 33 .page-wrap {34 min-height: 100%;35 margin-bottom: -210px;36 }37 38 .page-wrap:after {39 content: "";40 display: block;41 }42 43 footer, .page-wrap:after {44 margin: 0;45 height: 190px;46 }47 48 footer {49 margin-top: 10px;50 background: #f9f9f9;51 }52 53 footer a {54 color: #666;55 text-decoration: none;56 }57 58 footer a:hover {59 text-decoration: underline;60 }61 62 footer .logo {63 margin: 0 20px 0 0;64 display: inline-block;65 vertical-align: top;66 }67 68 footer .logo img {69 max-height: 30px;70 }71 72 footer .footer-block {73 margin: 0 20px;74 vertical-align: top;75 display: inline-block;76 }77 78 footer .footer-block a {79 display: block;80 margin: 0 0 10px;81 }82 83 footer .alphabet {84 margin: 0 20px;85 vertical-align: top;86 display: inline-block;87 width: 400px;88 }89 90 footer .alphabet a {91 width: 20px;92 height: 20px;93 margin: 5px;94 display: inline-block;95 }96 97 @media(max-width:992px) {98 footer {99 height: auto;100 }101 102 footer .alphabet, footer .footer-block {103 margin: 20px 0;104 display: block;105 width: 100%;106 }107 }108 109 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {110 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;111 font-weight: 500;112 line-height: 1.1;113 }114 115 h1, .h1 {116 margin: 50px 0 30px;117 font-size: 34px;118 }119 120 h1 s, .h1 s {121 text-decoration: line-through;122 display: block;123 font-size: 16px;124 color: #aaa;125 margin-top: 6px;126 }127 128 h2, .h2 {129 margin: 50px 0 15px;130 font-size: 24px;131 }132 133 h3, .h3 {134 margin: 50px 0 15px;135 font-size: 20px;136 }137 138 select {139 width: 100%;140 max-width: 350px;141 padding: 8px 5px;142 border-radius: 4px;143 }144 145 .head {146 margin: 50px 0 30px;147 font-size: 30px;148 }149 150 .head.big {151 font-size: 35px;152 }153 154 .subhead {155 margin: -25px 0 30px;156 }157 158 .subhead.big {159 font-size: 18px;160 }161 162 .center {163 text-align: center;164 }165 166 a {167 color: #0288d1;168 }169 170 a:hover {171 color: #09a7fd;172 }173 174 a:visited {175 color: #955ba5;176 }177 178 hr {179 margin-top: 20px;180 margin-bottom: 20px;181 border: 0;182 border-top: 1px solid #eee;183 height: 0;184 box-sizing: content-box;185 }186 187 hr.thin {188 margin-top: 10px;189 margin-bottom: 10px;190 }191 192 .green, .g {193 color: #4eba6f;194 }195 196 .red, .r {197 color: #c8001a;198 }199 200 .gray {201 color: #ababab;202 }203 204 label {205 display: inline-block;206 padding: 10px;207 width: 130px;208 color: #111;209 text-align: right;210 vertical-align: top;211 }212 213 @media(max-width:992px) {214 label {215 display: block;216 width: 100%;217 text-align: left;218 margin-top: 10px;219 }220 }221 222 label.required {223 font-weight: 700;224 }225 226 label.required:after {227 content: " *";228 color: #c8001a;229 }230 231 input[type="text"], input[type="email"], input[type="password"] {232 height: 34px;233 padding: 6px 12px;234 border: 1px solid #ccc;235 border-radius: 4px;236 box-shadow: inset 0 1px 1px rgba(0,0,0,.075);237 }238 239 textarea {240 height: auto;241 padding: 6px 12px;242 border: 1px solid #ccc;243 border-radius: 4px;244 box-shadow: inset 0 1px 1px rgba(0,0,0,.075);245 min-width: 195px;246 }247 248 .validation-summary-errors {249 color: #c8001a;250 margin: 0 0 40px;251 padding: 10px;252 background: #faebd7;253 }254 255 .validation-summary-errors span {256 font-size: 20px;257 }258 259 .nomargintop {260 margin-top: 0 !important;261 }262 263 .shadow {264 height: 100%;265 position: relative;266 }267 268 .shadow:after {269 content: "";270 position: absolute;271 top: 0;272 bottom: 0;273 right: 0;274 width: 50px;275 background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 40%,#fff 75%,#fff 100%);276 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=1);277 z-index: 55;278 pointer-events: none;279 }280 281 .shadow .overflow {282 width: 100%;283 overflow-x: auto;284 overflow-y: hidden;285 position: relative;286 height: auto;287 }288 289 .shadow .overflow table {290 padding-right: 25px;291 }292 293 .container {294 margin: 0 auto;295 padding: 0 20px 15px;296 }297 298 @media(min-width:768px) {299 .container {300 padding: 0 20px 15px;301 max-width: 750px;302 }303 }304 305 @media(min-width:992px) {306 .container {307 padding: 0 30px 15px;308 max-width: 970px;309 }310 }311 312 @media(min-width:1200px) {313 .container {314 padding: 0 40px 20px;315 max-width: 1170px;316 }317 }318 319 @media(min-width:768px) {320 .gad {321 padding: 0 20px 15px;322 max-width: 400px;323 }324 }325 326 @media(min-width:992px) {327 .gad {328 padding: 0 30px 15px;329 max-width: 600px;330 }331 }332 333 @media(min-width:1200px) {334 .gad {335 padding: 0 40px 20px;336 max-width: 800px;337 }338 }339 340 div.hint {341 margin: 20px;342 font-size: smaller;343 }344 345 input:focus, input:active {346 border-color: transparent;347 }348 349 .logo {350 margin: 0 0 30px;351 }352 353 .logo img {354 max-height: 50px;355 }356 357 .logo a {358 display: block;359 color: #dcdcdc;360 text-decoration: none;361 }362 363 .logo a:hover {364 color: #fff;365 }366 367 .logo a:hover small {368 color: #fff;369 }370 371 .logo a small {372 display: block;373 text-decoration: none;374 margin-top: -10px;375 }376 377 .header {378 color: #fff;379 padding: 30px 15px 30px;380 background-color: #465e7d;381 background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('/assets/img/florida.jpg') 50% 45%/cover;382 }383 384 .header.thin {385 padding: 15px 15px 0;386 }387 388 .header.thin:hover .promos .search-bar {389 opacity: 1;390 transition: opacity .3s ease;391 }392 393 .header.thin .promos h2, .header.thin .promos p {394 display: none;395 }396 397 .header.thin .promos .logo {398 margin: 10px 0 15px;399 }400 401 .header.thin .promos .logo img {402 max-height: 40px;403 }404 405 .header.thin .promos .logo small {406 font-size: 80%;407 }408 409 .header.thin .promos .search-bar {410 margin: 0 auto;411 opacity: .8;412 transition: opacity .3s ease;413 }414 415 .header.thin .promos .search-bar .input-group .form-control {416 height: 40px;417 }418 419 .header.thin .promos .search-bar .input-group .input-group-addon {420 background: #898b8c;421 }422 423 .header.thin .promos .search-bar .input-group .input-group-addon:hover {424 background: #9d9e9e;425 }426 427 .header.thin .promos .search-bar .input-group .input-group-addon:active {428 background: #9e9d93;429 }430 431 .header .promos {432 text-align: center;433 }434 435 .header .promos h2 {436 font-weight: 700;437 font-size: 30px;438 margin: 50px 0 10px;439 padding: 20px 0 5px;440 }441 442 .header .promos p {443 color: #d8e2ef;444 margin-bottom: 0;445 line-height: 1.6em;446 font-size: 16px;447 margin: 0;448 padding: 0;449 }450 451 .header .promos .search-bar {452 margin: 50px auto 40px;453 max-width: 500px;454 }455 456 .header .promos .search-bar .input-group {457 position: relative;458 display: table;459 border-collapse: separate;460 border: 6px solid rgba(0,0,0,.2);461 border-radius: 5px;462 }463 464 .header .promos .search-bar .input-group .input-group-addon {465 font-weight: normal;466 line-height: 1;467 text-align: center;468 border: 0;469 border-radius: 4px;470 padding: 0;471 width: 1%;472 white-space: nowrap;473 vertical-align: middle;474 display: table-cell;475 background: #2980b9;476 }477 478 .header .promos .search-bar .input-group .input-group-addon:hover {479 background: #3498db;480 }481 482 .header .promos .search-bar .input-group .input-group-addon:active {483 background: #147fdb;484 }485 486 .header .promos .search-bar .input-group .input-group-addon:last-child {487 border-bottom-left-radius: 0;488 border-top-left-radius: 0;489 border-left: 0;490 }491 492 .header .promos .search-bar .input-group .input-group-addon button {493 color: #ecf0f1;494 font-size: 16px;495 padding: 10px 20px;496 border: 0;497 cursor: pointer;498 background: transparent;499 }500 501 .header .promos .search-bar .input-group .form-control {502 display: table-cell;503 width: 100%;504 padding: 6px 12px;505 font-size: 14px;506 line-height: 1.428571429;507 color: #555;508 vertical-align: middle;509 background-color: #fff;510 border-radius: 0;511 border: 1px solid #ccc;512 border-top-left-radius: 4px;513 border-bottom-left-radius: 4px;514 -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;515 transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;516 height: 45px;517 border-right: 0;518 box-shadow: 0 0 0;519 margin-bottom: 0;520 background-image: none;521 }522 523 .body-content p {524 line-height: 1.6em;525 font-size: 16px;526 margin: 15px 0 15px;527 }528 529 .line {530 margin: 0 auto;531 display: block;532 width: 100%;533 }534 535 @media(min-width:992px) {536 .line {537 display: table;538 border-spacing: 20px 0;539 margin: 0 -20px;540 }541 }542 543 .line .row {544 display: table-cell;545 margin-bottom: 20px;546 vertical-align: top;547 }548 549 .line .row > div {550 font-size: 16px;551 margin: 0 0 10px;552 }553 554 .line .row > div span {555 font-size: 90%;556 color: #ababab;557 width: 130px;558 display: inline-block;559 line-height: 1em;560 }561 562 .line .row > div span:after {563 content: ':';564 }565 566 .line .row > div.thin {567 margin: 0 0 5px;568 }569 570 .line .row > div.resigned {571 color: #ababab;572 }573 574 .line .row > div.resigned a {575 color: #ababab !important;576 }577 578 .line .row > div.resigned a:hover {579 color: #111 !important;580 }581 582 .line .row > div.resigned span {583 color: #ababab;584 }585 586 .line .row > div.black {587 color: #111;588 }589 590 .line .row > div.black span {591 color: #111;592 }593 594 .line .row > div a.search {595 text-decoration: none;596 padding: 3px 20px 5px;597 color: #111;598 position: relative;599 background-image: url('/assets/img/search.png');600 background-repeat: no-repeat;601 background-size: 25px;602 background-position-y: -1px;603 background-position-x: -3px;604 }605 606 .line .row > div a.search:hover {607 text-decoration: underline;608 }609 610 .line .row > div .buy {611 display: inline-block;612 }613 614 .line .row.wild {615 width: 100%;616 display: block;617 }618 619 @media(min-width:768px) {620 .line .row.wild {621 display: block;622 width: 100%;623 }624 }625 626 @media(min-width:992px) {627 .line .row.wild {628 display: table-cell;629 width: 60%;630 }631 }632 633 @media(min-width:1200px) {634 .line .row.wild {635 display: table-cell;636 width: 70%;637 }638 }639 640 .line .row.thin {641 width: 100%;642 display: block;643 }644 645 @media(min-width:768px) {646 .line .row.thin {647 display: block;648 width: 100%;649 }650 }651 652 @media(min-width:992px) {653 .line .row.thin {654 display: table-cell;655 width: 40%;656 }657 }658 659 @media(min-width:1200px) {660 .line .row.thin {661 display: table-cell;662 width: 30%;663 }664 }665 666 .line .row .padding-block {667 padding: 0 25px 20px;668 }669 670 @media(max-width:992px) {671 .line .row .padding-block {672 overflow: auto;673 padding: 0;674 }675 }676 677 .info {678 font-size: 16px;679 margin: 0 0 10px;680 }681 682 .info span {683 font-size: 90%;684 color: #ababab;685 width: 130px;686 display: inline-block;687 line-height: 1em;688 }689 690 .info span:after {691 content: ':';692 }693 694 .info.thin {695 margin: 0 0 5px;696 }697 698 .info.resigned {699 color: #ababab;700 }701 702 .info.resigned a {703 color: #ababab !important;704 }705 706 .info.resigned a:hover {707 color: #111 !important;708 }709 710 .info.resigned span {711 color: #ababab;712 }713 714 .info.black {715 color: #111;716 }717 718 .info.black span {719 color: #111;720 }721 722 .info a.search {723 text-decoration: none;724 padding: 3px 20px 5px;725 color: #111;726 position: relative;727 background-image: url('/assets/img/search.png');728 background-repeat: no-repeat;729 background-size: 25px;730 background-position-y: -1px;731 background-position-x: -3px;732 }733 734 .info a.search:hover {735 text-decoration: underline;736 }737 738 .info .buy {739 display: inline-block;740 }741 742 .buy {743 cursor: pointer;744 background: #e8e8e8;745 padding: 3px 10px;746 border-radius: 4px;747 color: #8e8e8e;748 box-shadow: 0 2px 0 0 #c2c2c2;749 }750 751 @media(max-width:992px) {752 .buy {753 text-align: center;754 }755 }756 757 .buy:hover {758 background: #e0e0e0;759 box-shadow: 0 2px 0 0 #c7c7c7;760 }761 762 .buy:active {763 background: #d6d6d6;764 box-shadow: 0 2px 0 0 #bdbdbd;765 }766 767 .buy-link {768 cursor: pointer;769 background: #fff;770 padding: 3px 10px;771 border-radius: 4px;772 color: #0288d1;773 text-decoration: underline;774 font-weight: bold;775 }776 777 @media(max-width:992px) {778 .buy-link {779 text-align: center;780 }781 }782 783 .buy-link:hover {784 color: #09a7fd;785 text-decoration: none;786 }787 788 .buy-link:active {789 color: #f44336;790 }791 792 .buy-green {793 cursor: pointer;794 background: #43a047;795 padding: 3px 10px;796 border-radius: 4px;797 color: #fff;798 box-shadow: 0 2px 0 0 #2c6a2f;799 }800 801 @media(max-width:992px) {802 .buy-green {803 text-align: center;804 }805 }806 807 .buy-green:hover {808 background: #3e9542;809 box-shadow: 0 2px 0 0 #2f7132;810 }811 812 .buy-green:active {813 background: #38873c;814 box-shadow: 0 2px 0 0 #29632c;815 }816 817 .map {818 max-height: 250px;819 }820 821 .map a {822 display: block;823 }824 825 .map iframe {826 pointer-events: none;827 }828 829 .wrapper {830 margin: 0 10px;831 }832 833 .report-offer {834 background: #ffecb3;835 border: dashed 1px #e2e2e2;836 padding: 20px;837 border-radius: 5px;838 text-align: center;839 }840 841 .report-offer .discount {842 margin-top: 10px;843 }844 845 .report-offer h3 {846 font-size: 19px;847 line-height: 1.3em;848 margin: 15px 0 25px;849 }850 851 .report-offer h3 strong {852 font-size: 22px;853 }854 855 .report-offer .buy {856 color: #fff;857 display: block;858 margin: 0 auto;859 width: 200px;860 font-size: 120%;861 padding: 10px 15px;862 background: #f44336;863 box-shadow: 0 3px 0 0 #d2190b;864 }865 866 .report-offer .buy:focus {867 outline: 0;868 }869 870 .report-offer .buy:hover {871 background: #f33527;872 box-shadow: 0 3px 0 0 #b5160a;873 }874 875 .report-offer .buy:active {876 background: #f22314;877 box-shadow: 0 2px 0 0 #a21309;878 }879 880 a.list {881 display: block;882 margin: 5px 0 5px;883 }884 885 .account-data {886 border-spacing: 10px 2px;887 margin: 10px 0 20px;888 margin-left: -10px;889 }890 891 .account-data tr {892 line-height: 25px;893 }894 895 .account-data tr.separate td {896 height: 20px;897 }898 899 .account-data tr th {900 font-size: 16px;901 font-weight: 500;902 }903 904 .account-data tr th:first-child {905 line-height: 1.2em;906 text-align: left;907 }908 909 .account-data tr td {910 padding: 5px;911 }912 913 .account-data tr td:first-child {914 color: #ababab;915 min-width: 130px;916 line-height: 14px;917 padding: 5px 20px 5px 0;918 }919 920 .account-data tr td .account-total {921 border-bottom: 4px double #ddd;922 }923 924 .list {925 font-size: 13px;926 color: #ababab;927 }928 929 .list a {930 font-size: 15px;931 line-height: 1.15em;932 text-decoration: none;933 display: block;934 }935 936 .list a:not(:first-child) {937 margin-top: 20px;938 }939 940 @media(max-width:992px) {941 .pagination {942 text-align: center;943 }944 }945 946 .pagination a, .pagination span {947 font-size: 16px;948 display: inline-block;949 width: 30px;950 height: 25px;951 text-align: center;952 padding-top: 2px;953 margin: 20px 0 10px;954 background: transparent;955 text-decoration: none;956 transition: all .3s ease;957 border-radius: 4px;958 }959 960 .pagination span {961 color: #eee;962 }963 964 .pagination span.active {965 font-weight: 700;966 background: #eee;967 border-radius: 4px;968 color: #807d7d;969 }970 971 .pagination a {972 color: #807d7d;973 }974 975 .pagination a:hover {976 transition: all .3s ease;977 background: #f5f3f3;978 }979 980 table.invoice {981 width: 100%;982 }983 984 table.invoice tr:first-child {985 background: #eee;986 }987 988 table.invoice th {989 font-size: 18px;990 font-weight: 100;991 text-align: left;992 padding: 5px 10px;993 }994 995 table.invoice td {996 padding: 15px 10px;997 vertical-align: top;998 }999 1000 table.invoice td.item {1001 font-size: 16px;1002 line-height: 1em;1003 }1004 1005 table.invoice td.item small {1006 font-size: 80%;1007 }1008 1009 table.invoice td.price {1010 font-weight: 700;1011 }1012 1013 .total {1014 margin: 20px 0 0;1015 padding: 20px 0 10px;1016 font-size: 17px;1017 border-top: 1px solid #eee;1018 text-align: right;1019 }1020 1021 .total .price {1022 font-size: 25px;1023 font-weight: 700;1024 padding-left: 10px;1025 }1026 1027 .invoice-buttons {1028 text-align: right;1029 margin: 10px 0;1030 }1031 1032 .btn {1033 border: 0;1034 font-size: 16px;1035 }1036 1037 .btn.continue {1038 color: #fff;1039 display: inline-block;1040 padding: 10px 15px;1041 background: #43a047;1042 border-radius: 5px;1043 font-size: 120%;1044 box-shadow: 0 2px 0 0 #2c6a2f;1045 cursor: pointer;1046 }1047 1048 @media(max-width:992px) {1049 .btn.continue {1050 text-align: center;1051 }1052 }1053 1054 .btn.continue:hover {1055 background: #3e9542;1056 box-shadow: 0 2px 0 0 #2f7132;1057 }1058 1059 .btn.continue:active {1060 background: #38873c;1061 box-shadow: 0 2px 0 0 #29632c;1062 }1063 1064 ul.invoice {1065 padding: 0;1066 font-size: 95%;1067 }1068 1069 ul.invoice li {1070 background: url('/assets/img/ok.png') no-repeat left top;1071 padding: 0 0 5px 30px;1072 list-style: none;1073 margin: 0;1074 }1075 1076 .gurantee {1077 text-align: center;1078 }1079 1080 .gurantee span {1081 width: 70%;1082 vertical-align: bottom;1083 display: inline-block;1084 padding: 0 15px 20px 0;1085 text-align: center;1086 }1087 1088 .gurantee span b {1089 font-size: 120%;1090 }1091 1092 .gurantee img {1093 max-width: 30%;1094 display: inline-block;1095 }1096 1097 .invoice-block {1098 border: 1px solid #eee;1099 background: #f7f7f7;1100 padding: 20px;1101 margin-bottom: 40px;1102 }1103 1104 @media(max-width:992px) {1105 .invoice-block {1106 padding: 10px;1107 }1108 }1109 1110 .invoice-block h2 {1111 margin-top: 0;1112 }1113 1114 .invoice-block input[type="text"], .invoice-block input[type="email"], .invoice-block input[type="password"] {1115 width: 40% !important;1116 }1117 1118 .cookie-info {1119 width: 100%;1120 position: fixed;1121 bottom: 0;1122 left: 0;1123 background: #212121;1124 margin: 10px 0 0 0;1125 z-index: 10000;1126 color: #f5f5f5;1127 font-size: 105%;1128 vertical-align: middle;1129 text-align: center;1130 }1131 1132 .cookie-info a {1133 color: #2196f3;1134 }1135 1136 .cookie-info div {1137 margin: 20px;1138 vertical-align: middle;1139 }1140 1141 .cookie-info div span {1142 display: inline-block;1143 }1144 1145 .cookie-info button.got-it {1146 color: #212121;1147 padding: 10px 35px;1148 background: #fdd835;1149 display: inline-block;1150 border: none;1151 border-radius: 5px;1152 text-decoration: none;1153 vertical-align: middle;1154 font-size: 100%;1155 cursor: pointer;1156 }1157 1158 .form, form {1159 max-width: 100%;1160 }1161 1162 .form .row, form .row {1163 margin: 10px 0;1164 }1165 1166 .form .row.main, form .row.main {1167 font-weight: bold;1168 }1169 1170 .form .row label, form .row label {1171 min-width: 150px;1172 width: auto;1173 max-width: 30%;1174 text-align: left;1175 }1176 1177 .form .row input, form .row input, .form .row textarea, form .row textarea, .form .row option, form .row option {1178 width: 100%;1179 max-width: 350px;1180 }1181 1182 .form .row .g-recaptcha, form .row .g-recaptcha {1183 margin-left: 155px;1184 }1185 1186 @media(max-width:992px) {1187 .form .row .g-recaptcha, form .row .g-recaptcha {1188 margin-left: 0;1189 }1190 }1191 1192 .form input.btn.continue, form input.btn.continue {1193 margin-left: 155px;1194 margin-top: 20px;1195 min-width: 150px;1196 }1197 1198 @media(max-width:992px) {1199 .form input.btn.continue, form input.btn.continue {1200 margin-left: 0;