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 Transitional//EN" "">2<html dir="ltr" xmlns="">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 in CF15 | Window blinds for sale in CF15377 </title>378 <meta content="Window Blinds in CF15 | Window blinds for sale in CF15" property="og:title">379 <meta content="The Blinds Company CF15. Impressive discounts and promotions and wide array of colors and styles to choose from. Custom or standard sizes - and easy to keep clean" name="description">380 <meta content="The Blinds Company CF15. Impressive discounts and promotions and wide array of colors and styles to choose from. Custom or standard sizes - and easy to keep clean" property="og:description">381 <meta content="blinds CF15, CF15 blinds, window blinds CF15, made to measure, blackout blinds, venetian blinds, skylight blinds, wooden blinds, CF15 blackout blinds, CF15 venetian blinds, CF15 skylight blinds, CF15 wooden blinds" name="keywords">382 <meta content="blinds CF15" 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 CF15406 </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 CF15">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 CF15">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 CF15">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 CF15">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 CF15440 </h1>441 <p class="text">442 Blinds are a quick and easy way to give an old room a new and rejuvenated feel. To guarantee that you get the finest blinds in CF15, our suppliers are committed to maintaining the highest standards of quality.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': 'Roller', 'blind_position': '0', 'blind_image': 'roller-2020a.jpg'});">456 <img alt="Roller Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">457 <br>458 Roller 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 CF15" 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': 'Wooden', 'blind_position': '2', 'blind_image': 'wooden-2020.jpg'});">470 <img alt="Wooden Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">471 <br>472 Wooden Blinds473 </a>474 </div>475 <div id="blind">476 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Skylight', 'blind_position': '3', 'blind_image': 'skylight-2020b.jpg'});">477 <img alt="Loft Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">478 <br>479 Loft Blinds480 </a>481 </div>482 <div id="blind">483 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Motorised', 'blind_position': '4', 'blind_image': 'motorised-2020a.jpg'});">484 <img alt="Motorised Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">485 <br>486 Motorised Blinds487 </a>488 </div>489 <div id="blind">490 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Day Night', 'blind_position': '5', 'blind_image': 'daynight-2022.jpg'});">491 <img alt="Day Night Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">492 <br>493 Day Night Blinds494 </a>495 </div>496 <div id="blind">497 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Venetian', 'blind_position': '6', 'blind_image': 'venetian-2020a.jpg'});">498 <img alt="Venetian Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">499 <br>500 Venetian Blinds501 </a>502 </div>503 <div id="blind">504 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Vertical', 'blind_position': '7', 'blind_image': 'vertical-blind.jpg'});">505 <img alt="Vertical Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">506 <br>507 Vertical Blinds508 </a>509 </div>510 <div id="blind">511 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Blackout', 'blind_position': '8', 'blind_image': 'blackout-blind.jpg'});">512 <img alt="Blackout Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">513 <br>514 Blackout Blinds515 </a>516 </div>517 <div id="blind">518 <a onclick="gtag('event', 'gallery_click', {'blind_type': 'Roman', 'blind_position': '9', 'blind_image': 'roman-2020.jpg'});">519 <img alt="Roman Blinds CF15" height="120" rel="nofollow" src="rick.jpg" width="120">520 <br>521 Roman 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 Your home should be your pride and joy. A place to show off.535 </p>536 <p class="text">537 Home upgrades can increase the value of your home and improve its functionality. Making energy-efficient upgrades and other home improvement projects can pay off in the long term - as well as being planet-friendly.538 </p>539 <p class="text">540 After moving into his new apartment, Dave realized that the windows had no curtains or blinds. He went online and found a bargain on some chic roller blinds.541 </p>542 <h2>543 CF15 Window Blinds544 </h2>545 <p class="text">546 So much choice for your home or office in CF15. Click on an image to find out more.547 </p>548 <p class="text">549 By installing window blinds, you can give any room a complete transformation – just look at the difference they make in houses in CF15. We keep an eye out for sales throughout the year and will let you know if one is active.550 </p>551 <h3>552 Window blinds for sale in CF15553 </h3>554 <p class="text">555 </p>556 <p class="text">557 Can you imagine your room with brand new blinds? We can!558 </p>559 <div id="call-out-offer">560 <a onclick="gtag('event', 'offer_click', {'offer_position': 'lower offer banner'});">561 CLICK TO562 <b>563 SAVE UP TO 70%564 </b>565 ON MANY PRODUCTS566 </a>567 </div>568 </div>569 </div>570 </div>571 <div id="footer">572 <span class="footer">573 The Blinds Company.574 <br>575 Latest news: 2023 is witnessing a resurgence in fitting blinds in bay windows to solve some of the issues with curtains.576 </span>577 </div>578 <div id="copyright">579 copyright580 <a>581 Totally Online Ltd582 </a>583 2011-2023 |584 <span class="town_links">585 <a>586 CF15 shutters587 </a>588 |589 <a>590 Window Blinds Are a Great Solution591 </a>592 |593 <a>594 window blinds St Helens595 </a>596 |597 <a>598 blinds Rockcliffe599 </a>600 |601 <a>602 blinds Lincoln603 </a>604 |605 <a>606 window blinds Watchet607 </a>608 |609 <a>610 window blinds Worthing611 </a>612 |613 <a>614 blinds for windows The Galleries615 </a>616 |617 <a>618 blinds Sheffield619 </a>620 |621 <a>622 blinds St Helier623 </a>624 |625 <a>626 the best window blinds CF15627 </a>628 |629 <a>630 legals |631 </a>632 <a rel="nofollow">633 privacy policy and terms634 </a>635 |636 <a>637 blog638 </a>639 <br>640 <br>641 <br>642 <br>643 </span>644 </div>645 </body>646</html>647