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 /* CSS layout */6 7body {8margin: 0;9/*padding: 20px;*/10/*max-width:800px;*/11margin-left:auto;12margin-right:auto;13background-color: #FFFFFF;14 15/*background-image:url('images/blue-background.jpg');*/16}17 18 19 20#header21{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: gray; font-style:italic; text-decoration : none; text-align:right;22background-color:white;23padding-bottom:5px;24padding-top:5px;25padding-right:2%;26width:98%;27border-top:1px #cccccc solid;28border-bottom:1px #cccccc solid;29}30 31 32#masthead33{34width:100%; background-color:#CDE8F1; padding-top:5px; padding-bottom:0px;}35 36#masthead_top {37/*width:95%;*/38/*float:left;*/39font-family: 'Poiret One', cursive;40font-size: 48pt; color: #666666; text-decoration : none; text-align:left;41/*margin-left:2.5%;42margin-right:2.5%;*/43border-bottom:1px #666666 solid;44margin-top: 10px;45width:800px; margin: 0px auto;46padding-bottom:2px;47}48 49#masthead_bottom {50font-family: 'Poiret One', cursive;51font-size: 48pt; color: #666666; text-decoration : none; text-align:right;52width:800px; margin: 0px auto;53}54 55#masthead_bottom_small {56font-family: 'Poiret One', cursive;57font-size: 40pt; color: #666666; text-decoration : none; text-align:right;58width:800px; margin: 0px auto;59}60 61#masthead_bottom_very_small {62font-family: 'Poiret One', cursive;63font-size: 32pt; color: #666666; text-decoration : none; text-align:right;64width:800px; margin: 0px auto;65}66 67#top_nav_container {background-color:rgb( 205, 232, 241,0.5);}68 69#top_nav {70text-align: center;71padding-bottom:5px;72padding-top:5px;73padding-left: 1.25% ;74padding-right: 1.25%;75width:97.5%;76height:48px;77 78width:800px; margin:0px auto;79 80 81}82 83#container84 {width:800px; 85 margin:0 auto;86 background-color:white;}87 88 89#page_content {90 float:left;91 width: 100%;92 min-height:605px;93 padding-top:10px;94 padding-bottom:10px;95 /*padding-left:2%;96 padding-right:2%;*/97 background-color:white;98}99 100 101#call-out {background-color:rgb( 205, 232, 241,0.5); font-weight:bold; text-align:center;font-family: 'Montserrat', sans-serif; font-size: 10pt; color: black; text-decoration : none; margin-top:10px; padding-top:10px;padding-bottom:10px;border:1px solid #9e9e9e;}102 103#call-out a:link {text-decoration: none; color:black; font-weight:bold}104#call-out a:visited{text-decoration: none; color:black; font-weight:bold}105#call-out a:hover {text-decoration: none; color:gray;font-weight:bold}106 107 108#call-out-offer {background-color:#f77532; font-weight:normal; text-align:center;font-family: 'Montserrat', sans-serif; font-size: 14pt; color: black; text-decoration : none; margin-top:10px; padding-top:10px;padding-bottom:10px;border:1px solid #D3D3D3;margin-bottom:10px}109 110#call-out-offer a:link {text-decoration: none; color:black; font-weight:normal}111#call-out-offer a:visited{text-decoration: none; color:black; font-weight:normal}112#call-out-offer a:hover {text-decoration: none; color:black;font-weight:normal}113 114#bottom_text{ float:left;}115 116 117#footer {118 clear: both;119 background-color:rgb( 205, 232, 241,0.5);120 padding-top:1%;121 padding-bottom:1%;122 border-top:thin #cccccc solid;123 text-align: center;124 padding-left:1%;padding-right:1%;125}126 127#copyright {128 margin-top:10px;129 font-weight: normal;130 clear:both;131 font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #666666; text-decoration: none; text-align:center;132 width:75%;133 margin-left:auto;134margin-right:auto;135}136 137#gallery_clear {clear: both ;}138 139/* standard link CSS */140a:link {text-decoration: none; color:#666666; border:0px;font-weight:normal}141a:visited {text-decoration: none; color:#666666;}142a:active {text-decoration: none;color:black;}143a:hover {text-decoration: none; color:black;}144 145 146.town_links a{text-decoration: none; color: #666666; font-size:8pt; font-family: Verdana, Arial, Helvetica, sans-serif; }147.town_links {text-decoration: none; color: #666666;font-size:8pt;}148 149 150h1 {font-family: 'Montserrat', sans-serif;font-size: 20pt; color: #666666; font-weight:bold; text-decoration: none;margin-top:0px}151h2 {font-family: 'Montserrat', sans-serif;font-size: 13pt; color: #666666; font-weight:bold; text-decoration: none;margin-top:0px}152h3 {font-family: 'Montserrat', sans-serif;font-size: 12pt; color: #666666; font-weight:bold; text-decoration: none;margin-top: 0px;153 margin-bottom: 0.1em;}154 155 156.title {font-family: 'Poiret One', cursive; font-size: 24pt; color: #CDE8F1; font-weight:bold; text-decoration: none;}157.subtitle {font-family: 'Poiret One', cursive; font-size: 16pt; color: #CDE8F1; font-weight:bold; text-decoration: none;}158/* note that user-select:none stops people selecting the text on the site - removed 19th March 23*/159.text {font-family: 'Montserrat', sans-serif; font-size: 11pt; color: black; text-decoration: none; }160.text_smaller {font-family: 'Montserrat', sans-serif; font-size: 9pt; color: black; text-decoration: none; }}161.text img {padding:10px; margin: 5px;border:1px gray solid; float:left; display: block;}162.nav {font-family: 'Montserrat', sans-serif; font-size: 8pt; color: black; text-decoration: none;}163.footer {font-family: 'Montserrat', sans-serif; font-size: 8pt; color: #666666; text-decoration: none; user-select:none;}164 165#callout-right-narrow {width:20%; float:right; padding:5px 5px 0px 5px; margin-left:10px; border: 2px solid #666666; text-align: left; }166 167 168#gallery {169margin:0px auto;170width:100%;171}172 173#blind {174 float:left;175 margin: 2% 2.1% 1% 2.1%;176 padding:2px 2px 5px 2px; /*connected to blind: hover (padding)*/177 border:1px solid #9e9e9e; 178 text-align:center; 179 width:120px;180 height:146px;181 font-family: 'Montserrat', sans-serif; 182 text-decoration : none; 183 font-size:10pt;184 }185 186#blind img {187 padding-bottom:8px;188}189 190#blind:hover {191 border:1px solid #f77532; /*#CDE8F1;*/192 padding:2px 2px 5px 2px; /* reduce padding as i have increased the border thickness */193}194 195#blind a:link {text-decoration: none; color:black; font-weight:bold}196#blind a:visited{text-decoration: none; color:black; font-weight:bold}197#blind a:hover {text-decoration: none; color:#f77532;font-weight:bold}198 199#menu {200 font-family: 'Montserrat', sans-serif;201 font-size:10.5pt;202 margin:5px 0px 5px 0px;203 width:800px; margin: 0px auto;204 background-color:white;205 }206 207#menu ul {208 float: left;209 width: 100%;210 padding: 0;211 margin: 0;212 list-style-type: none;213}214 215#menu a {216 float: left;217 width: 5em;218 text-decoration: none;219 color: #666666;220 background-color: rgb( 205, 232, 241,0.2);221 border: 1px gray solid;222 padding: 0.4em 0.25em;223 /*border-right: 1px solid background-color:rgb( 205, 232, 241,0.5);*/224 margin-right:1px;225 height: 35px;226}227 228#menu a:hover {229 background-color: #CDE8F1;230}231 232#menu li {233 display: inline;234}235 236 237 238/* for ipad portrait */ 239@media all 240and (max-width : 1023px) 241 {242 243 body {padding:0px;width:100%;}244 #menu {display: none;width:0px}245 #top_nav {display: none;width:0px}246 #header {display:none; width:0px}247 248 #call-out-offer {font-size:12pt;margin-bottom:2px}249 #call-out {font-size: 12pt; }250 251 #callout-right-narrow {width:45%;padding-left:7px; text-align: left;}252 253 #masthead_top {font-size:40pt;padding-top:2.5%;margin-top: 0px;width:95%;padding-left:2.5%; padding-right:2.5%;}254 255 #masthead_bottom {font-size:40pt;width:95%;padding-left:2.5%; padding-right:2.5%;padding-bottom:2%; }256 #masthead_bottom_small {font-size:36pt;width:95%;padding-left:2.5%; padding-right:2.5%;padding-bottom:2%;}257 #masthead_bottom_very_small {font-size:30pt;width:95%;padding-left:2.5%; padding-right:2.5%;padding-bottom:2%;}258 259 #masthead {padding-bottom:10px;}260 h1 {font-size:14pt; }261 h2 {font-size:12pt; }262 h3 {font-size:11pt; }263 #container {width:95%; background-color:white; padding-left:2.5%; padding-right:2.5%;}264 #footer {width:95%; padding-left:2.5%; padding-right:2.5%}265 #copyright {width:95%; padding-left:2.5%; padding-right:2.5%; font-family: 'Montserrat', sans-serif;}266 .text {font-size:11pt;}267 .text_smaller {font-size: 8pt;}268 269 270 /* why does this not overried the earlier margin setting? it changes other elements here if i change them */271 #blind { margin: 2% 1% 1% 1%;} 272 }273 274@media all 275and (max-width : 800px) 276 {277 /* iphone 6 and smaller */278 279 #masthead_top {font-size:28pt;}280 281 #masthead_bottom {font-size:36pt;}282 #masthead_bottom_small {font-size:30pt;}283 #masthead_bottom_very_small {font-size:24pt;}284 285 286 287 .text {font-size:10.5pt}288 289}290 291@media all 292and (max-width : 600px)293 {294 295 #masthead_top {font-size:24pt;}296 297 #masthead_bottom {font-size:30pt;}298 #masthead_bottom_small {font-size:26pt;}299 #masthead_bottom_very_small {font-size:21pt;}300 301 302 303 }304 305@media all 306and (max-width : 480px) 307 {308 #masthead_top {font-size:22pt}309 310 #masthead_bottom {font-size:22pt}311 #masthead_bottom_small {font-size:20pt}312 #masthead_bottom_very_small {font-size:17pt} 313 314 #blind { 315 font-size:9pt ;316 margin: 4% 4% 3% 8%;317 } 318 319 #call-out-offer {font-size:9pt;margin-bottom:2px}320 #call-out {font-size: 9pt; }321 322 323 }324 325 326@media all 327and (max-width : 420px) 328 {329 330 331 332 333 } 334 335 336@media all 337and (max-width : 320px) 338 {339 #masthead_top {font-size:20pt}340 341 #masthead_bottom {font-size:20pt}342 #masthead_bottom_small {font-size:17pt}343 #masthead_bottom_very_small {font-size:14pt}344 345 346 347 }348 349 350@font-face {351 font-family: 'Poiret One';352 font-style: normal;353 font-weight: 400;354 font-display: swap;355 src: url(https://fonts.gstatic.com/s/poiretone/v16/UqyVK80NJXN4zfRgbdfbo55cUg.ttf) format('truetype');356}357 358 359 360@font-face {361 font-family: 'Montserrat';362 font-style: normal;363 font-weight: 100;364 font-display: swap;365 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Xw5aX8.ttf) format('truetype');366}367@font-face {368 font-family: 'Montserrat';369 font-style: normal;370 font-weight: 400;371 font-display: swap;372 src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');373}374 </style>375 <title>376 Window Blinds Wakefield | The best window blinds in Wakefield377 </title>378 <meta content="Window Blinds Wakefield | The best window blinds in Wakefield" property="og:title">379 <meta content="The best window blinds in Wakefield. Browse a vast selection of window blinds. The Blinds Company Wakefield. The best window blinds at the best prices" name="description">380 <meta content="The best window blinds in Wakefield. Browse a vast selection of window blinds. The Blinds Company Wakefield. The best window blinds at the best prices" property="og:description">381 <meta content="blinds Wakefield, Wakefield blinds, window blinds Wakefield, made to measure, vertical blinds, wooden blinds, skylight blinds, blackout blinds, Wakefield vertical blinds, Wakefield wooden blinds, Wakefield skylight blinds, Wakefield blackout blinds" name="keywords">382 <meta content="blinds Wakefield" name="abstract">383 <meta content="Copyright Totally Online 2023" name="copyright">384 <meta content="Totally Online" name="author">385 <meta content="The Blinds Company" property="og:site_name">386 <meta content="en_GB" property="og:locale">387 <meta content="website" property="og:type">388 <meta content="" property="og:url">389 <meta content="noodp, noydir" name="robots">390 <meta content="en-gb" http-equiv="Content-Language">391 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">392 <meta content="width=device-width, initial-scale=1.0" name="viewport">393 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">394 <meta content="#ffffff" name="msapplication-TileColor">395 <meta content="favicon/ms-icon-144x144.png" name="msapplication-TileImage">396 <meta content="#ffffff" name="theme-color">397 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">398 </head>399 <body>400 <div id="masthead">401 <div id="masthead_top">402 The Blinds Company403 </div>404 <div id="masthead_bottom">405 Wakefield406 </div>407 </div>408 <div id="top_nav_container">409 <div id="top_nav">410 <div id="menu">411 <ul itemscope itemtype="" role="menu">412 <li itemprop="name" role="menuitem">413 <a itemprop="url" onclick="gtag('event', 'navigation_click', {'blind_type': 'Venetian'});" rel="nofollow" title="Venetian Blinds Wakefield">414 Venetian Blinds415 </a>416 </li>417 <li itemprop="name" role="menuitem">418 <a itemprop="url" onclick="gtag('event', 'navigation_click', {'blind_type': 'Vertical'});" rel="nofollow" title="Vertical Blinds Wakefield">419 Vertical Blinds420 </a>421 </li>422 <li itemprop="name" role="menuitem">423 <a itemprop="url" onclick="gtag('event', 'navigation_click', {'blind_type': 'Roller'});" rel="nofollow" title="Roller Blinds Wakefield">424 Roller Blinds425 </a>426 </li>427 <li itemprop="name" role="menuitem">428 <a itemprop="url" onclick="gtag('event', 'navigation_click', {'blind_type': 'Wooden'});" rel="nofollow" title="Wooden Blinds Wakefield">429 Wooden Blinds430 </a>431 </li>432 </ul>433 </div>434 </div>435 </div>436 <div id="container">437 <div id="page_content">438 <h1>439 Window Blinds Wakefield440 </h1>441 <p class="text">442 By adding blinds to your windows, you can give an old room a fresh and updated look. We are passionate about window blinds and we are equally passionate about our customers in Wakefield.443 </p>444 <div id="call-out-offer">445 <a onclick="gtag('event', 'offer_click', {'offer_position': 'higher offer banner'});">446 CLICK TO447 <b>448 SAVE UP TO 70%449 </b>450 ON MANY PRODUCTS451 </a>452 </div>453 <div id="gallery">454 <div id="blind">455 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Blackout', 'blind_position': '0', 'blind_image': 'blackout-blind.jpg'});">456 <img alt="Blackout Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">457 <br>458 Blackout Blinds459 </a>460 </div>461 <div id="blind">462 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Thermal', 'blind_position': '1', 'blind_image': 'thermal_3.jpg'});">463 <img alt="Thermal Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">464 <br>465 Thermal Blinds466 </a>467 </div>468 <div id="blind">469 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Roller', 'blind_position': '2', 'blind_image': 'roller-2020a.jpg'});">470 <img alt="Roller Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">471 <br>472 Roller Blinds473 </a>474 </div>475 <div id="blind">476 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Roman', 'blind_position': '3', 'blind_image': 'roman-2020.jpg'});">477 <img alt="Roman Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">478 <br>479 Roman Blinds480 </a>481 </div>482 <div id="blind">483 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Venetian', 'blind_position': '4', 'blind_image': 'venetian-2022.jpg'});">484 <img alt="Venetian Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">485 <br>486 Venetian Blinds487 </a>488 </div>489 <div id="blind">490 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Wooden', 'blind_position': '5', 'blind_image': 'wooden-blinds-2.jpg'});">491 <img alt="Wooden Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">492 <br>493 Wooden Blinds494 </a>495 </div>496 <div id="blind">497 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Motorised', 'blind_position': '6', 'blind_image': 'motorised-2020a.jpg'});">498 <img alt="Motorised Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">499 <br>500 Motorised Blinds501 </a>502 </div>503 <div id="blind">504 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Day Night', 'blind_position': '7', 'blind_image': 'daynight-2022.jpg'});">505 <img alt="Day Night Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">506 <br>507 Day Night Blinds508 </a>509 </div>510 <div id="blind">511 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Vertical', 'blind_position': '8', 'blind_image': 'vertical-2020.jpg'});">512 <img alt="Vertical Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">513 <br>514 Vertical Blinds515 </a>516 </div>517 <div id="blind">518 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Skylight', 'blind_position': '9', 'blind_image': 'skylight-2020b.jpg'});">519 <img alt="Loft Blinds Wakefield" height="120" rel="nofollow" src="rick.jpg" width="120">520 <br>521 Loft Blinds522 </a>523 </div>524 </div>525 <div id="gallery_clear">526 </div>527 <div id="call-out">528 <a onclick="_gaq.push(['_trackEvent', 'External', 'Lower Option', 'Lower Option Banner']);">529 SELECT A CATEGORY, OR CLICK HERE TO BROWSE530 </a>531 </div>532 <div id="bottom_text">533 <p class="text">534 We work with the best blind suppliers in the country, who can deliver almost anywhere in the United Kingdom.Our blinds are available in many styles, just click on one of the images above!535 </p>536 <p class="text">537 Remember - our blinds are easy to operate and maintain, and they can be easily cleaned with a damp cloth.538The style of a home can have a positive impact on the mood and happiness of a family.539 </p>540 <p class="text">541 A lot of people talk about made-to-measure blinds, but aren't always sure what that covers. Unlike many products, made to measure blinds are created specifically for you - to your needs.542 </p>543 <p class="text">544 <a>545 Explore our selection of window blinds by clicking here546 </a>547 </p>548 <h2>549 Wakefield Window Blinds550 </h2>551 <div id="callout-right-narrow">552 <h3>553 Home Delivery554 </h3>555 <p class="text_smaller">556 We offer doorstep delivery. As soon as you finalise the style and size, our partners will begin producing your bespoke window blinds.557 </p>558 </div>559 <p class="text">560 </p>561 <p class="text">562 Self-installation is not particularly challenging but563remember to screw the brackets firmly. You can face-fix which means they sit outside of the window recess and block out more light, or top fix which is the opposite - they sit within the recess to create a closer fit.564 </p>565 <p class="text">566 So much choice for your home or office in Wakefield. Click on an image to find out more.567 </p>568 <h3>569 The best window blinds in Wakefield570 </h3>571 <p class="text">572 By installing window blinds, you can give any room a complete transformation – just look at the difference they make in buildings in Wakefield. We keep our eyes peeled for sales throughout the year, and we'll let you know if one is active.573 </p>574 <div id="call-out-offer">575 <a onclick="gtag('event', 'offer_click', {'offer_position': 'lower offer banner'});">576 CLICK TO577 <b>578 SAVE UP TO 70%579 </b>580 ON MANY BLINDS581 </a>582 </div>583 </div>584 </div>585 </div>586 <div id="footer">587 <span class="footer">588 The Blinds Company. For when you just want to get blinds for your windows in Wakefield | The best window blinds in Wakefield | Browse a vast selection of window blinds589 <br>590 Latest news: 2023 could be the biggest year on record for sales of blinds.591 </span>592 </div>593 <div id="copyright">594 copyright595 <a>596 Totally Online Ltd597 </a>598 2011-2023 |599 <span class="town_links">600 <a>601 Wakefield shutters602 </a>603 |604 <a>605 Vertical Blinds606 </a>607 |608 <a>609 window blinds Swansea610 </a>611 |612 <a>613 blinds Stock614 </a>615 |616 <a>617 blinds Bath618 </a>619 |620 <a>621 window blinds Two Bridges622 </a>623 |624 <a>625 window blinds Bournemouth626 </a>627 |628 <a>629 blinds for windows Lawrence Weston630 </a>631 |632 <a>633 blinds Preston634 </a>635 |636 <a>637 blinds Countywide638 </a>639 |640 <a>641 quality window blinds Wakefield642 </a>643 |644 <a>645 legals |646 </a>647 <a rel="nofollow">648 privacy policy and terms649 </a>650 |651 <a>652 blog653 </a>654 <br>655 <br>656 <br>657 <br>658 </span>659 </div>660 </body>661</html>662